Making small projects to practice coding is a great way to learn. In fact, it doesn’t even feel like work when I’m utilizing the wonderful RAWG Video Games API to make something that interests me while also sharpening my skills and learning new things. My goal in making this app was to practice with React Router and hooks. I was also able to practice passing props via Links which was something I hadn’t planned on learning.

Before I go any further, here’s the link to the repo on my GitHub. Now let’s get started!

Getting Started

I‘m going to assume that you have some knowledge of using React, therefore I will not be examining every bit of code in the project. Instead, I’ll go over how the app works first.

There are two links in the navbar; one that lets you search for games and one that lets you view top-rated games. When you click on the search link, a text input renders and you can submit a game title. When that happens, a fetch request with the search term is sent to the API server and a list of twenty search results is returned.

When you click on one of the game titles or images, you are taken to a “show” page for that game (where more information and pictures are available). The “Top Games” link fetches a list generated by the API whenever the link is clicked and returns the top user rated video games. Pretty simple app! Let’s take a look under the hood.

#react #videogames #react-router