Forem: Diogo Goncalves

I've made a Spotify clone with React, Redux, and Typescript

Diogo Goncalves — Sat, 08 May 2021 03:29:51 +0000

Hello everyone, I'm sharing this Spotify Clone that I made with React, Redux, and Typescript. If you wanna head straight to the live version you can click on this link: http://spotifyclooone.netlify.app/.

If you wanna check the source code head to my Github by clicking here https://github.com/diogo405/spotify-clone.

About the project

The project is actually very simple, it's just two pages: Home and Album that pull data from a fake API.

Redux & Typescript

I'm not gonna lie if you are new to Typescript your chances to hate it gonna be 100%. Typing almost everything can be very painful for the first time. After a few components, you get used to it and sometimes it saves your ass. My advice is if you wanna taste Typescript start with a Javascript project, not React.

Redux is another thing that's not very pleasant (I've always been a fan of Recoil - simple and easy). They are trying to reduce the boilerplate with the toolkit - and it's better now - but still, there's a lot to be coded to get/set your state (especially with Typescript).

Fake API

The fake API is a set of async functions that return JSON files in a random interval of 0 to 3 secs. While the data is not ready, I'm using some skeletons as placeholders so the layout doesn't jump too much.

Conclusion

Experimenting with React and Typescript is very interesting as you learn a new way to develop with Javascript and familiarise yourself with a technology that I believe is gonna stay.

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

Diogo Goncalves — Fri, 02 Oct 2020 06:17:27 +0000

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 😃

I've made an Instagram clone with React

Diogo Goncalves — Fri, 25 Sep 2020 01:07:45 +0000

Hey, I hope you are having a great coding weekend 😃

Recently I've been studying React (I'm a Vue guy) and to sharpen my skills I decided to build an Instagram clone. You can check it live here, it's on Netlify and if you wanna dig the code or contribute it's on my Github.

How it Works

The app has three pages: Feed, Comments and Stories. All the data is loaded from json files and drilled down from the page to the components.

Responsiveness

I made it max-width 414px so if you can check it on desktop and even older phones.

What's Next

I think it'd really cool to have a dark mode. Maybe when you click on the config icon it shows some options and a switch to darkmode it.

That's all, any feedback is appreciated.
See ya ✌️