- 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.
Para poder correr la app de manera local, será necesario que creen desde psql una base de datos llamada food
El contenido de client
fue creado usando: Create React App.
La idea general fue crear una aplicación en la cual se puedan ver distintas recetas de comida junto con información relevante utilizando la api externa spoonacular y a partir de ella poder, entre otras cosas:
- Buscar recetas
- Filtrarlas / Ordenarlas
- Crear nuevas recetas propias
IMPORTANTE: Para poder utilizar esta API externa es necesario crearse una cuenta para obtener una API Key que luego deberá ser incluida en el archivo .env
. Por otro lado tienen un límite de requests por día por lo que deben usar las llamadas a la API con cuidado.
- React
- Redux
- Express
- Sequelize - Postgres
Se desarrolló una aplicación de React/Redux que contiene las siguientes pantallas/rutas:
Pagina inicial: una landing page con:
- Una imagen de fondo representativa al proyecto
- Un botón para ingresar al home (
Ruta principal
)
Ruta principal: contiene lo siguiente:
- Input de búsqueda para encontrar recetas por nombre
- Área donde se ve el listado de recetas. Muestra su:
- Imagen
- Nombre
- Tipo de dieta (vegetariano, vegano, apto celíaco, etc)
- Opciones para filtrar por por tipo de dieta
- Opciones para ordenar tanto ascendentemente como descendentemente las recetas por orden alfabético y por puntuación
- Paginado para ir buscando y mostrando las siguientes recetas
Ruta de detalle de receta: contiene lo siguiente:
- Los campos mostrados en la ruta principal para cada receta (imagen, nombre, tipo de plato y tipo de dieta)
- Resumen del plato
- Puntuación
- Nivel de "comida saludable"
- Paso a paso
Ruta de creación de recetas: contiene lo siguiente:
- Un formulario controlado con los siguientes campos:
- Nombre
- Resumen del plato
- Puntuación
- Nivel de "comida saludable"
- Paso a paso
- Posibilidad de agregar uno o más tipos de dietas
- Opción para crear una nueva receta
El modelo de la base de datos tiene las siguientes entidades:
- Receta con las siguientes propiedades:
- ID
- Nombre
- Resumen del plato
- Puntuación
- Nivel de "comida saludable"
- Paso a paso
- Tipo de dieta con las siguientes propiedades:
- ID
- Nombre
Se desarrolló un servidor en Node/Express con las siguientes rutas:
IMPORTANTE: Todas estas funcionalidades fueron implementadas sin el uso de librerías externas.
- GET /recipes?name="...":
- Obtiene un listado de las primeras 9 recetas que contengan la palabra ingresada como query parameter
- Si no existe ninguna receta muestra un mensaje adecuado
- GET /recipes/{idReceta}:
- Obtiene el detalle de una receta en particular
- Trae solo los datos pedidos en la ruta de detalle de receta
- Incluiye los tipos de dieta asociados
- GET /types:
- Obtener todos los tipos de dieta posibles
- Los tipos de dieta fueron precargados manualmente
- POST /recipe:
- Recibe los datos recolectados desde el formulario controlado de la ruta de creación de recetas por body
- Crea una receta en la base de datos