Pantry Mode
Find recipes based on ingredients you already have.
Fast Results
Cached queries + optimized filtering under 1 second.
Real-World Use
Designed for quick decisions in everyday cooking.
Overview
What it does
RecipeGrind is a full-stack web application that helps users find recipes based on what they already have at home. Instead of searching by recipe name, users can input ingredients and instantly see matching meals.
The goal was to reduce friction in everyday cooking decisions and make recipe discovery faster, more practical, and more aligned with real behavior.
Problem
Why recipe apps fall short
- Users search by recipe name, not ingredients
- Too many tabs and comparisons required
- No clear answer to “what can I make right now?”
- Time constraints not prioritized
The gap: recipe apps optimize for inspiration — not for real-life decision making.
Solution
Pantry-first experience
- Select ingredients → instantly see recipes
- Highlight missing ingredients
- Filter by time and dietary needs
- Fast, scannable recipe cards
UX Decisions
Designing for speed + clarity
Ingredient-first flow
Made Pantry Mode a primary entry point.
Dense cards
Users skim — prioritize image + time + title.
Time filters
Users care about how long recipes take.
Mobile-first
Readable, quick interactions.
Technical
How it was built
Frontend
React + TypeScript + MUI
Backend
Node + Express API
Database
PostgreSQL + Prisma
Performance
TanStack Query caching + debouncing
Impact
Results
2× Faster
Pantry flow vs keyword search
Real Use
Users reported cooking more with available ingredients
Takeaways
What I learned
- Designing for real behavior > ideal workflows
- Speed is a UX feature
- Full-stack thinking improves product decisions
- Simple features can solve real problems