MealMatchr

• 

  Landing Page

• 

  Filters

• 

  Swipe through recipes

Inspiration

As students with busy schedules, we often struggled with deciding what to cook, planning meals for the week, and finding recipes that matched our dietary needs. We wanted something simple, trustworthy, and beginner-friendly. This inspired us to create a meal prep helper that makes healthy meal planning quick, fun, and stress-free.

What it does

MealMatchr generates personalized, swipeable recipe recommendations using real, top-rated recipes from reputable food blogs and websites (no AI-generated meals). Users answer a few quick prompts:Meal type (breakfast, lunch, dinner), How people youre cooking for, Preferred cuisines, Meal prep duration (how many days), Dietary restrictions or health goals

How we built it

We used Vercel's v0 AI builder to generate the initial UI and Next.js structure. From there, we exported the code, created a shared GitHub repository, and collaborated using VS Code, Git, and Vercel deployments. Our stack includes: Next.js for the web app, React for interactive recipe card components, Vercel for deployment, GitHub for version control and team collaboration

Challenges we ran into

As beginner coders, nearly every step was a learning curve. We faced challenges such as: Figuring out GitHub collaboration, cloning repos, and resolving editing permission issues, Understanding project structure after exporting from v0, Managing deployments and environments on Vercel, Implementing swipe gestures without prior React experience, Organizing the UI and logic in a way that made sense for meal planning

Accomplishments that we're proud of

We are proud that we: Successfully built and deployed a working web app as beginners, Implemented a smooth recipe swipe interface, Created a personalized filtering system for meal prep needs, Integrated real, credible recipe sources instead of AI-generated content, Collaborated effectively through GitHub even with limited experience

What we learned

Throughout this project, we learned: How to use Next.js and React components, How to collaborate using Git, GitHub, and branching, How to deploy and manage a live project on Vercel, How to export and modify AI-generated code from v0, How to design user flows for a real-world meal prep tool

What's next for MealMatchr

Our next steps include: Adding user accounts and saved preferences, A smarter recommendation system, based on ratings and cooking history, Integrating automatic grocery list exporting, Supporting fridge-inventory filtering, Curating a larger set of verified recipe sources

Built With

• css
• node.js
• react
• typescript