jason-liu22 / netflix-clone-react-typescript Goto Github PK

Netflix Clone using React, Typescript, Material UI

Home Page: https://netflix-clone-react-typescript.vercel.app

HTML 2.64% TypeScript 96.95% Dockerfile 0.41%

material-ui netflix netflix-clone netflix-clone-app-frontend netflix-clone-built-with-react-js netflix-clone-react react react-material-ui react-redux react-redux-toolkit

netflix-clone-react-typescript's Introduction

Netflix Clone

View Demo · Report Bug · Request Feature

Table of Contents

Prerequests
Which features this project deals with
Third Party libraries used except for React and RTK
Contact

Home Page

Mini Portal

Detail Modal

Grid Genre Page

Watch Page with customer contol bar

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, and copy and paste the content of .env.example. And then paste the API Key you just created.

Which features this project deal with

How to create and use Custom Hooks
How to use Context and its provider
How to use lazy and Suspense for Code-Splitting
How to use a new lazy feature of react-router to reduce bundle size.
How to use data loader of react-router, and how to use redux dispatch in the loader to fetch data before rendering component.
How to use Portal
How to use Fowarding Refs to make components reusuable
How to create and use HOC
How to customize default theme of MUI
How to use RTK
How to use RTK Query
How to customize default classname of MUI
Infinite Scrolling(using Intersection Observer API)
How to make awesome carousel using slick-carousel

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

Todo

Make the animation of video card portal more similar to Netflix.
Improve performance. I am using context and provider but all components subscribed to the context's value are re-rendered. These re-renders happen even if the part of the value is not used in render of the component. there are several ways to prevent the re-renders from these behaviours. In addition to them, there may be several performance issues.
Replace bundler(Vite) with Turbopack. Turbopack is introduced in Next.js conf recently. It's very fast but it's nor ready to use right now. it just support Next.js, and they plan to support all others as soon as possible. so if it's ready to use, replace Vite with Turbopack.
Add accessibilities for better UX.
Add Tests.

netflix-clone-react-typescript's People

Stargazers

Watchers

Forkers

bestras023 tumme blessed538 dev-mamun urvijaykumar noephilip-restum daneshnobel tramleit abhi2087 sammybammy52 te7ever zadrien truongquangkhai99 surajmicky foxsin07 mwaustephen chrisndirangu54 minhtam220 mediabuff docteur-night occulttooner kt-anas caesar269 vnetonline1 mayurnimavatg mantu120 sakshamchawla19 butterscotchstallion khalid-kifayat jaison-lee bandank mido-kun fhrrydeveloper tmelese gsbarure numberlock11 christianbarillas abhishekkumar584575 hohuyhoangg rishitz dhananjaykul happytomatoe chshahzebzafar rjthapaa nahidkishore harshubig folsed ronin-chan sarthakshah001 ittutti23 hau1006 shashankmadhav yashdkadam vishnu1100 jinnabaalu udayreddy1996 umeshgoyal sabelo-hlatshwayo tusharhere akshita1812-alt mussetcom anirudhadak2 ceyhunsenol al3xisdani3l aakashsedha ahmedsamyeg jamesmscsweacc thadeuguimaraes dotlike13 hanshat lawyky jee-tests angshumancertified tayoagboola bubezi rpachassi shakir04 trillozin ceoaitek2023 batchusivaji dmgukov cristopher-dev kiaradee theaminuldev suraj740 madhanchaithanya kishorchavan87 hanorah sutkarsh-s cristina-gabriela iuvei jaga-devops jagannathdevops tanishq-2108 kapoor-codes sachgits shrikant9907 s0x0s louiswere typedot

netflix-clone-react-typescript's Issues

Feature Request - Add React-Testing-Library

The project is very well structured and helpful to understand newer versions of libraries. To completely round this repo, can React-Testing-Library be added to cover unit testing?

hover creating portal issue

When I hover with the mouse over any of the popular movies or high rated movies, the portal does not appear when I drag the mouse to a different area before the portal is formed.

Yarn.lock missing

Yarn.lock missing in main brach ! add it there

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

error while building with docker

when i execute the docker build command i get this error :

[builder 7/7] RUN yarn build                                          63.1s
ERROR [stage-1 4/4] COPY --from=builder /app/build .                   0.0s
------
[stage-1 4/4] COPY --from=builder /app/build .:
------
Dockerfile:15
--------------------
  13 |     WORKDIR /usr/share/nginx/html
  14 |     RUN rm -rf ./*
  15 | >>> COPY --from=builder /app/build .
  16 |     ENTRYPOINT ["nginx", "-g", "daemon off;"]
--------------------
ERROR: failed to solve: failed to compute cache key: failed to calculate checksum of ref moby::pjf9876vbhdsqid8qcifj: "/app/build": not found

is this normal / how can i fix it ?

Can we please have full screen video playback and non-hereo items ?

Youtube videos deleted ?

The youtube videos accompanying the project seem to have been deleted.
Any updates on if OR when that would be resolved?