Videogames SPA

Spanish version

App created using React, Redux, Node.js, PostgreSQL and Sequelize.

3-week individual project.

About the Videogames SPA

Inside the app you can see 100 available videogames with relevant information about them such as name, rating and genres, and also you have the opportunity to search for one in particular or just filter and order them. There's a button that allows you to create a brand new videogame in the platform.

I used the external API rawg in this project.

Front-End

It was developed using React and Redux. It has the following pages:

• Landing page.

• Home page with:

• A NavBar with a searchbar to search videogames by name, and a button to go to the videogame's creation form.

• A Panel for filter by genre and original or created videogames, and order them ascending or descending by rating or alphabetical order.

• A Grid with all 100 videogames, both original and created by the user. Each card shows the main info of the videogame: image, name, genres and rating.

• A pagination configured to show 15 videogames per page.

• Videogame detail page, where you can find additional information like a description, date of release and platforms where you can play it.

• Creation form with the following fields:

  • Name
  • Description
  • Date of release
  • Rating
  • Genres
  • Platforms

Back-End

Developed with Node.js and Express. It has the following routing:

• GET /videogames:

  • Gives you a list of videogames with the main information to show in the cards in the Home page.

• GET /videogames?name="...":

  • Gives you a list of the first 15 videogames that match with the word you wrote in the searchbar. If there are no results, you'll receive an information message.

• GET /videogame/{idVideogame}:

  • Gives you the detail of a singular videogame, including its genres.

• GET /genres:

  • Gives you all the possible genres and then saves them in the database.

• POST /videogame:

  • Gives you all the collected data in the creation form and create a new videogame in the database.

Endpoints that I used:

• GET https://api.rawg.io/api/games
• GET https://api.rawg.io/api/games?search={game}
• GET https://api.rawg.io/api/genres
• GET https://api.rawg.io/api/games/{id}

Database

Created in PostgreSQL and Sequelize. Includes the following entities:

• Videogame with the next properties:

  • ID
  • Name
  • Description
  • Date of release
  • Rating
  • Platforms

• Genres with the next properties:

  • ID
  • Name

The relationships between entities were both belongsToMany because a videogame can have many genres simultaneously, and so the genres can contain multiple videogames.