Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/parsia-rezaei/netflix-clone-app
https://github.com/parsia-rezaei/netflix-clone-app
Last synced: 19 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/parsia-rezaei/netflix-clone-app
- Owner: Parsia-Rezaei
- Created: 2024-11-07T20:19:02.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-07T22:31:31.000Z (2 months ago)
- Last Synced: 2024-11-07T23:26:25.334Z (2 months ago)
- Language: JavaScript
- Size: 2.12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Netflix Clone
Welcome to my **Netflix Clone**! This is a React-based web application that mimics the popular streaming serviceβs interface, allowing you to browse movie and TV show titles, view detailed information about each, and more.
![Netflix Clone](https://img.shields.io/badge/Netflix-Clone-red?style=for-the-badge&logo=netflix)
![React](https://img.shields.io/badge/React-18.0-blue?style=for-the-badge&logo=react)
![Firebase](https://img.shields.io/badge/Backend-Firebase-orange?style=for-the-badge&logo=firebase)
![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)
![Vite](https://img.shields.io/badge/Frontend-Vite-yellow?style=for-the-badge&logo=vite)## π₯ Demo
Unfortunately because of some chrome's privacy about clone websites (such as spotify , netflix , etc...) we are not allowed to show the live demo## π Features
- **Responsive Design**: Works seamlessly on desktop and mobile devices.
- **User Authentication**: Secure login and registration using Firebase.
- **Movie Browsing**: Browse a variety of movies and shows, categorized by genre.
- **Search**: Quickly find movies or shows by title.
- **Hover Effects**: View additional details on hover for a smooth browsing experience.
- **Trailer Previews**: Watch trailers directly within the app.
## π οΈ Technologies Used
- **React**: For building the user interface
- **React Router**: For navigation
- **Firebase**: For authentication and real-time data
- **TMDb API**: For fetching movie and show data
- **CSS & Styled-Components**: For styling## βοΈ Getting Started
Follow these steps to run the project locally.
### Prerequisites
- [Node.js](https://nodejs.org/) and npm installed
- An API key from [The Movie Database (TMDb)](https://www.themoviedb.org/)
- You need to sign in on TMDB then take your api key and auth
### Installation
1. **Clone the repository**
```bash
git clone https://github.com/parsia-rezaei/netflix-clone-app.git
cd netflix-clone## π How It Works
This clone uses the TMDb API to pull in movie and TV show data dynamically. Firebase handles user authentication for login and registration. With React Router, users can navigate seamlessly across pages.## π§ Upcoming Features
User Profiles: Create multiple profiles within one account.
Recommendations: Custom movie suggestions based on viewing history.
My List: Users can save movies or shows to a personal watchlist.## π€ Contributing
Feel free to open issues or make pull requests if youβd like to improve the project!- Fork this repository.
- Create a new branch.
- Commit your changes.
- Push to the branch.
- Open a pull request.## β‘ run the project with
add this text : if you want to run this project with vite you need to first install or update the depedencies then run the command npm run dev after you didnt face any issues while installing project
```
npm i (if needed)
cd vite-project (project name)
npm run dev
```
## π¨ If you face any issues
if you try to run the app with but always face the running error this could be your node moudles or your react scripts, first run command ``` npm i ``` then run the proejct using vite ``` npm run dev ``` if you still face the same problem the best way to fix the issue is to re-install or update your react-scripts and that will solve your problem most of the time π## π License
This project is licensed under the MIT License.## β Acknowledgements
Special thanks to TMDb for providing the API.
Inspired by the original Netflix UI design.
Feel free to reach out if you have any questions or want to discuss improvements!
I would really appreciate it that you write me your feedback about this project in order to improve it.