Xinyue Feng
All work

05 · Full-stack web · February 2026

AI Recipe Remix

A web app that turns whatever is in your kitchen into three recipes, each with a photo of the finished dish.

Try the demo Source code
Role
Solo: front end, back end and prompts. The 2026 portfolio edition (new design, demo mode and structured output) was built with AI coding tools.
Timeline
February 2026
Built with
React, Vite, Tailwind CSS, Express, OpenAI API
AI Recipe Remix with eggs, tomato and bread entered, showing the first of three recipes and its photo
Eggs, tomato and bread become a breakfast sandwich, plus two more recipes.

The idea

Most recipe sites start from a dish. This one starts from your fridge. Type the ingredients you have, choose a diet (vegetarian, vegan, halal or gluten-free) and a time limit, and the app suggests three realistic recipes that use as much of what you have as possible, with quantities, steps, substitutions, allergens and tips. Each card shows what’s already in your kitchen and what you’d need to buy.

Skillet tomato eggs with toast soldiers
Skillet Tomato Eggs with Toast Soldiers
Garlic soy chicken and broccoli rice bowl
Garlic Soy Chicken and Broccoli Rice Bowls
Tofu, spinach and mushroom noodle soup
Tofu, Spinach, and Mushroom Noodle Soup

Three dishes from the demo, each with its generated photo.

How it works

Recipes and photos come from two separate requests. The recipe text comes back in a few seconds and the photos take longer, so the cards appear as soon as the recipes arrive, and each photo fades into its card when it’s ready.

Browser (React)              Express server              OpenAI
───────────────              ──────────────              ──────
ingredients, diet, time ──  POST /api/recipes
                             validate input ─────────── text model + JSON schema
                             ◀──────────────────────────── 3 recipes as JSON
show three recipe cards ◀──
for each recipe:
  dish description ──────  POST /api/image ────────── image model
                             ◀──────────────────────────── image
  photo fades into its card ◀──
  • Structured output. The server asks the model for JSON in a fixed shape (title, time, servings, ingredients, steps…), so the interface never has to guess its way through prose.
  • The key stays private. The browser only talks to the Express server, which holds the OpenAI key.
  • Food-photo prompts. Each image request asks for a single plated dish with realistic lighting and no text, written from the recipe’s own title and summary.

Try it

The demo on this site plays back three sample kitchens. To cook up new recipes, run the app with your own OpenAI key.

Open the demo