Hey! I finally finished this Netflix clone (took me more time than I expected 😅) and uploaded to Netlify. You can check this out here.
My idea was to make everything static (movies, series, tv shows, ...) but then I found this really cool TMDB API which you can pull most popular movies, top rated shows, what's trending, collections, lists and muuuch more. Really worth checking 👀
After that, I wanted to use something to separate the UI state from the API data. I ended up using React-Query to fetch the Movie API which I found really nice. You need to pass a key and a function to grab the data you want. It returns the API response, a flag indicating if it's loading and another one if there was an error or not.
const {data: heroData, isLoading: heroIsLoading, error: heroError} = useQuery('hero', async () => {
const res = await fetch(`${process.env.REACT_APP_TMDB_BASE_URL}/movie/558?api_key=${process.env.REACT_APP_TMDB_KEY}`)
const data = await res.json()
return data
})
Components
The hardest part was to build the home page. I had a look at Netflix website and thought what parts would be my React components.
Once the home page was built, I kind of developed the TV Shows and Movies page re-using what I had done before. The layout of each page is different but they still use the same components.
State Management
At the beginning I thought I would use Context API but it needs to pass from parent to siblings (could've put as the root element but...). I tried to understand Redux and found a bit overwhelming 😬 My choice was Recoil, I'm using its basic hooks (useRecoilState, useSetRecoilState) and atoms. Didn't dive into selectors and others features.
Other Stuff
Lastly, for routing I'm using React Router and Code-Splitting the page components in App.js.
const HomePage = React.lazy(() => import('./pages/HomePage.js'));
const VideoPage = React.lazy(() => import('./pages/VideoPage.js'));
const ShowsPage = React.lazy(() => import('./pages/ShowsPage.js'));
const MoviesPage = React.lazy(() => import('./pages/MoviesPage.js'));
...
<RecoilRoot>
<Router>
<FeedbackPopup/>
<Suspense fallback={<div></div>}>
<Switch>
<Route exact path="/">
<Topbar/>
<HomePage/>
</Route>
<Route path="/playing/:type/:id">
<VideoPage/>
</Route>
<Route path="/tv-shows">
<Topbar/>
<ShowsPage/>
</Route>
<Route path="/movies">
<Topbar/>
<MoviesPage/>
</Route>
</Switch>
</Suspense>
</Router>
</RecoilRoot>
You can found the code at my Github. Any feedback is very welcome 👍🏽
Happy coding 😃
Top comments (8)
There’s a lot of discussion these days about people loving their hammer (ie. React) so much that they treat every problem (ie. Netflix) as a nail. Now, I haven’t built a Netflix clone, but I am curious about your opinion since you have.
Do you think React was the right tool for the job? Why or why not?
Hmm couldve done with Vue as well. What I love about React is the Phisolophy of reusable components. So, I think for a SPA it's the right tool. The problem of no framework, in my opinion is that HTML doesn't have a way to reuse code (or doest it?). Also, the two way binding, router, testing tools of the create-react-app save a lot of time. Id use a vanilla solution for a extremely simple page.
Cool. I appreciate your opinion.
Really amazing... Im pumped to try this out too.
Cool! Enjoy your code journey ✌️
Have you implemented search functionality , can't see that working
I am trying to do the same I generated API key but how to fetch the trending , Documentaries, Top Rated , Horror movies In tbdb document ..Like I can't find them anywhere
This url might help you, it's the API method to get the Top Rated Movies: developers.themoviedb.org/3/movies...