/PI-POKEMON-API

Primary LanguageJavaScript

Individual Project - Henry Pokemon

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.

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

  • Buscar pokemones
  • Filtrarlos / Ordenarlos
  • Agregar nuevos pokemones

Tecnologías utilizadas:

  • React
  • Redux
  • Express
  • Sequelize - Postgres

Frontend

La app cuenta con:

Pagina inicial: Landing Page

  • Imagen representativa del proyecto
  • Botón para ingresar al home (Ruta principal)

Ruta principal: Contiene:

  • Input de búsqueda para encontrar pokemones por nombre
  • Área donde se verá el listado de pokemones.
  • Botones/Opciones para filtrar por género y por pokemon existente o agregado por nosotros
  • Botones/Opciones para ordenar tanto ascendentemente como descendentemente los pokemones por orden alfabético y por rating
  • Paginado para ir buscando y mostrando los siguientes pokemones, 9 juegos por pagina, mostrando los primeros 12 en la primer pagina.

Ruta de detalle de pokemon: Contiene:

  • Informacion adicional sobre cada pokemon en particular

Ruta de creación de pokemones: Contiene:

  • Un formulario controlado con JavaScript con los siguientes campos:
    • Nombre
    • Descripción
    • Stats
  • Posibilidad de seleccionar/agregar varios tipos
  • Botón/Opción para crear un nuevo videojuego

Backend

El backend fue desarrollado en node/express y consta de las siguientes rutas:

  • GET /pokemons:

    • Obtener un listado de los pokemones

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

    • Obtener un listado de los pokemones que coincidan la palabra ingresada como query parameter

  • GET /pokemons/{idPokemon}:

    • Obtener el detalle de un pokemon en particular

  • GET /types:

    • Obtener todos los tipos pokemons posibles

  • POST /pokemon:

    • Recibe los datos recolectados desde el formulario controlado de la ruta de creación de pokemon por body
    • Crea un pokemon en la base de datos

Iniciar proyecto

  • Posicionarse en la carpeta Api, ejecutar el comando npm i y luego npm start
  • Posicionarse en la carpeta Client, ejecutar el comando npm i y luego npm start