zuhedshaikh95 / zuhedflix-originals

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.

Home Page:https://zuhedflix-originals.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Zuhedflix Originals

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.


🖥️ Tech Stack

reactjs nextjs firebase typescript tailwind-css mui form-hook

Deployed On:

vercel



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.



cover



slider home
slider slider
slider home
slider slider


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.



Screens

  • 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

🚀 User Features

  • 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

Glimpses of zuhedflix-originals 🎬 :

home slider
men allProducts
allProducts men
allProducts allProducts
allProducts men
allProducts men


Getting Started

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.

Prerequisites

  • NPM
  • NextJS
  • TypeScript
  • Firebase

Setup

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

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

Environment Variables

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

Tools used on this project

  • Visual Studio Code
  • NextJS Framework
  • Firebase
  • Stripe Dashboard and WebHook to monitor and manage payments

Contact

Let's connect 🤝

linkedin GitHub

© 2023 Zuhed Shaikh

Show your support

Give a ⭐️ if you like this project!

About

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.

https://zuhedflix-originals.vercel.app


Languages

Language:TypeScript 92.1%Language:CSS 5.1%Language:JavaScript 2.8%