/PI-FOOD

Primary LanguageJavaScript

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.

Enunciado

La idea general es crear una aplicación en la cual se puedan ver distintas recetas de comida junto con información relevante de las mismas utilizando la api externa spoonacular y a partir de ella poder, entre otras cosas:

  • Buscar recetas
  • Filtrarlos / Ordenarlos
  • Crear nuevas recetas propias

Tecnologías necesarias:

  • React
  • Redux
  • Express
  • Sequelize - Postgres

Frontend

Pagina inicial: contiene una landing page con

  • Una imagen de fondo
  • Botón para ingresar al home (Ruta principal)

Ruta principal: contiene

  • Input de búsqueda para encontrar recetas por nombre
  • Área donde se verá el listado de recetas. Muestra su:
    • Imagen
    • Nombre
    • Tipo de dieta (vegetariano, vegano, apto celíaco, etc)
  • Botones/Opciones para filtrar por por tipo de dieta
  • Botones/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, 9 recetas por pagina, mostrando las primeros 9 en la primer pagina.

Ruta de detalle de receta: contiene

  • 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

  • Un formulario controlado con JavaScript con los siguientes campos:
    • Nombre
    • Resumen del plato
    • Puntuación
    • Nivel de "comida saludable"
    • Paso a paso
  • Posibilidad de seleccionar/agregar uno o más tipos de dietas
  • Botón/Opción para crear una nueva receta

Base de datos

El modelo de la base de datos tiene las siguientes entidades (Aquellas propiedades marcadas con asterisco son obligatorias):

  • 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

La relación entre ambas entidades es de muchos a muchos ya que una receta puede ser parte de varios tipos de dieta en simultaneo y, a su vez, un tipo de dieta puede contener múltiples recetas distintas. Un ejemplo tomado de la API sería el Strawberry Mango Green Tea Limeade que es vegetariano, vegano y apto para celíacos, todo al mismo tiempo. Pero a su vez existen otras recetas para vegetarianos.

Backend

  • GET /recipes?name="...":
    • Obtiene un listado de las 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
    • Incluye los tipos de dieta asociados
  • GET /types:
    • Obtiene todos los tipos de dieta posibles
    • En una primera instancia, cuando no exista ninguno, se precarga la base de datos con los tipos de datos indicados por spoonacular acá
  • 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