We've just launched a new PREMIUM challenge! 🥳 In this project, you’ll build a multi-page, responsive recipe finder with search, filtering, and dynamic content. It’s a perfect opportunity to practice working with JSON data, build complex layouts, and use JavaScript to add interactive features. 🧵
Your users should be able to: ✅ View the home, about, recipes index, and recipe detail pages ✅ Search for recipes by name or ingredient ✅ Filter recipes by max prep or cook time ✅ View the optimal layout for the interface depending on their device's screen size ✅ See hover and focus states for all interactive elements on the page
Here are some ideas to take the project a step further: 1. Implement responsive images using the small and large image variations 2. Create smooth page transitions and micro-interactions without heavy frameworks 3. Update the data and add new filters (dietary restrictions, difficulty level, etc.) 4. Let users adjust serving sizes and automatically recalculate all ingredient quantities 5. Allow visitors to save favorite recipes that persist between sessions
This is a premium challenge, so you'll need a pro subscription. Our premium challenges are our highest-quality projects and make incredible portfolio pieces. Here's more info about our pro subscription if you're interested in checking it out 👇 frontendmentor.io/pro