This project is a fully typed responsive clone of the popular streaming service, Netflix. Users can browse trending, popular, and upcoming movies, play movie trailers, view detailed information about each movie, see similar movies, and check if a movie is in the top 10 trending list. My Netflix clone objective is to showcase how I used the modern web development technologies.
This project is built with the following technologies:
- React.js
- Next.js (App Directory)
- Node.js
- TypeScript
- Axios
- React Query
- TMDB API
- Tailwind CSS
- Headless UI
- HeroIcons
![Screenshot 2024-05-20 at 6 20 41 PM](https://private-user-images.githubusercontent.com/77049704/332029581-534b27b7-f3f0-4650-8083-995147f8553a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMyNzM1MzksIm5iZiI6MTcyMzI3MzIzOSwicGF0aCI6Ii83NzA0OTcwNC8zMzIwMjk1ODEtNTM0YjI3YjctZjNmMC00NjUwLTgwODMtOTk1MTQ3Zjg1NTNhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODEwVDA3MDAzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNmNjliNTk1NmQzOWRjYjQxZWE4NzNkYjUyZjlmMTZmN2IyYjI4MjRiNWE3NzBjOWJhMTEwMmNkMzM2MmUzOGUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.hZYCvoZ0jToP6BtrfVbIGGc5S8r2WydpI2xTgFgtn_8)
![Screenshot 2024-05-20 at 6 17 19 PM](https://private-user-images.githubusercontent.com/77049704/332028543-387cdb94-1c4f-4d63-97fc-d3cbe8bb6197.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMyNzM1MzksIm5iZiI6MTcyMzI3MzIzOSwicGF0aCI6Ii83NzA0OTcwNC8zMzIwMjg1NDMtMzg3Y2RiOTQtMWM0Zi00ZDYzLTk3ZmMtZDNjYmU4YmI2MTk3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODEwVDA3MDAzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTFiY2U1YjAyNDhlNGNhZmFlMWY1MzM0YzAzYzJhNTRjZjUyZTY5MzE0NzIwM2RjNDE2MTU0NmExZmZjZDNlOTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.zHtTOebfE5AD3sX8N2UiJiiZq0BLtZ69O9br62ujwQI)
![Screenshot 2024-05-20 at 6 18 30 PM](https://private-user-images.githubusercontent.com/77049704/332028931-aeeedef9-85d3-4867-82a9-23257f1a9b6c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMyNzM1MzksIm5iZiI6MTcyMzI3MzIzOSwicGF0aCI6Ii83NzA0OTcwNC8zMzIwMjg5MzEtYWVlZWRlZjktODVkMy00ODY3LTgyYTktMjMyNTdmMWE5YjZjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODEwVDA3MDAzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVhNjE3NzEyOGJiYTUyZWU3MTA3NjE3NjFkNzhhMzVhZDFjNjYzOGZlZmMzNDU3Y2RjMTM1NjNhMjhhZjcwOWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ve0Y3aV_xWfG1L81ySxXDFIwmaAgOO69spPicI_wl7Q)
![Screenshot 2024-05-20 at 6 19 25 PM](https://private-user-images.githubusercontent.com/77049704/332029210-5777e693-039e-44ca-ac95-f048db3b401a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMyNzM1MzksIm5iZiI6MTcyMzI3MzIzOSwicGF0aCI6Ii83NzA0OTcwNC8zMzIwMjkyMTAtNTc3N2U2OTMtMDM5ZS00NGNhLWFjOTUtZjA0OGRiM2I0MDFhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODEwVDA3MDAzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFmMDY1NjEyNDA3MTZhNzM3YTU5MmRkMTJlMTk5MWVmY2JkY2I1OTEyMmRlMWM0ZTg5ZDVhNjNjM2RlOTE0NzgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Qxf4c1Cfnj7WzjwR49bTXyPtT63BLEIKS-A63tmr0tA)
![Screenshot 2024-05-29 at 7 58 27 PM](https://private-user-images.githubusercontent.com/77049704/334788670-1ce46710-2446-47c6-a7e5-971b9e9c4ec9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMyNzM1MzksIm5iZiI6MTcyMzI3MzIzOSwicGF0aCI6Ii83NzA0OTcwNC8zMzQ3ODg2NzAtMWNlNDY3MTAtMjQ0Ni00N2M2LWE3ZTUtOTcxYjllOWM0ZWM5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODEwVDA3MDAzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTgxOWQwZmJjNGVjMjFkY2Q2OGM5NzI0YTdjY2JjYWZjZDAyM2MzNWY5NGVkOTQ3MjhhMjEwNWIxOWM1MTIwMTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.HFaCk-Vzr7UE_SRLuyf71m_ARsAUOZpH622jRdUtCOU)
![Screenshot 2024-05-29 at 7 57 52 PM](https://private-user-images.githubusercontent.com/77049704/334788526-721313fb-bf28-4c48-95aa-cb1fe63f749c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMyNzM1MzksIm5iZiI6MTcyMzI3MzIzOSwicGF0aCI6Ii83NzA0OTcwNC8zMzQ3ODg1MjYtNzIxMzEzZmItYmYyOC00YzQ4LTk1YWEtY2IxZmU2M2Y3NDljLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODEwVDA3MDAzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTlkYWI0NTMwYWUwZjIxOTA3YzExYjdlZWUzY2M2MWRkMmUxMTlmYzY5YjllYWIxYWQwNjczMzQxYzM4NDI3ZDcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.6qFbo55AfBrSHMwJO30sDYeNn6pdDgtL60IMgNSk6KY)
To get a local copy up and running, follow these steps:
Ensure you have the following installed on your local machine:
- Node.js
- npm
-
Clone the repo
-
Install NPM packages
-
Start the development server
To use the Netflix Clone Website, simply navigate to the local host server (default is localhost:3000) in your browser after starting the development server.