← Websites
🍳
Recipe Browser
A searchable, filterable recipe site that actually helps you decide what's for dinner.
🟡 MediumDifficulty
3-4 hoursTime
JavaScript, TypeScriptLanguages
What you're building
You're building a browsable recipe library — type in the search box and watch matching recipes appear instantly, tap a category chip to filter by cuisine, and click any card to pop open the full ingredient list and steps in a modal. It's the exact interaction pattern behind every real recipe site and product catalog you've ever used, built from scratch with an array of JS objects.
What you'll unlock 🔓
You'll need
- Basic JavaScript
- Basic HTML/CSS
- A code editor
- A browser
🗺️ Build roadmap
01 Set up your recipe data
→
02 Render the recipe grid
→
03 Build live search
→
04 Add category filter chips
→
05 Build the detail modal
→
06 Combine search and filters together
→
07 Polish the empty state and styling
🔒
Log in to start building
Your first project is free -- create an account to unlock it.
Log in Sign up free