A full-stack (or front-end) web application that replicates the core look, feel, and some functionality of the popular streaming service, Netflix. This project serves as a showcase of modern web development skills, including React.js, API integration, and responsive design.
Check out the live version of the application here:
- Responsive UI: Optimized design that provides a seamless experience across desktop, tablet, and mobile screens.
- Authentication: Basic Sign-Up and Sign-In forms (leveraging Firebase Authentication for secure user management).
- Dynamic Data: Fetches and displays real-time movie and TV show data from The Movie Database (TMDB) API.
- Category Rows: Horizontal scrolling rows for different movie genres and categories (e.g., Trending Now, Top Rated).
- Video Playback: Functionality to fetch and display official movie trailers/teasers using an embedded player (e.g.,
react-youtube). - Large Banner: A prominent, dynamic banner section featuring a popular movie's title, synopsis, and background image.
This project is built using the following technologies:
| Category | Technology | Purpose |
|---|---|---|
| Frontend | React.js | Library for building the dynamic and component-based user interface. |
| Styling | (e.g., CSS Modules / Styled Components / Sass) | For component-based styling and adherence to the Netflix UI aesthetic. |
| API | The Movie Database (TMDB) API | Source for movie and TV show data, posters, and trailer keys. |
| Backend/Auth | Firebase | Used for user authentication, potentially hosting, and data management. |
Follow these steps to set up and run the project locally.
- Node.js (LTS version recommended)
- npm or yarn
- A TMDB API Key (Get one here)
-
Clone the repository:
git clone [https://github.com/dipti-2211/netflix-clone.git](https://github.com/dipti-2211/netflix-clone.git) cd netflix-clone -
Install project dependencies:
npm install # or yarn install
Start the development server:
npm start
# or
yarn start
The application will automatically open in your browser at http://localhost:3000.
Contributions are always welcome! If you find a bug or have a suggestion for an enhancement, please follow the standard GitHub flow:
Fork the Project.
Create your Feature Branch (git checkout -b feature/AmazingFeature).
Commit your Changes (git commit -m 'feat: Add some AmazingFeature').
Push to the Branch (git push origin feature/AmazingFeature).
Open a Pull Request.
Distributed under the MIT License. See LICENSE for more information.
GitHub - Dipti
Portfolio - Dipti's Portfolio
Linkdein - Linkdein