Back to projects
Apr 03, 2024
2 min read

Moroccan Cooking Companion — AI-Powered Recipe Finder

A web application for searching traditional Moroccan dishes and retrieving recipes with AI-generated images, built with Spring Boot, Spring AI, and Vaadin's Hilla.
JavaJava
Spring BootSpring Boot
Spring AISpring AI
GenAIGenAI
VaadinVaadin
HillaHilla
TailwindCSSTailwindCSS
Moroccan Cooking Companion — AI-Powered Recipe Finder banner

A web application that allows users to search for traditional Moroccan dishes and retrieve their recipes along with mouthwatering AI-generated images. Built with Spring Boot, Spring AI, and Vaadin’s Hilla for a seamless full-stack experience.

This project serves as a playground to explore the capabilities of Spring AI and Vaadin’s Hilla — learning how to integrate LLMs into Spring Boot applications and build modern React-based frontends with type-safe server communication.

Features

  • Search for traditional Moroccan dishes by name or ingredients
  • AI-powered recipe generation with detailed cooking instructions
  • AI-generated food images for each dish
  • Modern, responsive UI built with Hilla (React + Spring Boot)

How It Works

  1. User Query — The user searches for a Moroccan dish (e.g., “Tagine”, “Couscous”, “Pastilla”)
  2. Spring AI Processing — The backend uses Spring AI with OpenAI to generate a detailed recipe
  3. Image Generation — An AI-generated image of the dish is created alongside the recipe
  4. Seamless Delivery — Hilla’s type-safe endpoints deliver the result to a responsive React frontend

Tech Stack

  • Spring Boot — Backend framework
  • Spring AI (OpenAI) — LLM integration for recipe and image generation
  • Vaadin Hilla — Full-stack framework with React frontend and type-safe Java endpoints
  • TailwindCSS — Utility-first styling
  • Maven — Build tool