Este es el proyecto individual realizado durante la etapa de Labs de Henry. Es una SPA (Single Page Application), en la que se utiliza React, Redux, Express, una base de datos con ProgreSQL y una API (rawg) para obtener la info en la web principalmente. En la app se pueden hacer consultas a la API externa y a la DB, crear videogames, filtrar por género y pertenencia, tambien se le puede aplicar un ordenamiento, tanto alfabético como por rating.
Durante el proyecto, se usaron las sigs tecnologías:
- Node v12.21.0
- Npm v7.20.3
- PSQL v13.4
- Express v4.17.1
- Sequelize v6.3.5
- Firefox 93.0
- Brave 1.30.87
Y muchas más dependencias, consultar los package.json de la ruta /api y /client.
- Clonar o forkear el repositorio
- Obtener una api-key desde rawg
Crear un archivo .env en la carpeta /api con los sigs parámetros:
DB_USER=usuariodepostgres
DB_PASSWORD=passwordDePostgres
DB_HOST=localhost
API_KEY=api-key
Reemplazar usuariodepostgres y passwordDePostgres con tus propias credenciales para conectarte a postgres, y colocar en API_KEY la api creada anteriormente.
Debe ser necesario crear la DATABASE Videogames en ProgreSQL.
Una vez realizado, ya puede realizar npm install en la carpeta API, para que se instalen todas las dependencias necesarias.
Para poner en línea el servidor, ejecutar npm start .
Para el front no se requieren de configuraciones adicionales. Ejecutar npm install en la carpeta Cliente y luego npm start para poner en línea el servidor web.
Pantalla principal de la app. Se muestran los primeros 100 resultados que devuelve la api externa, junto con los primeros 100 videogames que se encuentren en la base de datos. Incluye una navbar con una barra de búsqueda y un botón que redirige a la web de creación de un videogame. También, una barra lateral, con la posibilidad de aplicar filtros, tanto a los resultados por default, como a los resultados de la búsqueda.
Pantalla de creación de un videogame. Un formulario controlado, en donde los campos Name, Description, Genres y Platforms son requeridos, el resto de campos no son obligatorios. Luego de la creación, sale un pequeño Popup indicando el resultado de la creación.
Pantalla de detalle de un videogame. Se muestran más detalles que en la pantalla principal, como la descripción del mismo, la foto en mayor resolución, fecha de lanzamiento y otros datos.
Funcionalidad de búsqueda. Devuelve los primeros 15 resultados que contengan el nombre buscado. Los 15 resultados devueltos incluyen aquellos juegos que se encuentren en la DB, ej, si se busca la palabra "Fifa", va a buscar 15 resultados en la api, 15 resultados en la DB, y el resultado final, será la unión de esos 15 resultados ordenados alfabéticamente. Se pueden aplicar los filtros a la búsqueda. Para reiniciar, se puede utilizar el botón reset.
Funcionalidad de filtros. Se puede filtrar por Género de videogame, por pertenencia (DB o API), y aplicar un ordenamiento, sea Alfabético (A-Z o Z-A) o por Rating.
Funcionalidad de paginado. Es posible avanzar por páginas, tanto para mostrar todos los resultados, como para mostrar los filtros. La cantidad de juegos por páginas es de 15.
La web esta configurada para funcionar responsivamente.