Netflix Clone using React18, Typescript, Material UI, and TMDB API

Overview
Table of Contents
  1. Prerequests
  2. Which features this project deals with
  3. Third Party libraries used except for React and RTK
  4. Contact

Logo

Home Page

Logo

Mini Portal

Logo

Detail Modal

Logo

Grid Genre Page

Prerequests

  • Create an account if you don't have on TMDB. Because I use its free API to consume movie/tv data.
  • And then follow the documentation to create API Key
  • Finally, if you use v3 of TMDB API, create a file named .env.local, and copy and paste the content of .env.example. And then paste the API Key you just created.

Which features this project deal with

Third Party libraries used except for React and RTK

Install with Docker

docker build --build-arg TMDB_V3_API_KEY=your_api_key_here -t netflix-clone .

docker run --name netflix-clone-website --rm -d -p 80:80 netflix-clone

Contact

Note There might be several things to improve. Because this project aims to show how to use the features mentioned above. So I welcome anyone who wants to contribute.

A Similar and More Complex project

I am working on Afrikast, a more complex project now.

It has almost all the features are needed in a common video streaming website.

If anyone is interested in the project, you can log in with the following user, and explore the website. [email protected]/123456

You might also like...
A simple ReactJS movies app based on TMDb API

A simple ReactJS movies app based on TMDb API to demonstrate react-query use cases as a state management library

Netflix Clone  - This project was created to practice using the API and the Raeact technology
Netflix Clone - This project was created to practice using the API and the Raeact technology

Esse projeto foi criado para praticar uso de API e da tecnologia Raeact. Ultilizando CSS3 puro sem nenhum framwork foi possível resolver

Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.
Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

A Spotify Clone which built with ReactJS. 3rd party API integration, user authentication, spotify API, responsive design, material-ui, react context api are used to built it.

Spotify Clone with ReactJS In this Spotify Clone application you can log in to the application with your spotify account and see your own playlist. Sp

clone da netflix feito com react js e dados vindo da api do themoviedb

bem vindo :) link do projeto passo a passo para rodar no seu dispositivo baixar o node https://nodejs.org/en/ baixar o git https://git-scm.com/ clonar

Responsive React 'The Movie Database' (TMDb) App
Responsive React 'The Movie Database' (TMDb) App

TMDb Movie Search TMDb Movie Search is a responsive React app that utilises Twitter's typeahead.js and Bloodhound suggestion engine, loading data via

A Netflix Clone built using React GraphQL and DataStax, exploring Pagination and Slicing
A Netflix Clone built using React GraphQL and DataStax, exploring Pagination and Slicing

🎓 Netflix Clone using DataStax and GraphQL This project was bootstrapped with Create React App. Table of content Prerequisites Create Astra Instance

Netflix clone using React with Julia, Nathaly, Chi and Magda
Netflix clone using React with Julia, Nathaly, Chi and Magda

"MOVIE BAY" website - "NETFLIX" Clone Project This is a full-stack project based on React. Task - to create a website which would resemble "Netflix".

Full Stack Netflix App Clone using React Native and AWS Amplify
Full Stack Netflix App Clone using React Native and AWS Amplify

Netflix Clone Recreated the current Netflix Application. Best part? Added the backend functionality as well.Hoping to add more functionality in future

Comments
  • Demo offline

    Demo offline

    Hi, I really liked the preview of your project, however, the live demo is offline. Vercel is reporting a 404: NOT_FOUND.

    EDIT: You forgot to the demo link in the README.md from the one you posted in Discord

    opened by BrycensRanch 2
Releases(0.1.0)
Simple netflix clone using React and TMDB API to pull in movies/tv shows.

Netflix React Clone Simple netflix clone using React and TMDB API to pull in movies/tv shows. Uses Material UI for the frontend. Still a work in progr

Anthony Peruso 6 Dec 3, 2021
Simply Netflix clone using ReactJS. It fetches the data from TMDB API

NETFLIX CLONE This project is a simply front end clone of Netflix. It was create

null 13 Oct 24, 2022
netflix clone using react js, css, axios, themoviedb, get api, netflix-clone react simplified project, axios-react

Netflix Clone React js This project is a simplified front end clone of Netflix. It was created with React.js and CSS,It uses the famous Javascript lib

Sijeesh Miziha 10 Aug 18, 2022
Netflix-clone - Netflix UI Clone with ReactJS for study purposes

Netflix UI Clone with ReactJS for study purposes Images about project:

droyendev 5 Jun 2, 2022
My React.js implementation of Netflix. Movie data was pulled from TMDB and trailer videos from Youtube.

Roseflix: A Netflix Clone My React.js implementation of Netflix. Movie data was pulled from TMDB and trailer videos from Youtube. View Demo » Report B

Rose Bilag 84 Nov 26, 2022
Netflix UI Clone with React Native & Expo || web support => https://expo-netflix.vercel.app

Netflix: UI Clone with React Native / Expo web demo: Expo Netflix Table of Contents Install & Build Features API Components/Packages Used Linting Expo

Caleb Nance 465 Dec 5, 2022
Netflix Clone - Cloning Netflix with NextJS + Tailwindcss

Netflix Clone - Cloning Netflix with NextJS + Tailwindcss

Dian Ananda 2 Jun 22, 2022
X-Netflix is a streaming platform based on Netflix UI: built with ReactJS in frontend and nodeJS in backend.

X-Netflix X-Netflix is a streaming platform based on Netflix UI: built with ReactJS in frontend and nodeJS in backend. Built with FrontEnd: React.JS,

Mehdi BHA 52 Aug 19, 2022
A Netflix clone created using React. It is built using modern react tools/best practices, such as hooks, context API, and redux toolkit.

Netflix-Clone A Netflix clone I created for the sake of practicing React and Redux. It features design patterns recommended by the documentation. Some

Subhanga Upadhyay 99 Nov 18, 2022
a React front-end implementation from the TMDB API.

Films-Challenge Este projeto foi desenvolvido como desafio para uma vaga de emprego, em uma agência de publicidade, foi solicitado que eu fizesse uma

Teilor Souza Barcelos 1 Dec 24, 2021