Hello, community!
Tired of staring into the fridge wondering what to cook with leftover ingredients, I decided to build my own solution: Recipe-Finder.org. It's a fast, clean way to search for recipes—and I recently packaged it into an Android app, too!
Here is a quick breakdown of the stack, the hurdles, and the links.
️ The Tech Stack (MEVN)
Frontend: Vue.js + Pinia for an approachable learning curve and painless reactive state management.
UI Framework: Vuetify. It provided out-of-the-box Material Design components (cards, drawers, grids) without writing hundreds of lines of custom CSS.
Backend: Express.js. A lightweight router to handle API requests and database communication.
Database: MongoDB. Recipes are inherently document-like (arrays of ingredients/instructions), making NoSQL the perfect flexible fit.
Biggest Challenges & Fixes
Complex Search Queries: Users rarely type exact, sanitized ingredient names. Solution: I leveraged MongoDB's $text search indexes and built an Express aggregation pipeline to score and sort results based on how many ingredients matched.
Responsive UI Consistency: Varying image aspect ratios and title lengths kept breaking my mobile grid. Solution: Vuetify's v-img aspect-ratio props enforced uniformity, CSS line-clamp handled text truncation, and Vuetify's grid (cols="12" sm="6" md="4") ensured graceful scaling.
I Built an Android App!
To make it easier to use right from the kitchen, I also developed and published a mobile version of the app.
Download it on Google Play
Read more about the Android release
What's Next?
Getting the core app and web version live was step one. Next up on the roadmap:
User Accounts: To save and favorite recipes.
Meal Planning: A calendar to plan the week's dinners.
Smart Shopping Lists: Auto-generating checklists for missing ingredients.
Building this was an awesome dive into full-stack development, and seeing it live is incredibly rewarding. I'd love for you to try it out and let me know your thoughts!
Web Version
Google Play Store App