I've built a Netflix clone using React and TMDB API
Tags: react, netflix, api
Published: 2020-10-02 06:17:27

Hey! I finally finished this Netflix clone (took me more time than I expected 😅) and uploaded to Netlify. You can check this out [here](https://joeflix.netlify.app/).
<br>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k9br8n1igxsobh2b9cr6.png)

<br>
My idea was to make everything static (movies, series, tv shows, ...) but then I found this really cool [TMDB API](https://developers.themoviedb.org/4/getting-started/authorization) 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](https://react-query.tanstack.com/) 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](https://dev-to-uploads.s3.amazonaws.com/i/rhysrsu4c8qrqezlvfri.jpg)

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](https://recoiljs.org/), 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](https://reactrouter.com/web/guides/quick-start) 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](https://github.com/diogo405/joeflix). Any feedback is very welcome 👍🏽


Happy coding 😃