AirDish

Quick Start (TL;DR)

If you are already comfortable with Node.js and PostgreSQL, here is the entire setup in five commands. Detailed explanations follow below.

# 1. Install dependencies
npm install

# 2. Create your .env file from the template, then fill in DATABASE_URL,
#    DIRECT_URL, ADMIN_PASSWORD, EMAIL_ENCRYPTION_KEY (and S3 keys if you want uploads)
cp .env.example .env

# 3. Generate Prisma client + create all database tables
npx prisma generate
npx prisma migrate deploy

# 4. (Optional) Load demo content so the site doesn't look empty
npm run seed

# 5. Start the development server
npm run dev

Open http://localhost:3000 for the site and http://localhost:3000/admin to sign in.

1. Introduction

AirDish is a complete, production-ready website for restaurants, cafés, and food businesses. Unlike a static HTML template, AirDish is a full-stack application — it comes with a password-protected admin dashboard where you can manage your menu, categories, blog posts, reservations, FAQs, and homepage content without touching any code.

Visitors can browse your menu, read your blog, subscribe to your newsletter, and book a table online. Every booking and subscription is stored safely in your database and is instantly visible in the admin dashboard.

2. Features

3. Technology Stack

AirDish is built with modern, well-supported technologies:

4. Requirements

Before you begin, make sure you have the following ready:

• Node.js 20 or newer — download from nodejs.org. (This project was built and tested on Node v20.19.3.)
• A PostgreSQL database — a free Neon account works perfectly and is recommended. Any PostgreSQL provider (Supabase, Railway, AWS RDS, or a local install) also works.
• An Amazon S3 bucket (or S3-compatible storage like Cloudflare R2, DigitalOcean Spaces, or MinIO) — required only if you want to upload images through the admin dashboard.
• A code editor such as Visual Studio Code (optional, but helpful).
• Basic comfort using a terminal / command line.

5. Folder Structure

Here is an overview of the most important files and folders so you know where everything lives:

airdish/
├── prisma/
│   ├── schema.prisma          # Database structure (tables & fields)
│   ├── migrations/            # Database version history
│   └── seed.ts                # Optional sample-data script (run: npm run seed)
├── public/
│   ├── images/                # Default demo images
│   ├── themes/airdish/        # Brand logo & favicon
│   └── *.svg                  # Icons
├── scripts/
│   └── migrate-sqlite-to-neon.ts # One-off helper (legacy data migration)
├── src/
│   ├── app/
│   │   ├── page.tsx           # The homepage
│   │   ├── layout.tsx         # Site-wide layout, fonts & theme color
│   │   ├── globals.css        # Global styles
│   │   ├── admin/            # The admin dashboard (/admin)
│   │   ├── blog/             # Blog post pages (/blog/...)
│   │   └── api/              # Backend endpoints (menu, reservations, tables, ...)
│   ├── components/          # Homepage sections (Hero, Menu, Footer...)
│   ├── lib/                 # DB client, env validation, crypto, defaults
│   ├── server/              # Backend services (email, reservations)
│   └── generated/           # Auto-generated Prisma client (do not edit)
├── .env                       # YOUR private settings (you create this)
├── .env.example               # Template for the .env file (local / Neon)
├── .env.production.example    # Template for self-hosted production deploys
├── next.config.ts             # Next.js configuration (allowed image domains)
├── prisma.config.ts           # Prisma CLI configuration
├── package.json               # Dependencies & scripts
└── docs/                      # This documentation

6. Step-by-Step Setup

Follow these steps in order. Open a terminal inside the project folder (the folder that contains package.json) before you start.

1. Install the dependencies

   This downloads all the libraries the project needs. It may take a couple of minutes.

   npm install

2. Create your environment file

   Copy the provided template to a new file named .env, then open it in your editor. You will fill in the values in the next section.

   # macOS / Linux
   cp .env.example .env
   
   # Windows (Command Prompt)
   copy .env.example .env

3. Fill in your settings

   Edit the .env file with your database and storage details. See Environment Variables below for what each value means.

4. Generate the database client

   This prepares Prisma to talk to your database.

   npx prisma generate

5. Create the database tables

   This builds all the tables your site needs inside your PostgreSQL database.

   npx prisma migrate deploy

6. (Optional) Load sample data

   Skip this if you want to start completely empty. Otherwise, populate menu items, categories, blog posts, FAQs, tables, and demo testimonials so you can immediately see how the site looks with content:

   npm run seed

7. Start the website

   Launch the development server and open the site in your browser.

   npm run dev

   Now visit http://localhost:3000 to see your site, and http://localhost:3000/admin to log in to the dashboard.

7. Environment Variables

The .env file holds all your private settings. Never share this file or commit it publicly — it contains your passwords and keys. Below is the full template with safe placeholder values:

# ---- Database (PostgreSQL / Neon) ----
DATABASE_URL="postgresql://USER:[email protected]/DBNAME?sslmode=require&pgbouncer=true&connect_timeout=15"
DIRECT_URL="postgresql://USER:[email protected]/DBNAME?sslmode=require"

# ---- Admin dashboard password ----
ADMIN_PASSWORD="choose-a-strong-password"

# ---- Email subsystem (required to send reservation confirmations) ----
# Generate with:  openssl rand -base64 32
EMAIL_ENCRYPTION_KEY="your-32-byte-base64-key"
# Optional fallback sender used until you save EmailSettings in /admin → Settings
EMAIL_FALLBACK_SENDER_EMAIL="[email protected]"
EMAIL_FALLBACK_SENDER_NAME="Your Restaurant"
# Brand bits embedded in the email template
RESTAURANT_NAME="Your Restaurant"
RESTAURANT_SUPPORT_EMAIL="[email protected]"

# ---- Image storage (Amazon S3 or compatible) ----
AWS_ACCESS_KEY_ID="your-access-key"
AWS_SECRET_ACCESS_KEY="your-secret-key"
AWS_REGION="your-region"
AWS_BUCKET="your-bucket-name"
NEXT_PUBLIC_S3BUCKET="https://your-cdn-or-bucket-domain"

8. Database Setup

AirDish needs a PostgreSQL database. You have two common options — pick whichever fits your hosting plan:

Option A — Hosted database (Neon, recommended for most buyers)

Neon is a free, managed PostgreSQL service that takes about two minutes to set up. Supabase, Railway, AWS RDS, and Vercel Postgres all work the same way.

1. Create a database

   Sign up at neon.tech, click New Project, pick the closest region, and accept the defaults. Neon will create a database for you.

2. Copy the two connection strings

   On the Neon dashboard click Connection Details. Copy the Pooled connection string into DATABASE_URL, and the Direct connection string into DIRECT_URL in your .env file. Keep the ?sslmode=require suffix.

3. Create the tables

   Run the migration. This builds every table the site needs:

   npx prisma migrate deploy

Option B — Self-hosted PostgreSQL (VPS / dedicated server)

If you are deploying to your own Linux server (Ubuntu, Debian, etc.), you can install PostgreSQL locally and skip the hosted provider.

1. Install PostgreSQL

   # Ubuntu / Debian
   sudo apt update
   sudo apt install -y postgresql postgresql-contrib

2. Create a database and user

   sudo -u postgres psql
   
   -- Inside psql:
   CREATE DATABASE airdish;
   CREATE USER airdish_user WITH ENCRYPTED PASSWORD 'CHOOSE-A-STRONG-PASSWORD';
   GRANT ALL PRIVILEGES ON DATABASE airdish TO airdish_user;
   \q

3. Set both URLs to the same local connection

   In .env (or .env.production.local on the server), use:

   DATABASE_URL="postgresql://airdish_user:[email protected]:5432/airdish?sslmode=disable"
   DIRECT_URL="postgresql://airdish_user:[email protected]:5432/airdish?sslmode=disable"

   Use 127.0.0.1, not a LAN IP like 192.168.x.x. The production host can't reach a private LAN address — every DB query will return 500.

4. Create the tables

   npx prisma migrate deploy

Viewing your data (optional)

Prisma includes a friendly visual database browser. Run this and open the URL it prints:

npx prisma studio

Loading demo content (optional)

If you want the homepage to look populated immediately, run the included seed script. It inserts demo menu items, categories, blog posts, FAQs, tables, and testimonials — safe to run multiple times.

npm run seed

9. Running the Project

The project includes a few simple commands (defined in package.json):

10. Admin Dashboard

The admin dashboard is the heart of AirDish. Visit /admin (for example http://localhost:3000/admin) and log in using the ADMIN_PASSWORD you set in your .env file.

What you can manage

11. Email (Reservation Confirmations)

When you confirm a reservation in the admin dashboard, AirDish sends the guest an automatic confirmation email containing the date, time, table, and pre-ordered items (if any). Email is optional — the site works fine without it — but enabling it is a nice touch for your guests.

Step 1 — Set the encryption key (one-time)

The email provider's API token is stored in your database encrypted at rest, so a database leak alone cannot expose it. You must provide the encryption key in your .env file:

# Generate this once, then keep it constant across deploys
openssl rand -base64 32

Copy the output and paste it as:

EMAIL_ENCRYPTION_KEY="paste-the-output-here"

Step 2 — Pick an email provider

The bundled provider is Mailtrap (free tier available). The schema also supports Resend, SendGrid, SES, and generic SMTP — each requires a small provider class to be added to src/server/email/providers/. For most ThemeForest buyers, Mailtrap is the fastest path.

1. Create a Mailtrap account

   Sign up at mailtrap.io. For real customer emails use a Sending Domain (Email API → Sending Domains), not the sandbox inbox.

2. Copy your API token

   Mailtrap → Sending Domains → API and SMTP → copy the API Token.

3. Save the settings in the admin dashboard

   Sign in to /admin, go to Settings, and fill in:

   • Provider: Mailtrap
   • API Token: paste the token from Mailtrap
   • Sender Email: an address on your verified Mailtrap sending domain (e.g. [email protected])
   • Sender Name: your restaurant name as guests should see it

   Click Save, then Send Test Email to verify everything works.

How sending works

• Emails go out automatically when an admin marks a reservation as Confirmed.
• Every send attempt is recorded in the EmailLog table (status: PENDING / SENT / FAILED / SKIPPED) so you have a full audit trail.
• Each attempt uses a unique idempotency key — clicking "Confirm" twice will not send two emails.
• If a reservation was submitted without an email address, the system records SKIPPED and does not send.

12. Image Uploads (S3)

When you upload an image in the admin dashboard, AirDish stores it in your S3 bucket and saves the public link. To enable this, fill in the five AWS_* / NEXT_PUBLIC_S3BUCKET values in your .env file.

Upload rules

• Allowed formats: JPEG, PNG, WebP, GIF, and AVIF.
• Maximum size: 5 MB per image.

Displaying images from other domains

For security, Next.js only displays optimized images from approved domains. If your images are hosted somewhere new, add that domain to next.config.ts:

const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "images.unsplash.com" },
      { protocol: "https", hostname: "ds.manob.ai" },
      // Add your own image/CDN domain here:
      { protocol: "https", hostname: "your-cdn-or-bucket-domain" },
    ],
  },
};

13. Customization

Brand / accent color

The site's signature orange is set in one place. Open src/app/layout.tsx and change colorPrimary:

theme={{
  token: {
    colorPrimary: "#f97316",  // ← change to your brand color
    borderRadius: 8,
  },
}}

Site title & description (SEO)

Edit the metadata object in src/app/layout.tsx:

export const metadata = {
  title: "Your Restaurant Name — A Culinary Journey",
  description: "Your own description here",
};

Homepage content

Most homepage content (Hero, About, Menu, Categories, Blog, FAQ) is edited from the admin dashboard — no coding required. To rearrange or remove whole sections, edit src/app/page.tsx, where each section is a clearly named component.

Fonts

AirDish uses Inter and Playfair Display from Google Fonts, configured at the top of src/app/layout.tsx. Swap them for any Google Font there.

Demo images

Default placeholder images live in public/images/. Replace these files (keeping the same names) to change demo visuals, or upload your own through the admin dashboard.

14. Deployment

AirDish is a standard Next.js app and can be hosted anywhere that supports Node.js. Vercel (made by the creators of Next.js) is the simplest option.

Deploying to Vercel

1. Push your project to a Git provider

   Upload the project to GitHub, GitLab, or Bitbucket.

2. Import it into Vercel

   In Vercel, click "New Project" and select your repository.

3. Add your environment variables

   Copy every value from your .env file into Vercel's Environment Variables settings.

4. Deploy

   Vercel runs npm run build automatically and publishes your live site.

Deploying to your own server (VPS / dedicated)

The project ships with a separate template, .env.production.example, for deploys where Postgres runs on the same machine as Node. On the server:

# 1. Pull / upload the project, then:
npm install --omit=dev
cp .env.production.example .env.production.local
# Edit .env.production.local — use 127.0.0.1 for the DB host, NOT a 192.168.* IP

# 2. Set up the database (if you haven't already — see Option B above)
npx prisma migrate deploy

# 3. Build & run
npm run build
npm start

For long-running deploys, run npm start under a process manager such as PM2 or a systemd service, and put Nginx in front for HTTPS.

15. Troubleshooting

"DATABASE_URL is not set"

Your .env file is missing or the DATABASE_URL line is empty. Make sure the file is named exactly .env (not .env.txt), is in the project root, and contains a valid connection string. Restart the server after editing.

Can't connect to the database / timeout

Check that the connection string is correct and that your database allows connections. For Neon, confirm you used the pooled URL for DATABASE_URL and the direct URL for DIRECT_URL.

"Table does not exist" errors

You haven't created the tables yet. Run npx prisma migrate deploy.

Admin login fails

The password you typed must match ADMIN_PASSWORD in .env exactly. After changing it, restart the server.

Image upload fails

Verify all five S3 settings are filled in correctly, the file is under 5 MB, and it's one of the allowed formats (JPEG, PNG, WebP, GIF, AVIF).

An uploaded image won't display

Add the image's domain to remotePatterns in next.config.ts (see Image Uploads), then restart.

Changes to .env aren't taking effect

Environment changes only load when the server starts. Stop the server (Ctrl + C) and run npm run dev again.

"Email encryption key is not configured"

You haven't set EMAIL_ENCRYPTION_KEY in .env. Generate one with openssl rand -base64 32, paste it in, then restart the server. See Email setup.

"EMAIL_ENCRYPTION_KEY must decode to exactly 32 bytes"

The value you pasted isn't valid base64 or isn't 32 bytes. Re-generate it with openssl rand -base64 32 and paste the entire output, including any trailing =.

Test email fails / "Failed to send"

Open /admin → Settings and re-check the provider token, sender email, and that the sender address is on a verified Mailtrap sending domain. The error message returned to the admin UI is sanitised — full provider errors are written to the server log.

Reservation form says "No tables available"

Go to /admin → Tables and add at least one table with a seat count. The reservation form filters tables by guest count and time window — if every table is already booked for that window, none will be selectable.

Production site returns 500 on every page

Almost always a database connection problem. On a self-hosted production server, make sure DATABASE_URL uses 127.0.0.1 (or your DB hostname), not a 192.168.x.x LAN IP from your development network — the production host cannot reach it.

16. Sources & Credits

This template was built using these excellent open-source projects and resources:

• Next.js — React framework
• React — UI library
• Tailwind CSS — styling
• Ant Design — admin UI components
• Framer Motion — animations
• Tiptap — rich-text editor
• Prisma — database toolkit
• Zod — schema validation
• Lucide — icons
• Mailtrap — transactional email (default provider)
• Amazon S3 — image storage
• Google Fonts — Inter & Playfair Display

17. Support

If you run into a problem this guide doesn't cover:

1. Re-read the Troubleshooting section — most issues are listed there.
2. Confirm your .env values are correct and the server was restarted after changes.
3. Make sure you completed every step in Step-by-Step Setup, in order.
4. Reach out through your ThemeForest item's Support tab with a clear description of the issue and any error message you see.

Thank you again for choosing AirDish. We hope it serves your business beautifully. 🍽️