Introduction

What started as a simple experiment to try out the Svelte framework quickly grew into a full-fledged project: Munchlab. As a young adult, one of the most challenging daily tasks is deciding what to cook or eat, especially when trying to use available ingredients. I sought a solution that could help me figure out what to cook based on the ingredients I had on hand, which led me to the Chefkoch API. Despite the limited free API quota, it provided enough functionality to bring my idea to life.

Technology and Implementation

Svelte and Onsen UI

Once I had the basic functionality, I decided to transform the project into a Progressive Web App (PWA) for mobile devices. For the user interface, I chose Onsen UI because of its mobile optimization. In hindsight, it wasn’t the best choice due to its outdated look, but it did offer the responsiveness I needed. Thankfully, Svelte’s smooth learning curve helped me develop a prototype relatively quickly.

Speech-Driven Interaction

An important aspect of the app was making it usable during cooking. Since the app displayed recipes, I needed to ensure that users could interact with it hands-free while cooking. I opted to make the app fully controllable via voice commands. However, I quickly realized that the current Speech Recognition API wasn’t developer-friendly. To solve this, I developed an open-source wrapper based on Observables, including permission handling, which greatly improved the developer experience.

Open Source Contributions

In addition to the speech recognition wrapper, I also built an open-source voice-controlled multi-select input. This allowed users to search for recipes or ingredients using voice commands. Recipe navigation was also voice-enabled, making the cooking process smoother.

Branding and Launch

Once the app was functional and polished, I needed a name and branding for the product. After brainstorming with my colleagues, especially my designer friend, we settled on the name Munchlab—a playful combination of "munch" and "lab." My designer friend created a branding package, including colors and a logo. We also built a landing page featuring a picture of me pretending to bite into the app (centered in mobile format).

With the branding and landing page ready, I launched Munchlab on Product Hunt, and the feedback was overwhelmingly positive. It garnered a lot of attention, comments, and usage, which quickly depleted my API quota. Despite this, Munchlab continued to receive upvotes, eventually achieving 2nd place for Product of the Day.

Conclusion

Munchlab started as a small experiment but turned into a widely appreciated product. Leveraging Svelte, speech recognition, and the Chefkoch API, I was able to create an app that made cooking easier and more interactive. The success on Product Hunt validated the project and encouraged further exploration of voice-controlled interfaces and PWAs.

Feel free to visit the website under: https://meals-git-master-florian-glappas-projects.vercel.app/