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.

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.


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.
Stack tecnológico