Netflix Clone App – Built with React, Firebase, TMDb API, and Toastify
This Netflix clone app is a modern and sleek movie streaming platform designed to mimic the core functionality and design of Netflix. Built using ReactJS, Firebase, TMDb API, and Toastify, the app provides an immersive and responsive experience for discovering and watching movies and TV shows.
Key Features: Movie & TV Show Discovery: Powered by the TMDb API, the app fetches a wide range of movie and TV show data, including details like movie titles, posters, descriptions, ratings, and release dates. Users can explore different categories, including popular, trending, or genre-based lists.
Interactive UI: A sleek, user-friendly interface with interactive movie cards and smooth horizontal scrolling, designed to enhance the browsing experience. The interface is fully responsive, providing a seamless experience across various devices, from desktops to mobile phones.
Video Player: When users click on a movie or TV show, they’re taken to a detailed view where they can watch trailers or clips embedded via YouTube. The app uses dynamic routing to navigate between pages with ease.
User Authentication & Real-Time Data: Integrated with Firebase, the app supports user authentication, allowing users to securely sign up, log in, and manage their profiles. Firebase also enables real-time data syncing and storage for users’ preferences, like saving favorite movies or creating personalized watchlists.
Error Handling and Notifications: The app uses Toastify for delivering user-friendly notifications, alerting users about successful actions (like adding a movie to their watchlist) or error messages (such as failed data fetches), making the app experience smoother and more intuitive.
Search and Filter: Users can easily search for movies and TV shows by name, filter by genres, and browse through the most popular or top-rated content available on the platform.
Performance and Scalability: The app is optimized for performance, with lazy-loaded images and efficient use of React hooks and state management. With the scalability of Firebase and the flexibility of ReactJS, the app is ready to handle growing user bases and new features in the future.
Tech Stack: Frontend: ReactJS, React Router Backend: Firebase Authentication, Firestore Database, Firebase Hosting APIs: TMDb API (for movie data) UI/UX: Toastify (for notifications), CSS (for responsive design) Deployment: Firebase Hosting for fast and reliable deployment Get Started Locally: To run the app on your local machine, follow these steps:
Clone the repository from GitHub:
git clone https://github.com/Jayybb/Netflix-clone.git Navigate to the project folder:
cd Netflix-clone Install dependencies:
npm install Start the development server:
npm run dev The app will be available at:
Local URL: http://localhost:5173/ Network: If you want to expose the app on your local network, run npm run dev -- --host and access it via your local IP. Access the Repo: You can access the full source code of the project on GitHub:
GitHub Repository: https://github.com/Jayybb/Netflix-clone.git