POKEMON | Proyecto Individual

📌 OBJETIVOS

• Construir una Single Page Application utlizando las tecnologías: React, Redux, Node, Express y Sequelize.
• Poner en práctica recursos básicos de estilos y diseño (UX : UI).
• Afirmar y conectar los conceptos aprendidos en la carrera.
• Aprender mejores prácticas.
• Aprender y practicar el workflow de GIT.
• Utilizar y practicar testing.

---

ACLARACIÓN: las dependencias actuales se encuentran en las versiones que venimos trabajando durante el bootcamp.

• react: 17.0.1
• react-dom: 17.0.1
• react-router-dom: 5.2.0
• redux: 4.0.5
• react-redux: 7.2.3

Está permitido, bajo tu responsabilidad, actualizar las dependencias a versiones más actuales si lo deseas. Versiones mas actuales podrían presentar configuraciones diferentes respecto a las versiones en las que venimos trabajando durante el bootcamp.

⛔️ Está rotundamente prohibido utilizar librerías externas para aplicar estilos a la SPA. Tendrás que utilizar CSS mediante algunas de las opciones vistas en el bootcamp (CSS, Legacy, Inline Styling, CSS Modules o Styled Components).

---

📖 ENUNCIADO GENERAL

La idea de este proyecto es construir una aplicación web a partir de la API pokeapi en la que se pueda:

• Buscar pokemones.
• Visualizar la información de los pokemones.
• Filtrarlos.
• Ordenarlos.
• Crear nuevos pokemones.

⚠️ Para las funcionalidades de filtrado y ordenamiento NO se puede utilizar los endpoints de la API externa que ya devuelven los resultados filtrados u ordenados.

Únicos end-points que se pueden utilizar

• PokeApi
• Por id: "https://pokeapi.co/api/v2/pokemon/{id}"
• Por nombre: "https://pokeapi.co/api/v2/pokemon/{name}"
• Por tipo: "https://pokeapi.co/api/v2/type"

---

📁 INSTRUCCIONES

🖱 BASE DE DATOS

Deberás crear dos modelos para tu base de datos. Una será para los pokemones y la otra será para los tipos de pokemones (pueden llevar el nombre que tu quieras). La relación entre ambos modelos debe ser de muchos a muchos. A continuación te dejamos las propiedades que debe tener cada modelo. Aquellas marcadas con un asterísco son obligatorias.

📍 MODELO 1 | Pokemons

• ID. *
• Nombre. *
• Imagen. *
• Vida. *
• Ataque. *
• Defensa. *
• Velocidad.
• Altura.
• Peso.

📍 MODELO 2 | Type

• ID. *
• Nombre. *

---

🖱 BACK-END

Para esta parte deberás construir un servidor utilizando NodeJS y Express. Tendrás que conectarlo con tu base de datos mediante Sequelize.

Tu servidor deberá contar con las siguientes rutas:

📍 GET | /pokemons

• Obtiene un arreglo de objetos, donde cada objeto es un pokemon con su información.

📍 GET | /pokemons/:idPokemon

• Esta ruta obtiene el detalle de un pokemon específico. Es decir que devuelve un objeto con la información pedida en el detalle de un pokemon.
• El pokemon es recibido por parámetro (ID).
• Tiene que incluir los datos del tipo de pokemon al que está asociado.
• Debe funcionar tanto para los pokemones de la API como para los de la base de datos.

📍 GET | /pokemons/name?="..."

• Esta ruta debe obtener todos aquellos pokemons que coinciden con el nombre recibido por query.
• Debe poder buscarlo independientemente de mayúsculas o minúsculas.
• Si no existe el pokemon, debe mostrar un mensaje adecuado.
• Debe buscar tanto los de la API como los de la base de datos.

📍 POST | /pokemons

• Esta ruta recibirá todos los datos necesarios para crear un pokemon y relacionarlo con sus tipos solicitados.
• Toda la información debe ser recibida por body.
• Debe crear un pokemon en la base de datos, y este debe estar relacionado con sus tipos indicados (debe poder relacionarse al menos con dos).

📍 GET | /types

• Obtiene un arreglo con todos los tipos de pokemones.
• En una primera instancia, cuando la base de datos este vacía, deberás guardar todos los tipos que encuentres en la API.
• Estos deben ser obtenidos de la API (se evaluará que no haya hardcodeo). Luego de obtenerlos de la API, deben ser guardados en la base de datos para su posterior consumo desde allí.

---

🖱 FRONT-END

Se debe desarrollar una aplicación utilizando React y Redux que contenga las siguientes vistas:

📍 LANDING PAGE | deberás crear una página de inicio o bienvenida con:

• Alguna imagen de fondo representativa al proyecto.
• Botón para ingresar a la home page.

📍 HOME PAGE | la página principal de tu SPA debe contener:

• SearchBar: un input de búsqueda para encontrar pokemon por nombre. La búsqueda debe ser exacta, por lo que sólo lo encontrará si se lo busca con su nombre completo.
• Sector en el que se vea un listado de cards con los pokemones. Al iniciar deberá cargar los primeros resultados obtenidos desde la ruta GET /pokemons y deberá mostrar su:
  • Imagen.
  • Nombre.
  • Tipos.
• Cuando se le hace click a una Card deberá redirigir al detalle de ese pokemon específico.
• Botones/Opciones para filtrar por tipo, y por si su origen es de la API o de la base de datos (creados por nosotros desde el formulario).
• Botones/Opciones para ordenar tanto ascendentemente como descendentemente los pokemones por orden alfabético y por ataque.
• Paginado: el listado de pokemones se hará por partes. Tu SPA debe contar con un paginado que muestre un total de 12 pokemones por página.

📍 DETAIL PAGE | en esta vista se deberá mostrar toda la información específica de un pokemon:

• ID.
• Nombre.
• Imagen.
• Vida.
• Ataque.
• Defensa.
• Velocidad.
• Altura.
• Peso.
• Tipo.

📍 FORM PAGE |: en esta vista se encontrará el formulario para crear un nuevo pokemon.

Este formulario debe ser controlado completamente con JavaScritp. No se pueden utilizar validaciones HTML, ni utilizar librerías especiales para esto.

---