MealMind AI

An AI-assisted recipe platform — browse and search a curated recipe library, generate brand-new recipes from whatever's in your fridge, chat with a recipe-aware AI assistant, and publish, rate, and review recipes of your own.

Live app: mealmind-eta.vercel.app Backend repo: github.com/Morshedul-developer/mealmind-backend

---

Table of Contents

• Overview
• Features
• Tech Stack
• Architecture
• Project Structure
• Getting Started
• Environment Variables
• Available Scripts
• Design System
• Deployment
• Related Repository

Overview

MealMind AI pairs a hand-curated recipe library with a set of real AI features — recipe generation and a conversational cooking assistant — built on top of an Express/MongoDB backend. This repository is the frontend: a Next.js App Router application that consumes that backend's REST API.

Features

Recipes

• Explore page with live debounced search, cuisine/diet/difficulty/prep-time/rating filters, sort options, and pagination
• Recipe Details page with an image gallery, ingredients checklist, step-by-step instructions, key stats (prep time, servings, calories, difficulty), and related-recipe suggestions
• Reviews & Ratings: a Recharts star-breakdown chart backed by real submitted reviews, plus a review form for logged-in users
• Publish, view, and delete your own recipes from a dedicated dashboard

AI

• Recipe Generator — turn a list of ingredients (plus cuisine, diet, and length preferences) into a complete, structured recipe, with a one-click regenerate
• Chat Assistant — a streaming (SSE), recipe-aware chat widget with conversation history, suggested follow-up prompts, and a typing indicator

Auth & Accounts

• Email/password and Google OAuth sign-in (via Better Auth)
• A one-click demo account for trying the app without registering
• Session-based auth via a first-party cookie (see Architecture)

Everything else

• Fully responsive, audited down to 375px
• About, Contact, Privacy, and Terms pages

Tech Stack

Layer	Choice
Framework	Next.js 16 (App Router, React 19)
Language	TypeScript
Styling	Tailwind CSS v4
Server state	TanStack Query
HTTP client	Axios
Auth	Better Auth (email/password + Google OAuth)
Charts	Recharts
Backend	Express + MongoDB (Mongoose) — separate repo
AI	Groq (Llama 3.3 70B) via the backend

Architecture

The frontend and backend are deployed on different domains (Vercel and Render), which would otherwise make the session cookie third-party — already blocked in Incognito, and headed toward being blocked everywhere as third-party cookies phase out.

To avoid that, next.config.ts rewrites /api/:path* to the backend origin, and all browser-side requests (src/lib/api.ts, src/lib/auth-client.ts) call the relative /api/* path. From the browser's perspective every request is same-origin, so the backend's Set-Cookie is first-party. Server Components (which have no browser cookie jar to protect, and can't resolve a relative URL anyway) call the backend origin directly.

Browser → mealmind-eta.vercel.app/api/*  (same-origin, cookie-safe)
              │  (Next.js rewrite)
              ▼
        mealmind-backend-aw95.onrender.com/api/*

Project Structure

src/
  app/                 App Router routes, layout.tsx, providers.tsx
    ai-generator/       AI Recipe Generator
    explore/            Recipe search & filters
    recipes/[id]/        Recipe Details
    items/add/           Publish a recipe (protected)
    items/manage/         Manage your recipes (protected)
    login/, register/, forgot-password/
    about/, contact/, privacy/, terms/
  components/
    ui/                 Generic, design-system-level primitives
    recipe/              Recipe-specific components (cards, forms, charts...)
    layout/               App shell (Navbar, Footer)
  hooks/                Shared React hooks
  types/                Shared TypeScript types
  lib/
    api.ts               Shared axios instance
    auth-client.ts        Better Auth React client
    *-api.ts              Per-feature API wrappers (recipes, reviews, ai, chat)

Getting Started

Prerequisites

• Node.js 20+
• A running instance of the backend (locally or the deployed Render URL)

Setup

git clone https://github.com/Morshedul-developer/mealmind.git
cd mealmind
npm install
cp .env.local.example .env.local   # then fill in BACKEND_ORIGIN if needed
npm run dev

Open http://localhost:3000.

Environment Variables

Variable	Description	Default
BACKEND_ORIGIN	Origin of the Express backend, used by the API proxy and by server-side data fetching	http://localhost:5000 locally; falls back to the deployed Render URL in production if unset

Available Scripts

Command	Description
npm run dev	Start the dev server (Turbopack)
npm run build	Production build
npm run start	Serve the production build
npm run lint	Run ESLint

Design System

Role	Name	Hex
Primary	Terracotta	#E8623C
Secondary	Olive	#3E5C3E
Background	Cream	#FFF8F0
Text	Charcoal	#22201D

Headings are set in Fraunces, body text in Inter, on an 8px spacing grid with 16px card radii.

Deployment

The frontend is deployed on Vercel at mealmind-eta.vercel.app; the backend is deployed on Render. See Architecture for how the two stay same-origin from the browser's perspective in production.

Related Repository

• Backend (Express + MongoDB + AI): github.com/Morshedul-developer/mealmind-backend