Zuhedflix is an imitation of the largest video streaming app - Netflix a streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries, and more on thousands of internet-connected devices.
While subscribing to a plan, please note that the following payment will taken into account as a dummy test payment. No amount shall be debited and use dummy card details while subscribing also, prohibit the use of your personal banking details.
|
|
|
|
|
|
|
|
One of my aim to create this project is to learn the tips and tricks while creating this project and upskilling myself on my current knowledge and increasing it. An individual project led by a curiosity about how one of the MAANG technology work and what where the mechanics behind it are. The project was created using my favorite framework for React - NextJS with TypeScript as its principal language. The beautiful UI was created using TailwindCSS's utility classes and plugins from npm (Node Package Manager).
Entire movies data is fetched from the https://tmdb.org/ API. To maintain a sophisticated backend, integrated with powerful Stripe payment, Firebase was implemented with Stripe extension to handle secure payments over apps. The extension from Firebase to utilize Stripe provides this robust and beautiful UI for checkout and plan subscriptions via a custom WebHook also provided by Firebase to integrate with Stripe to access customers, products, and their subscriptions. In conclusion, custom hooks to manage the data flow over the application, hooks like useAuth: a customized hook to maintain authorization of the user, combined with ContextAPI and useMemo hooks which give powerful states to handle errors and authorization of the user and optimize the overall performance.
- Signup and Sign in
- Index page with different categories as custom built sliders
- Modal to display movie details and view trailer
- Add / Remove movie from user's personal collection
- Different subscription and their details
- Stripe subscription payments
- Cancel subscription
- Switch to other subscription over existing
- NextJS optimized image delivery
- Server Side Rendering
- Signup and Sign in
- Browse to different categories
- View trailer and movie details
- Control audio and video state of the trailer
- Add a movie to personal list
- Subscribe to a plan
- Switch subscription
- Cancel subscription
 |
 |
|
 |
 |
|
 |
 |
|
 |
 |
|
 |
 |
|
 |
 |
This project was built using NextJS, React, Tailwind, TypeScript, Recoil, Material UI, and Firebase with Stripe integration. Entire data about movies and tv shows is fetched from https://tmdb.org/ API.
- NPM
- NextJS
- TypeScript
- Firebase
The project repository can be found in GitHub link or just clone this project using this command.
Using HTTPS
# git clone https://github.com/zuhedshaikh95/zuhedflix-originals.git
- Open terminal on your workspace with
cd /home/workspace/zuhedflix-originals
Install NPM
Check that you have node and npm installed
To check if you have Node.js installed, run this command in your terminal:
node -v
To confirm that you have npm installed you can run this command in your terminal:
npm -v
To run the application, run the following command:
npm run dev
To run this project, you will need to add the following environment variables to your .env file
NEXT_PUBLIC_API_KEY
e.g. API key from https://tmdb.org/
The following keys are subjected to your Firebase account strictly having a current Balze plan and will be provided once initialized an instance
FIREBASE_API_KEY
FIREBASE_AUTH_DOMAIN
FIREBASE_PROJECT_ID
FIREBASE_STORAGE_BUCKET
FIREBASE_MESSAGING_SENDER_ID
FIREBASE_APP_ID
FIREBASE_MEASUREMENT_ID
- Visual Studio Code
- NextJS Framework
- Firebase
- Stripe Dashboard and WebHook to monitor and manage payments
© 2023 Zuhed Shaikh
Give a ⭐️ if you like this project!