Comfort Food Challenge — Tell Me Your Day, I'll Feed Your Soul

Jen Bor — Sat, 15 Aug 2026 03:56:04 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing.

Inspiration

Whether you're commuting home from an office or closing your laptop after working from home all day, transition burnout is real. When you're running on empty, staring blankly into your pantry or doom-scrolling food delivery apps only adds to the fatigue.

I wanted to build an empathetic Culinary Therapy Engine inspired by the universal archetype of the superhero grandmother who knows exactly what you need to hear and eat when you’re having a rough day!

Instead of an endless recipe directory, Comfort Food Challenge invites you to vent your daily stress, pick your desired ambiance and dining dynamic, and tap submit. The system validates your mental state, eliminates decision fatigue by matching you with one single hero dish, and breaks that dish down into six distinct execution pathways tailored to your energy level and bandwidth.

What I Built

1. The Vent & Vibe Check

The Vent Box: Share your day in plain text. From remote work burnout to daily commute gridlock, pick a mood emoji, and choose a setting (Cozy Cabin, Bustling City, Childhood Kitchen) and dining style (Solo, With a Buddy, Family).
1-Click Preferences: A quick toggle menu lets you set allergies, food restrictions, or ingredients you want to exclude without filling out a long profile.

2. One Dish, Zero Guesswork
Before showing recipes, the system delivers an encouraging validation note acknowledging your specific daily frustration. Rather than presenting 20 competing options, it serves one perfectly matched hero dish to eliminate choice paralysis.

3. 6 Realistic Ways to Get It

15-Min Express: Quick pantry shortcut method.
2-Hour Therapy: Slow-cooked, deliberate recipe for when cooking helps you decompress after a long day at the desk.
With a Friend: A split task list for two people cooking together.
≤ 5 Ingredients: Simple grocery list for low-stock pantries.
Local Spot: Direct Google Maps link for nearby restaurants serving the dish.
Fast Delivery: 1-tap search to order it straight to your door.

Demo

Check out the live project and source code below:
Live Demo: https://comfort-food-tawny.vercel.app

🔑 Click to reveal Judge Access Code to be entered in the lower right corner
Use passcode ComfortDev2026 in the app to test live AI generations.

Source Code: github.com/jboroda/ComfortFood

Extra Utilities:

Copy Shopping List: Formats and copies all ingredients to clipboard.
Text to Myself / Share: Sends the recipe directly via SMS or link.
Find Another Recipe: Instant re-roll if you want a different suggestion.
Recipe Links: Direct search buttons for YouTube, NYT Cooking, and Google.

Journey

Tech Stack: Next.js (App Router), Tailwind CSS, Vercel, and the Google Gen AI SDK (gemini-3.5-flash).

Handling Structured Output

The main frontend challenge was ensuring that the AI responses never broke the recipe cards or tab layouts. I used Gemini's responseSchema to force strict JSON typing for all six execution pathways, ingredient arrays, and instruction steps before sending the data to the client.

const response = await ai.models.generateContent({
  model: 'gemini-3.5-flash',
  contents: prompt,
  config: {
    responseMimeType: 'application/json',
    responseSchema: {
      type: Type.OBJECT,
      properties: {
        encouragingWords: { type: Type.STRING },
        heroDish: {
          type: Type.OBJECT,
          properties: {
            name: { type: Type.STRING },
            tagline: { type: Type.STRING },
            whyItHeals: { type: Type.STRING },
          },
          required: ['name', 'tagline', 'whyItHeals'],
        },
        pathways: {
          type: Type.OBJECT,
          properties: {
            express15Min: { /* strict schema */ },
            deepDive2Hour: { /* strict schema */ },
            friendCook: { /* strict schema */ },
            minimalist5: { /* strict schema */ },
            localSpot: { /* strict schema */ },
            onlineOrder: { /* strict schema */ },
          },
          required: [
            'express15Min',
            'deepDive2Hour',
            'friendCook',
            'minimalist5',
            'localSpot',
            'onlineOrder',
          ],
        },
      },
      required: ['encouragingWords', 'heroDish', 'pathways'],
    },
  },
});

What I Learned & What's Next

Generative AI works best in UI design when it reduces choices rather than multiplying them. Keeping the output focused on a single meal with flexible execution modes makes the interface practical and stress-free.

Pantry Snapshot: Allow users to snap a photo of their fridge so Gemini only suggests meals matching available ingredients.
Mood & Comfort History: A simple weekly log showing comfort meal trends over time.
React Native / Expo: Port the React components to React Native while keeping the exact same Gemini API prompt logic and schemas.

License

This project is open source and available under the MIT License.

Thank you to the DEV Community and the challenge organizers for hosting this challenge!