README_es.md

Proyecto App de Recetas

🌐

Este proyecto fue desarrollado en el módulo de Front-End del curso de Desarrollo Web de la Trybe. Consiste en una aplicación de recetas que permite a los usuarios buscar, visualizar, filtrar, favoritar y seguir el progreso de preparación de recetas de comidas y bebidas.

La aplicación fue desarrollada utilizando React con las herramientas más modernas, como Hooks y Context API, garantizando una gestión eficiente del estado global de la aplicación. El diseño de la aplicación ha sido optimizado para dispositivos móviles.

La aplicación fue desarrollada con un enfoque en dispositivos móviles, con un diseño optimizado para pantallas de hasta 375px de ancho. Para garantizar que la interfaz se visualice correctamente durante las pruebas, recomendamos utilizar las herramientas de desarrollo del navegador (DevTools), simulando la aplicación en resoluciones más pequeñas, como la de un smartphone. En Chrome, por ejemplo, puedes activar el Modo de Visualización para Dispositivos Móviles presionando Ctrl + Shift + M en DevTools y ajustando el ancho de la pantalla a 375px.

⚙️ Funcionalidades

• Buscar recetas de comidas y bebidas;
• Filtrar recetas por categoría;
• Ver detalles de las recetas, incluyendo ingredientes e instrucciones;
• Favoritar y guardar recetas;
• Seguir el progreso de la preparación de las recetas;
• Ver recetas ya finalizadas.

La aplicación utiliza dos APIs distintas como base de datos:

1. TheMealDB API para recetas de comidas;
2. TheCocktailDB API para recetas de bebidas.

🛠️ Tecnologías Utilizadas

• React para la creación de componentes e interfaz;
• React Router para la navegación entre las páginas;
• Context API para la gestión global del estado;
• Hooks para el control de ciclos de vida y estados locales;
• Bootstrap para la estilización y responsividad;
• Docker para garantizar portabilidad y consistencia en el entorno de desarrollo.

🚀 Cómo Ejecutar el Proyecto

Pre-requisitos

• Node.js instalado en tu máquina (versión 14 o superior);
• Docker y Docker Compose instalados (si deseas ejecutar el proyecto con Docker).

Clonando el Repositorio

git clone https://github.com/seu-usuario/recipes-app.git
cd recipes-app

Ejecutando el Proyecto Localmente (Sin Docker)

1. Instala las dependencias del proyecto:

   npm install

2. Inicia el servidor de desarrollo:

   npm start

3. Accede a la aplicación en el navegador:

   http://localhost:3000
   

Ejecutando el Proyecto con Docker

1. Construye la imagen Docker:

   docker build -t recipes-app .

2. Ejecuta el contenedor Docker:

   docker run -p 3000:3000 recipes-app

3. Accede a la aplicación en el navegador:

   http://localhost:3000
   

Estructura del Proyecto

El proyecto está organizado de la siguiente manera:

src/
  ├── components/          # Componentes reutilizables
  ├── pages/               # Páginas principales de la aplicación (Inicio de sesión, Recetas, Favoritos, Perfil, etc.)
  ├── services/            # Lógica para solicitudes a las APIs
  ├── context/             # Configuración de Context API
  ├── App.js               # Componente principal que contiene las rutas
  └── index.js             # Punto de entrada de la aplicación

📈 Metodologías y Competencias Desarrolladas

Durante el desarrollo de este proyecto, se trabajaron las siguientes competencias:

• Metodologías Ágiles: Trabajo en equipo utilizando Scrum y Trello para gestionar tareas y funcionalidades;
• React Routes: Implementación de rutas dinámicas para navegar entre las diferentes páginas de la aplicación;
• Lógica de Programación: Desarrollo de funcionalidades de búsqueda, filtrado y manipulación de datos;
• Manipulación de Estado: Gestión de estado local y global con Hooks y Context API;
• Creación de Componentes: Desarrollo de componentes reutilizables y responsivos para diferentes partes de la aplicación.

🧪 Pruebas

Las pruebas de la aplicación pueden ejecutarse con el comando:

npm test

🌟 Otros proyectos

• 🐣 Pokedex
• 🏪 Tienda en Línea FrontEnd
• 👛 Organizador de Gastos
• 🎮 Trivia