jotacer / pi-videogames-ft13

SPA proyect on #React #Redux #NodeJS #Express for #Henry bootcamp of fullstack development.

Individual Project - Game Core

Proyect Objectives

• Build an App using: React, Redux, Node & Sequelize.
• Solidify & connect all the concepts learned on the bootcamp.
• Absorb good practices for working.
• Learn and practica GIT workflow.
• Develop and utilize testing.

BoilerPlate

The boilerplate counted with two folders: 'api' & 'client' to host the backend and frontend respectively.

The 'client' folder content was created by using 'Create React App'.

Premise

The general idea was to build an app which allows an user to see the many videogames available with relevant information using an external API ([rawg] : https://rawg.io/apidocs) and from there been able to do many different things such as:

• Search videogames
• Filter/Order them.
• Add new videogames

The only API's endpoints 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}

Technologies:

• React
• Redux
• Express
• Sequelize - Postgres

Frontend

It is an React/Redux web app with the following functionality:

Landing page:

• A representative main wallpaper.
• Enter button to the main route.

Main route:

• Search input for searching videogames by name.
• Videogames listing area. With the following information:
  • Image
  • Name
  • Genres
• Buttons/Options for filtering videogames by genres or game source api/original.
• Buttons/Options for filtering videogames by name or rating, ascendant or descendant.
• Pagination for displaying the videogames.

IMPORTANT: The API is so big that on the first load it only brings the first 100 videogames and all the DB's original games.

Detailed videogame route:

• The fields and information showed on the main route
• Description
• Release Date
• Rating
• Plataforms

Creation videogames route:

• A controlled form with
  • Name
  • Description
  • Release date
  • Rating
• Posibility for adding multiple genres
• Posibility for adding multiple platforms
• Submit button for creating the new videogame

Database

The database models have the following properties (those with an asterisk are unique):

• Videogame with the following properties:
  • ID: *
  • Name *
  • Description *
  • Release date
  • Rating
  • Platforms *
• Genres with the following properties:
  • ID
  • Name

The relation among both entities it's from "many to many".

IMPORTANT: The ID's are generated by UUIDV4 to make sure they don't mix with rawg.api games ID's.

Backend

It's a server developed with Node/Express with the following routes:

IMPORTANT: The API has it's own consulting routes with filtering, pagination, etc, but they are not implemented so they are built from scratch in the app code.

• GET /videogames:
  • Obtains a list of the first 15 videogames.
  • Returns only the required data for the main route in the front-end.
• GET /videogames?name="...":
  • Obtains the first 15 videogames associated with the query parameter word as a search.
  • Returns an appropiate message if no game it's found.
• GET /videogame/{idVideogame}:
  • Obtaines a videogame's particular detail.
  • It brings only the data required on detailed videogames route.
  • Includes associated genres.
• GET /genres:
  • Obtains all the existing genres.
  • They are bring from the API but stored into the DB and then managed from there.
• POST /videogame:
  • Receives all the data from the front-end form by body.
  • Creates a videogame into the DB by posting the data retrieved.