{"id":23624606,"url":"https://github.com/shabeeltt/netflix-clone-react","last_synced_at":"2025-07-08T21:33:42.161Z","repository":{"id":268745067,"uuid":"905329569","full_name":"shabeeltt/netflix-clone-react","owner":"shabeeltt","description":"Netflix Clone: A personal project built with React to showcase my skills in front-end development. Features include a responsive UI, dynamic content loading, and integration with APIs for a seamless user experience.","archived":false,"fork":false,"pushed_at":"2024-12-26T09:52:54.000Z","size":795,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-18T13:50:08.547Z","etag":null,"topics":["axios-react","beginner-project","firebase","firebase-auth","firestore-database","first-react-project","netflix","netflix-clone","react","reactjs","scss","tmdb-api","website"],"latest_commit_sha":null,"homepage":"https://netflix-clone-db-86982.firebaseapp.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shabeeltt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-18T15:54:16.000Z","updated_at":"2025-01-01T16:40:36.000Z","dependencies_parsed_at":"2025-02-18T18:33:56.750Z","dependency_job_id":"6e4d5e61-ae63-411a-aa07-b6f1379ae7eb","html_url":"https://github.com/shabeeltt/netflix-clone-react","commit_stats":null,"previous_names":["shabeeltt/netflix-clone-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shabeeltt/netflix-clone-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shabeeltt%2Fnetflix-clone-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shabeeltt%2Fnetflix-clone-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shabeeltt%2Fnetflix-clone-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shabeeltt%2Fnetflix-clone-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shabeeltt","download_url":"https://codeload.github.com/shabeeltt/netflix-clone-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shabeeltt%2Fnetflix-clone-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264353084,"owners_count":23595031,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios-react","beginner-project","firebase","firebase-auth","firestore-database","first-react-project","netflix","netflix-clone","react","reactjs","scss","tmdb-api","website"],"created_at":"2024-12-27T21:15:09.742Z","updated_at":"2025-07-08T21:33:42.142Z","avatar_url":"https://github.com/shabeeltt.png","language":"JavaScript","readme":"# Netflix Clone Application  \n\n## Overview  \nA responsive web application built with React, designed to replicate key features of Netflix. This project demonstrates my proficiency in front-end development, including user authentication, dynamic content loading, and API integration. The application allows users to explore trailers, view detailed movie information, and manage personalized watchlists.\n\nWhile it does not support full movie streaming, it provides a seamless and engaging user experience, simulating the core functionality of Netflix.\n\n---\n\n## Features  \n- User Authentication:  \n  - Sign up and log in using Firebase authentication.  \n  - User-specific data storage for personalized experience.  \n- Movie Listing:  \n  - Display a curated list of movies fetched from the TMDB API.  \n- Interactive Pop-Up:  \n  - View movie details and add movies to a personalized watchlist.  \n- Watchlist Management:  \n  - View and manage a custom watchlist with options to add or delete movies.  \n- Movie Details:  \n  - Watch trailers and view additional information about movies.  \n\n---\n\n## Technologies Used\n- Frontend: React, SCSS\n- API Integration: [TMDB API](https://developer.themoviedb.org), [Axios](https://axios-http.com)\n- Video Playback: [React YouTube](https://www.npmjs.com/package/react-youtube)\n- Backend: [Firebase](https://firebase.google.com) (Authentication and Firestore)\n- Environment Configuration: .env file for sensitive data\n\n---\n\n## Screenshots  \n_Desktop View_\n\n\n- Sign-Up Page\n  \n![signUp](https://github.com/user-attachments/assets/9434cb62-f8e8-4e7a-b13a-e4130c1ee3f0)\n\n- Sign-In Page\n  \n![login](https://github.com/user-attachments/assets/c155f2c5-c0b7-4999-8ca4-dffe0719f11b)\n\n- Home Page\n  \n![HomePage](https://github.com/user-attachments/assets/df2cd85c-6b07-40ab-a199-a58657f5f8d4)\n\n- Popup Page\n  \n![popup](https://github.com/user-attachments/assets/477bb387-926f-410d-b2c7-200191cb890d)\n\n- Watchlist Page\n  \n![watchList](https://github.com/user-attachments/assets/e8315522-79a7-489d-af7a-0b15412cbc98)\n\n\n\n_Mobile View_ \n\n- Sign-Up Page\n\n![mobilesignup](https://github.com/user-attachments/assets/14148bb6-3886-4a53-971f-40ee4b66a277)\n\n- Sign-In Page\n\n![mobilesignin](https://github.com/user-attachments/assets/2a941ebd-8c18-43ab-be93-cac358c50f33)\n\n- Home Page\n\n![mobileHomepage](https://github.com/user-attachments/assets/b8bbe3ca-96e3-4c80-a214-f9e3236c361d)\n\n- Popup Page\n\n![mobilepopup](https://github.com/user-attachments/assets/6f9fcca5-195d-4cc7-ae76-8491cc729b35)\n\n- Watchlist Page\n\n![mobilewatchlist](https://github.com/user-attachments/assets/43dfcc0f-507a-4fa1-b9e4-276e2d342243)\n\n---\n\n## Installation and Usage  \n\nFollow these steps to set up and run the project locally:  \n\n### Prerequisites  \n- Ensure you have Node.js installed on your system.  \n  - [Download Node.js](https://nodejs.org/)  \n\n### Steps  \n1. Clone the Repository or Download the ZIP File  \n   - Clone the repository:  \n    ```bash\n     git clone https://github.com/shabeeltt/netflix-clone-react.git\n     cd netflix-clone-react\n    ``` \n     \n \n   - Or download the ZIP file and extract it.  \n\n2. Install Dependencies  \n   ```bash  \n   npm install\n   ```\n\n\n3. Set Up Environment Variables\n\n   - Create a .env file in the project root directory.\n\n     - Add your TMDB API key:\n     ```bash\n     REACT_APP_TMDB_API_KEY=your_tmdb_api_key\n     ```\n\n     - Add your Firebase configuration:\n     ```bash\n     REACT_APP_FIREBASE_API_KEY=your_firebase_api_key  \n     REACT_APP_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain  \n     REACT_APP_FIREBASE_PROJECT_ID=your_firebase_project_id  \n     REACT_APP_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket  \n     REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id  \n     REACT_APP_FIREBASE_APP_ID=your_firebase_app_id\n     ```\n\n4. Run the Project\n   ```bash\n   npm start\n   ```\n   - Open http://localhost:3000 in your browser to view the app.\n\n___\n### Contributions\n___\nContributions are welcome! If you'd like to improve this project, please:\n\n- Fork the repository and make your changes.\n\n- Submit a pull request with a detailed description of your changes.\n___\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](./LICENSE) file for details.\n\n\n- Report issues or suggest features by creating a new issue.\n\n\nFeel free to reach out if you have any questions or need support!\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshabeeltt%2Fnetflix-clone-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshabeeltt%2Fnetflix-clone-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshabeeltt%2Fnetflix-clone-react/lists"}