DEV Community

Cover image for I've built a Netflix clone using React and TMDB API
Diogo Goncalves
Diogo Goncalves

Posted on

I've built a Netflix clone using React and TMDB 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.

Alt Text



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.

Alt Text

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 πŸ˜ƒ

Discussion (8)

Collapse
kylesureline profile image
Kyle Scheuerlein

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?

Collapse
diogo405 profile image
Diogo Goncalves Author

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.

Collapse
kylesureline profile image
Kyle Scheuerlein

Cool. I appreciate your opinion.

Collapse
200_developer profile image
Abodunrin AbdulSalam

Really amazing... Im pumped to try this out too.

Collapse
diogo405 profile image
Diogo Goncalves Author

Cool! Enjoy your code journey ✌️

Collapse
abhay5855 profile image
Abhay Patil

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

Collapse
abhay5855 profile image
Abhay Patil

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

Collapse
diogo405 profile image
Diogo Goncalves Author

This url might help you, it's the API method to get the Top Rated Movies: developers.themoviedb.org/3/movies...