Meals App

A full-stack Next.js application for discovering meals, sharing recipes, managing reservations, and running a small food community platform with an admin dashboard.

The project uses the Next.js App Router, MongoDB/Mongoose, JWT authentication, UploadThing image uploads, Resend contact emails, Google reCAPTCHA, and a modular CSS architecture built with CSS Modules.

Features

• Meal discovery: Browse shared meals, open meal details, view ratings, comments, and recipe information.
• Recipe sharing: Authenticated users can create meals with image upload support.
• Favorites: Users can save meals and view their favorite meals from a protected profile area.
• Comments and replies: Meal detail pages support comments, comment counts, and replies with creator restrictions.
• Ratings: Users can rate meals and admin pages can read calculated rating data.
• Reservations: Users can create, edit, cancel, and review upcoming, past, active, and cancelled reservations.
• Profile dashboard: Users can update their account name, switch theme, view favorite/shared meal links, and access the dashboard.
• Menu system: Public menu pages support search and filtering, with database-backed menu items managed from admin.
• Contact messages: Contact form submissions are saved to MongoDB and can be reviewed from admin.
• Newsletter subscriptions: Footer newsletter form saves subscribers, auto-fills authenticated users' email, and prevents changing it client-side and server-side.
• Admin dashboard: Admin users can manage meals, menu items, reservations, users, contact messages, and newsletter subscribers.
• Read-only dashboard access: Authenticated non-admin users can view dashboard pages, but sensitive data is masked and destructive actions are disabled.
• Global toast system: Success, error, warning, and info feedback is handled through a centralized toast provider.
• Responsive UI: Public pages, auth pages, profile, menu, and admin screens use responsive CSS Modules.

Tech Stack

• Framework: Next.js 15 with App Router
• UI: React 19, CSS Modules, Lucide React icons, Motion
• Language: TypeScript and JavaScript
• Database: MongoDB with Mongoose ODM
• Authentication: Custom JWT authentication with jsonwebtoken, bcryptjs, and HTTP cookie based user sessions
• Image Uploads: UploadThing
• Email: Resend
• Spam Protection: Google reCAPTCHA v3
• Client Data Fetching: SWR
• Security Utilities: Rate limiting, server-side admin guards, masked data for read-only dashboard viewers

Architecture

High-level flow:

1. Public pages and protected pages are served through the Next.js App Router.
2. Client components use SWR and server actions/API routes where interactivity is needed.
3. Authentication state is read from JWT cookies and shared through AuthProvider.
4. Server actions and API routes validate user/admin permissions before writing data.
5. MongoDB stores users, meals, comments, favorites, ratings, reservations, menu items, contact messages, and newsletter subscribers.
6. Admin pages use server-side access checks. Non-admin authenticated users can view masked read-only data, while admin-only actions remain protected by server guards.

Getting Started

Prerequisites

• Node.js 18+
• npm
• MongoDB database, local or Atlas
• UploadThing account for image uploads
• Resend account for contact email delivery
• Google reCAPTCHA v3 keys for contact form verification

Installation

1. Clone the repository:

   git clone <repository-url>
   cd next-app

2. Install dependencies:

   npm install

3. Create a .env file in the project root:

   DB_URI=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/<dbname>
   JWT_SECRET=your_jwt_secret
   AUTH_SECRET=your_auth_secret
   
   UPLOADTHING_TOKEN=your_uploadthing_token
   
   RESEND_API_KEY=your_resend_api_key
   CONTACT_EMAIL=your_contact_receiver_email
   
   ADMIN_EMAILS=admin@example.com
   
   NEXT_PUBLIC_API_URL=http://localhost:3000
   
   NEXT_PUBLIC_RECAPTCHA_SITE_KEY=your_recaptcha_site_key
   RECAPTCHA_SECRET_KEY=your_recaptcha_secret_key
   
   # Optional: local development only
   CONTACT_FORM_SKIP_RECAPTCHA=false

4. Run the development server:

   npm run dev

5. Open the app:

   http://localhost:3000

Available Scripts

npm run dev

Runs the development server with Turbopack.

npm run build

Creates a production build.

npm run start

Starts the production server after building.

npm run create-indexes

Runs the database index creation script with .env loaded.

Project Structure

app/
  (admin)/admin/        Admin dashboard routes
  (auth)/               Login, signup, profile, favorites, shared meals
  (pages)/              Public pages: menu, meals, reservations, contact, community
  api/                  API routes for auth, meals, reservations, uploads

components/
  admin/                Admin navigation and menu management components
  forms/                Auth and contact forms
  menu/                 Menu search/filter components
  sections/             Page sections such as footer, feature blocks, highlights
  ui/                   Reusable UI primitives, cards, buttons, banners, slides

context/
  auth/                 AuthProvider
  theme/                ThemeProvider
  toast/                ToastProvider

lib/
  actions/              Server actions
  admin/                Admin access, dashboard data, privacy helpers
  db                    MongoDB connection
  menuData              Public menu data loading

models/
  User                  User accounts
  Meal                  Shared meals
  Comment               Meal comments and replies
  Favorite              Favorite meals
  Rating                Meal ratings
  Reservation           Reservation records
  MenuItem              Database-backed menu items
  ContactMessage        Contact form messages
  NewsletterSubscriber  Newsletter email subscriptions

Admin Access

Admin access is controlled by the ADMIN_EMAILS environment variable.

• Emails listed in ADMIN_EMAILS can manage admin resources.
• Authenticated users who are not admins can open dashboard pages in read-only mode.
• Read-only users cannot create, update, delete, hide, disable, cancel, or archive data.
• Sensitive email fields are masked for read-only users.
• Contact message content and newsletter emails are hidden from read-only users.

Notes

• If reCAPTCHA fails locally, make sure localhost and your deployed domain are added in the Google reCAPTCHA admin console.
• CONTACT_FORM_SKIP_RECAPTCHA=true should only be used for local development.
• Resend requires a verified domain for production-grade email sending.
• Keep .env out of version control.