Hello, DEV community! 👋
Today, I want to share a project I recently launched: Recipe-Finder.org.
Like many developers, I often find myself staring into the fridge wondering what to make with the random ingredients I have left. I wanted a fast, clean, and intuitive way to search for recipes, so I decided to build my own solution.
It was a fantastic opportunity to dive deeper into full-stack development, and I decided to go with a modified MEVN stack. Here is a breakdown of how I built it, the tools I used, and what I learned along the way.
🛠️ The Tech Stack
I wanted a stack that allowed for rapid development while keeping the application highly responsive. Here is what powered the project:
- Frontend: Vue.js. I love Vue for its approachable learning curve and how easily it handles reactive components. It made building the dynamic search interfaces a breeze.
- UI Framework: Vuetify. To get that polished, Material Design look without writing hundreds of lines of custom CSS, Vuetify was my go-to. It provided out-of-the-box components like cards for the recipes, navigation drawers, and responsive grids.
- Backend: Express.js (Node.js). I kept the backend lightweight. Express handles the API routing, processing search requests from the Vue frontend and communicating with the database.
- Database: MongoDB. Recipes are inherently document-like (they have arrays of ingredients, arrays of instructions, etc.). A NoSQL database like MongoDB was a perfect fit, allowing me to store recipe data flexibly without strict relational tables.
🏗️ Architecture & How It Works
The architecture is a standard decoupled setup.
- The Client: The Vue app handles all the state management (using Pinia) and user interactions. When a user types an ingredient or recipe name, Vue triggers an Axios request.
- The API: The Express server receives this request. It validates the input and constructs a query.
- The Data: The server queries MongoDB, retrieves the matching recipe documents, and sends them back as a JSON response.
- The Render: Vue takes that JSON data and seamlessly updates the Vuetify DOM components to display the delicious results.
🚧 Biggest Challenges & Lessons Learned
No project is complete without a few bumps in the road. Here are a couple of things that tested my patience and what I learned from them:
1. Managing Complex Search Queries
- The Challenge: Users rarely type exact, sanitized ingredient names. Implementing a search that handled both strict array matching (for ingredients) and fuzzy text matching (for recipe titles) was tricky to get right without sacrificing performance.
-
The Solution: I ended up utilizing MongoDB's text search indexes and the
$textoperator. For more nuanced ingredient matching, I built out an aggregation pipeline in Express that scores and sorts results based on how many ingredients match the user's input.
2. Responsive UI with Vuetify
- The Challenge: Getting the recipe cards to look consistent was surprisingly tough. Recipe images had different aspect ratios, and title lengths varied wildly, which kept breaking my grid layouts on mobile screens.
-
The Solution: I leveraged Vuetify's
v-imgaspect-ratio props to enforce uniformity and used the CSSline-clampproperty for text truncation. I also fully utilized Vuetify's responsive grid system (cols="12" sm="6" md="4") to ensure the layout degrades gracefully based on viewport size.
🚀 What's Next?
Getting the core functionality of Recipe-Finder.org live was step one. In the future, I plan to add:
- User Accounts: So people can save and favorite their go-to recipes.
- Meal Planning: A calendar feature to plan the week's dinners in advance.
- Smart Shopping Lists: Automatically compiling missing ingredients from a chosen recipe into an interactive checklist.
Let me know what you think!
Building this was a lot of fun, and seeing it live on the web is incredibly rewarding. I'd love for you to try it out!
👉 Check it out here: Recipe-Finder.org
If you have any feedback on the UI, the search functionality, or the code structure, please let me know in the comments below. Happy coding! 👨💻👩💻