🍳 YumHub - API con DRF y vistas Vue.js 3

Descripción

YumHub es una plataforma de gestión y descubrimiento de recetas desarrollada como una aplicación desacoplada. El proyecto consta de una API robusta construida con Django Rest Framework que gestiona una base de datos relacional de autores e ingredientes, y una interfaz reactiva desarrollada en Vue.js 3 con Pinia para la gestión del estado global.

Tecnologías utilizadas

Django 5 / DRF

Vue.js 3

Tailwind v4

Vite

Requisitos previos

1. Python versión 3.10 o superior
2. Node.js versión 20 o superior (LTS recomendada)
3. npm versión 10 o superior

Instalación

1. Clonar el repositorio

git clone <url-del-repositorio>
cd yumhub

2. Configuración del Backend (yumhubAPI)

El backend gestiona la lógica de negocio, la persistencia de datos y la exposición de endpoints REST.

1. Entrar en el directorio: cd yumhubAPI
2. Crear un entorno virtual de Python:

   python -m venv .venv

3. Activar el entorno (Windows):

   .\.venv\Scripts\activate

4. Instalar las dependencias necesarias:

   pip install -r requirements.txt

5. Realizar las migraciones de los modelos a SQLite:

   python manage.py migrate

6. Iniciar el servidor de desarrollo de Django:

   python manage.py runserver

7. Sembrado de datos: Ejecutar el script personalizado para poblar la base de datos con autores, ingredientes y recetas iniciales:

   python seed_data.py

3. Configuración del Frontend (yumhubViews)

El frontend es una Single Page Application (SPA) que consume la API de DRF.

1. Entrar en el directorio: cd ../yumhubViews
2. Instalar dependencias mediante npm:

   npm install

3. Iniciar el servidor de desarrollo con Vite:

   npm run dev

Sincronización de Perfiles y Autenticación

La aplicación utiliza un flujo de autenticación basado en el sistema de usuarios nativo de Django, pero extiende esta lógica para gestionar perfiles de Autor.

Flujo de Sincronización Post-Login

Para asegurar la integridad de los datos entre el sistema de autenticación y la lógica de negocio, se ha implementado un flujo en YumHubLogin.vue:

1. El usuario se autentica mediante sus credenciales.
2. Tras recibir la respuesta exitosa (Token/Sesión), el frontend realiza una petición para verificar si existe un objeto Author vinculado al user_id.
3. Si el objeto no existe, se dispara automáticamente un POST al endpoint de creación de autores con la información recuperada del perfil del usuario logueado.

Lógica Técnica

• Django Models: Uso de OneToOneField entre User y Author.
• DRF Serializers: Manejo de relaciones anidadas para la creación de recetas con ingredientes.
• Pinia Store: Gestión del estado de autenticación y persistencia del perfil de autor.

Flujo de la aplicación

flowchart TD
    A[Usuario No Logueado] --> B[Registro/Login]
    B --> C{Autenticación Core}
    C -->|Éxito| D[Sincronización Author Profile]
    D --> E[Dashboard YumHub]
    
    E --> F[Explorar Recetas Públicas]
    E --> G[Gestión Provia de Recetas]
    E --> H[Panel de Favoritos]
    
    G --> G1[Crear/Editar Receta]
    G1 --> G2[Selector Dinámico de Ingredientes]
    G2 --> I[(Base de Datos)]
    
    F --> J[Visualización Detalle Receta]
    J --> H

Loading

Sistema de Seeding

Se proporciona el script seed_data.py que utiliza la librería requests para interactuar con los endpoints de la API. Este proceso genera:

• 10 Usuarios con sus respectivos perfiles de autor sincronizados.
• 100 Ingredientes clasificados por tipo (verdura, carne, lácteo, etc.).
• 20 Recetas que vinculan dinámicamente autores e ingredientes mediante relaciones Many-to-Many.