La idea general es crear una aplicación en la cual se puedan ver los distintos Pokemon utilizando la api externa pokeapi y a partir de ella poder, entre otras cosas:
- Buscar pokemons
- Filtrarlos / Ordenarlos
- Crear nuevos pokemons
- React
- Redux
- Express
- Sequelize - Postgres
Se debe desarrollar una aplicación de React/Redux que contenga las siguientes pantallas/rutas.
Pagina inicial: deben armar una landing page con
- Alguna imagen de fondo representativa al proyecto
- Botón para ingresar al home (
Ruta principal
)
Ruta principal: debe contener
- Input de búsqueda para encontrar pokemons por nombre (La búsqueda será exacta, es decir solo encontrará al pokemon si se coloca el nombre completo)
- Área donde se verá el listado de pokemons. Al iniciar deberá cargar los primeros resultados obtenidos desde la ruta
GET /pokemons
y deberá mostrar su:- Imagen
- Nombre
- Tipos (Electrico, Fuego, Agua, etc)
- Botones/Opciones para filtrar por tipo de pokemon y por pokemon existente o creado por nosotros
- Botones/Opciones para ordenar tanto ascendentemente como descendentemente los pokemons por orden alfabético y por fuerza
- Paginado para ir buscando y mostrando los siguientes pokemons
IMPORTANTE: Dentro de la Ruta Principal se deben mostrar tanto los pokemons traidos desde la API como así también las de la base de datos.
Ruta de detalle de Pokemon: debe contener
- Los campos mostrados en la ruta principal para cada pokemon (imagen, nombre y tipos)
- Número de Pokemon (id)
- Estadísticas (vida, fuerza, defensa, velocidad)
- Altura y peso
Ruta de creación: debe contener
- Un formulario controlado con los campos mencionados en el detalle del pokemon
- Posibilidad de seleccionar/agregar más de un tipo de pokemon
- Botón/Opción para crear un nuevo pokemon
Se debe desarrollar un servidor en Node/Express con las siguientes rutas:
IMPORTANTE: No está permitido utilizar los filtrados, ordenamientos y paginados brindados por la API externa, todas estas funcionalidades tienen que implementarlas ustedes.
- GET /pokemons:
- Obtener un listado de los primeros 12 pokemons desde pokeapi
- Debe devolver solo los datos necesarios para la ruta principal
- GET /pokemons/{idPokemon}:
- Obtener el detalle de un pokemon en particular
- Debe traer solo los datos pedidos en la ruta de detalle de pokemon
- Tener en cuenta que tiene que funcionar tanto para un id de un pokemon existente en pokeapi o uno creado por ustedes
- GET /pokemons?name="...":
- Obtener el pokemon que coincida exactamente con el nombre pasado como query parameter (Puede ser de pokeapi o creado por nosotros)
- Si no existe ningún pokemon mostrar un mensaje adecuado
- POST /pokemons:
- Recibe los datos recolectados desde el formulario controlado de la ruta de creación de pokemons por body
- Crea un pokemon en la base de datos
- GET /types:
- Obtener todos los tipos de pokemons posibles
- En una primera instancia deberán traerlos desde pokeapi y guardarlos en su propia base de datos y luego ya utilizarlos desde allí
- Al menos tener un componente del frontend con sus tests respectivos
- Al menos tener una ruta del backend con sus tests respectivos
- Al menos tener un modelo de la base de datos con sus tests respectivos