Voice-based recipe search engine

The Voice Recipe Search Engine is a simple web application that uses the Web Speech API to enable hands-free recipe discovery for home cooks. Built with React, NextJS, and TypeScript, this project demonstrates a modern approach to solving a common kitchen challenge: finding recipes while your hands are occupied or messy.

Guided by my pain points in the kitchen, the application features a clean, mobile-responsive interface, voice-to-search functionality, and a fallback text-to-search input. The technical stack showcases my proficiency in modern web development practices, including TypeScript for type safety, Tailwind CSS for responsive styling, and Vercel for deployment.

This project not only serves as a practical tool for cooking enthusiasts - it also allowed me to explore different web technologies and AI-assisted development. Some of the interesting technical challenges in my development process for this app included:

• Configuring the Web Speech API and understanding its limitations.
• Learning to work with Vercel v0 AI UI generator and then optimising the user interface for different states, mobile browsers, and aesthetics.
• Implementing a state-managed interface that allows smooth transitions between recipe listings and detailed views

Some of the future enhancements that I would love to explore on the roadmap for this application include:

• adding a user feedback system for user-driven feature development; and
• expanding the accessibility features to create a more inclusive cooking companion.

For feedback or ideas for improvement, get in touch with me. Happy cooking!

Please note to use this app, it's best to open the preview link in Chrome or Safari for compatibility with MDN Web Speech API.