I've built a Netflix clone using React and TMDB API

#react #netflix #api

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 😃

Latest comments (8)

Kyle Scheuerlein • Jun 24 '21

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?

Diogo Goncalves • Jun 25 '21

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.

Kyle Scheuerlein • Jun 25 '21

Cool. I appreciate your opinion.

Abhay Patil • Jun 9 '21

Have you implemented search functionality , can't see that working

Abhay Patil • May 11 '21

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