PlateIt

• 

  Onboarding

• 

  Homescreen

• 

  Paste your URL, can be any link from YouTube, blog

• 

  Import the recipe

• 

  Recipe details

• 

  Recipe ingredients detail

• 

  Recipe steps detail

• 

  Start Cooking mode

• 

  Generate recipe ideas with what you have in the pantry

• 

  Create your meal plan

• 

  Update grocery list with your recipe

Inspiration

PlateIt started from a simple observation: people love collecting recipes but rarely cook them. Saved links, YouTube videos, inspiration is everywhere, but execution is hard. I wanted to build something that removes friction, reduces decision fatigue, and makes cooking feel joyful instead of overwhelming. A tool that says: “You can do this. Let’s cook together.”

What it does

PlateIt turns food inspiration into action through AI‑powered cooking tools:

• Import any recipe from a link or raw text
• Automatically parse ingredients, steps, and timing
• Cook step‑by‑step with timers and a calm, focused layout
• Generate grocery lists from selected recipes
• Use “Recipe Ideas” to discover what you can cook with what you already have
• Build meal plan with one tap

Everything is designed to feel lively, friendly, and emotionally safe, no pressure.

How I built it

Using Replit, PlateIt is built with a modern, modular stack:

• React + Vite + TypeScript for fast, clean development
• Tailwind CSS with a custom Sage + Terracotta palette
• Gemini API for recipe parsing, pantry suggestions, and meal planning
• React Context + localStorage for persistent state AI prompt chaining powers the core logic, including structured recipe extraction

Challenges I ran into

• Designing a lively but calm visual identity, finding the right balance between playful and premium took multiple iterations.
• Prompt precision, Gemini needed tightly scoped instructions to avoid vague or overly creative outputs.
• Data consistency, ensuring parsed recipes always returned usable ingredient and step structures.
• UX clarity, simplifying complex features like meal planning and pantry suggestions into intuitive flows.

Accomplishments that I'm proud of

• Building a fully functional recipe importer that works with both links and raw text.
• Designing flow that feels emotionally warm and welcoming.
• Implementing AI-powered cooking tools that genuinely reduce friction in the kitchen.
• Crafting a visual identity that feels unique, lively, and commercially ready.

What I learned

• How to design AI prompts that are structured, predictable, and context-aware.
• How to build a cohesive design system that balances liveliness with calm.
• How to architect a React app that separates UI, state, and AI logic cleanly.
• How small UX decisions, spacing, color blocks, tone, dramatically affect emotional experience.

What's next for PlateIt

• Smart pantry scanning using image recognition
• Weekly meal planning with dietary preferences
• Recipe sharing between friends
• Voice-guided cooking mode

Built With

• geminiapi
• react
• replit