Individual Project - Henry Videogames

Objetivos del Proyecto

• Construir una App utlizando React, Redux, Node y Sequelize.
• Afirmar y conectar los conceptos aprendidos en la carrera.
• Aprender mejores prácticas.
• Aprender y practicar el workflow de GIT.
• Usar y practicar testing.

Enunciado

La idea general es crear una aplicación en la cual se puedan ver los distintos videojuegos disponibles junto con información relevante de los mismos utilizando la api externa rawg y a partir de ella poder, entre otras cosas:

• Buscar videjuegos
• Filtrarlos / Ordenarlos
• Agregar nuevos videojuegos

IMPORTANTE: Las funcionalidades de filtrado y ordenamiento se realizaron desde el Front. No desde el ENDPOINT.

Tecnologías Utilizadas

• React
• Redux
• Express
• Sequelize - Postgres

Frontend

Sedesarrollo una aplicación de React/Redux que contiene las siguientes rutas.

Pagina inicial: Landing page que contiene

• imagen de fondo representativa al proyecto
• Botón para ingresar al home (Ruta principal)

Ruta principal: contiene

• Input de búsqueda para encontrar videojuegos por nombre
• Área donde se verá el listado de videojuegos. el cual muestra:
  • Imagen
  • Nombre
  • Géneros
• Botones/Opciones para filtrar por género y por videojuego existente o agregado por nosotros
• Botones/Opciones para ordenar tanto ascendentemente como descendentemente los videojuegos por orden alfabético y por rating
• Paginado para ir buscando y mostrando los siguientes videojuegos, 15 juegos por pagina, mostrando los primeros 15 en la primer pagina.

Ruta de detalle de videojuego: contiene

• Los campos mostrados en la ruta principal para cada videojuegos (imagen, nombre, y géneros)
• Descripción
• Fecha de lanzamiento
• Rating
• Plataformas

Ruta de creación de videojuegos: contiene

• Un formulario controlado con JavaScript con los siguientes campos:
  • Nombre
  • Descripción
  • Fecha de lanzamiento
  • Rating
• Posibilidad de seleccionar/agregar varios géneros
• Posibilidad de seleccionar/agregar varias plataformas
• Botón/Opción para crear un nuevo videojuego

Fue requisito que el formulario de creación esté validado con JavaScript y no sólo con validaciones HTML.

Base de datos

El modelo de la base de datos contiene las siguientes entidades (Aquellas propiedades marcadas con asterísco son obligatorias):

• Videojuego con las siguientes propiedades:
  • ID: * No puede ser un ID de un videojuego ya existente en la API rawg
  • Nombre *
  • Descripción *
  • Fecha de lanzamiento
  • Rating
  • Plataformas *
• Genero con las siguientes propiedades:
  • ID
  • Nombre

Backend

Se desarrollo un servidor en Node/Express con las siguientes rutas:

• GET /videogames:
  • Obtener un listado de los videojuegos
  • Debe devolver solo los datos necesarios para la ruta principal
• GET /videogames?name="...":
  • Obtener un listado de las primeros 15 videojuegos que contengan la palabra ingresada como query parameter
  • Si no existe ningún videojuego se muestra un mensaje adecuado
• GET /videogame/{idVideogame}:
  • Obtener el detalle de un videojuego en particular
  • Debe traer solo los datos pedidos en la ruta de detalle de videojuego
  • Incluir los géneros asociados
• POST /videogames:
  • Recibe los datos recolectados desde el formulario controlado de la ruta de creación de videojuego por body
  • Crea un videojuego en la base de datos, relacionado a sus géneros.
• GET /genres:
  • Obtener todos los tipos de géneros de videojuegos posibles
  • En una primera instancia deberán traerlos desde rawg y guardarlos en su propia base de datos y luego ya utilizarlos desde allí

Testing

• Contiene test en un componente del Backend
• Contiene test en un modelo de la base de datos