A Movie Application Using Laravel, VueJS and Stripe

A system where customers can pay to watch videos(movies) based on a daily, monthly, or yearly subscription,

Features

1. Laravel for Backend
2. VueJS for frontend
3. Laravel Sanctum for API Auth
4. Using the TheMovieDB(TMDB) Movie API
5. Stripe Payment Gateway for the subscription

To Use This App

Stripe Payment Gateway: https://stripe.com/en-gb-us (MUST BE REGISTERED TO GET YOUR PUBLISH KEY AND SECRET KEY AND TO CREATE SUBSCRIPTION)

TMDB API: https://www.themoviedb.org/settings/api (MUST BE REGISTERED TO VIEW THIS PAGE TO GET YOUR API KEY AND TOKEN)

In your .env file

# Your database details here
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=moviesapp
DB_USERNAME=root
DB_PASSWORD=

# Your API details
TMDB_TOKEN=***__***
TMDB_BEARER=***__***
STRIPE_KEY=pk_test_***__***
STRIPE_SECRET=sk_test_***__***

composer update
php artisan migrate

npm install

Resources Used

Laravel UI: Used to setup Vue

Main Docs: https://laravel.com/docs/7.x/frontend

Laravel Sanctum: For the authentication

Main Docs: https://laravel.com/docs/8.x/sanctum

Laravel Cashier: For the payment/subscription (Easy integration with Stripe)

Main Docs: https://laravel.com/docs/8.x/billing

Tailwind CSS: Used for the Frontend UI

Main Docs: https://tailwindcss.com/docs/installation

npm install tailwindcss postcss autoprefixer

PostCSS 7 compatibility build

Error: PostCSS plugin tailwindcss requires PostCSS 8.

npm uninstall tailwindcss postcss autoprefixer

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Alpine.js: For event handling on the search form (probably not necessary!) - I just like it.

<script
    src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"
    defer
></script>