Mufis is a movie and tv shows streaming site (General Idea) built on the Laravel Framework using the TheMovieDB API and Stripe for the subscription aspect.
- Completely Laravel (Blade).
- Tailwind CSS for the layout (wt Laravel UI).
- AlpineJS for the UI interactivity.
- Laravel Cashier (Stripe).
- Laravel Livewire (the dynamic search).
- Tailwind Spinner (for search results indicator).
Let me know if I'm missing anything
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
Laravel UI: Authentication Scaffolding
Main Docs: https://laravel.com/docs/7.x/frontend
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/alpine@v2.x.x/dist/alpine.min.js"
defer
></script>
This is a personal project, however you can contribute to it in any way see fit
The Laravel framework is open-sourced software licensed under the MIT license.