Inspiration
As a home cook, I grew frustrated with spending $8-$15 on small jars of pre-made spice blends—most of which I could make with spices I already owned. I wanted a tool that made it easy to access global blend recipes, match blends to my pantry, and tweak ratios to my taste. That’s how SpiceBlender was born.
What it does
SpiceBlender is a web app for home cooks to browse 100+ curated spice blend recipes, find blends using owned ingredients, convert cooking units (US/metric), and save custom blends locally. It also shares storage tips to keep blends fresh.
How we built it
I started with wireframing in Figma, focusing on warm, intuitive design. Built the frontend with HTML/CSS/React (Bootstrap for layout), used vanilla JS for unit conversion logic, and LocalStorage to save custom blends—no login needed.
Challenges we ran into
The biggest hurdle was perfecting the blend-matching logic: ensuring the app accurately filtered recipes based on core vs. optional ingredients. I also had to debug LocalStorage limits to avoid broken save functionality for custom blends.
Accomplishments that we're proud of
Creating a fully functional app that works instantly (no lag!) and eliminates the need for user accounts. Users can go from browsing to making a custom blend in under a minute—exactly what I set out to build.
What we learned
I deepened my understanding of client-side data persistence and responsive UI design for cooking tools. I also learned to prioritize user flow: the app’s quick-access buttons cut down on navigation friction for busy cooks.
What's next for this project
I plan to add a "seasonal blend" section (think fall chili mixes, summer grilling rubs) and refine the unit converter to support more niche measurements (like pinches or dashes). I’m also exploring lightweight cloud sync (for users who want it) without mandatory logins.
Log in or sign up for Devpost to join the conversation.