Proyecto personal · Aplicación inteligente

Recetario IA

Una herramienta interactiva que convierte ingredientes sueltos en fichas de cocina estructuradas con temporizadores, pasos claros y soporte PWA para usarla en la cocina sin conexión.

AstroSvelte 5Google Gemini APIAppwrite CloudTypeScriptTailwind CSSPWA (Service Workers)Vercel
Recetario IA — vista principal
Segundos en generar una receta completa
100% Offline gracias al soporte PWA
Gemini 2.0 con validación de datos Zod
Gratis con descargas PDF incluidas

El reto

Seguro que te ha pasado: le pides a una IA tradicional que te sugiera una receta con lo que tienes en la nevera, y te devuelve un bloque gigante de texto. Leer eso mientras cocinas, con las manos ocupadas o manchadas, es un infierno. No hay tiempos claros, ni pasos estructurados, ni temporizadores.

El reto era diseñar una aplicación web pensada para la cocina real. Tenía que ser ultra-rápida, funcionar sin conexión a internet (ya que la cobertura en la cocina a veces falla) y transformar la respuesta libre de la IA en una ficha técnica con cantidades exactas, alarmas integradas y un formato limpio y cómodo.

Lo que hice

Generación inteligente y estructurada: Conecté la aplicación con la API de Google Gemini (usando el modelo rápido gemini-2.0-flash) y forcé a la IA a responder en un formato JSON estricto. Gracias a la validación con Zod en el backend, la interfaz puede pintar de forma segura una ficha interactiva en lugar de texto plano.

Modo cocinar interactivo y PWA: Diseñé un modo paso a paso a pantalla completa. Cada paso que requiere tiempo tiene un temporizador interactivo con alarmas. Además, convertí la app en una PWA (Progressive Web App) instalable en el móvil, que guarda en caché local las recetas favoritas para que puedas cocinar aunque te quedes sin cobertura.

Stack moderno y ágil: Utilicé Astro para la base del proyecto por su velocidad, combinado con Svelte 5 (utilizando sus nuevas Runes) para gestionar el estado reactivo del temporizador y los ingredientes de forma fluida. Guardé la información en la nube con Appwrite Cloud, agilizando el desarrollo al máximo gracias al apoyo de herramientas de IA.

Recetario IA — captura secundaria 1
Recetario IA — captura secundaria 2

Resultado

Recetario IA está publicado y listo para usar en recetario.moisesvalero.es (con el nombre de marca "Umami"). Es una de mis aplicaciones favoritas porque resuelve una molestia diaria de forma visual y divertida, con una estética de cuaderno físico que entra por los ojos.

Para mi portfolio, demuestra cómo puedo unir inteligencia artificial generativa con interfaces de usuario súper interactivas, utilizando tecnologías modernas de frontend y logrando un producto terminado, usable y optimizado para móviles.

AstroSvelte 5Google Gemini APIAppwrite CloudTypeScriptTailwind CSSPWA (Service Workers)Vercel