Developed by Ted Thavisin, Danny Xia, Devarshi Dave, Abid Hussain for COMP 426: Modern Web Programming at UNC-Chapel Hill.
MealMatch is a web application that helps users discover recipes, view detailed ingredients, and plan meals while keeping track of what they need to buy. It’s built as a full-stack project using Next.js, Supabase, and Drizzle, with a focus on a clean UI and a smooth cooking/planning workflow.
-
Browse & view recipes
See a list of available recipes and open a dedicated page for each one. -
Ingredient lists
Each recipe shows a structured list of ingredients so users know exactly what they need. -
AI cost estimation
Use an AI-powered helper to estimate the cost of a recipe’s ingredients. -
AI Recipe Generation Generate new recipe ideas based on ingredients you have on hand, cuisine preferences, or dietary needs (e.g., vegetarian, gluten-free).
-
Favorites / saved recipes
Mark recipes you like so you can quickly return to them later. -
Responsive UI
Layout and components are built with modern React patterns and Tailwind CSS/Shadcn UI for a good experience on desktop and mobile.
- Frontend: Next.js (React)
- Styling: Tailwind CSS + Shadcn UI components
- Backend / Data: Supabase (PostgreSQL) + Drizzle ORM + tRPC
- Languages: TypeScript