/FoodApp

My first solo project, I was responsible both for the front end and the back end of the app.

Primary LanguageJavaScript

Proyecto individual - Food App

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.

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.

Enunciado

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.

Tecnologías utilizadas:

  • React
  • Redux
  • Express
  • Sequelize - Postgres

Frontend

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

Base de datos

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

Backend

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