Context

A modern web application designed to help users search, filter, and discover traditional Vietnamese recipes. Traditional recipe finders are often static and hard to navigate, but this project combines a rich dataset of 101+ Vietnamese dishes with an AI culinary assistant powered by Google Gemini 2.5-flash to generate custom, structured recipes on the fly.

Approach

Built using React 19, TypeScript, and Vite for a highly responsive, modern frontend. The AI assistant leverages the official @google/generative-ai SDK, configured with structured output formatting to guarantee that the recipes generated by Gemini always return valid JSON matching our application's design system. Used Tailwind CSS for a responsive grid layout, supporting detailed filters such as cooking time, difficulty levels, dietary restrictions, and portion sizes.

Outcome

101+ Vietnamese Recipes.

Reflection

Integrating LLMs in user-facing applications requires strict output schema validation. Working with Gemini's structured output mode taught me how to constrain LLM responses to prevent UI breakage while delivering personalized recipes in real-time.