The Challenge

The goal was to build a recipe discovery experience that:

• Supports searching by recipe name and ingredients
• Includes filtering by preparation and cooking time
• Maintains fast page transitions and a smooth user experience
• Stays close to the provided design while writing scalable, readable code

The Solution

The application was built with Next.js and TypeScript, using a mix of styling and tooling to keep the codebase organized and flexible. Key highlights:

• Dynamic routing for individual recipe pages
• Search and filtering logic powered by data from a local JSON file
• Styling with Tailwind CSS for layout and responsiveness, combined with CSS Modules for scoped component styles
• Storybook for developing and testing UI components in isolation

The Outcome

The final result is a responsive, fast-loading recipe finder that meets the challenge requirements and feels intuitive to use. Through this project, I strengthened my understanding of:

• Next.js routing patterns
• Building filter-driven interfaces
• Writing clearer, more maintainable frontend code
• Integrating Storybook into a real project workflow