Template Bakery

Overview

Template Bakery is a complete, full-stack web application built specifically for bakeries, restaurants, and food businesses. It ships with everything you need out of the box:

• A beautifully designed public website with homepage sections, a product/menu showcase, an outlet/location listing, and a complete blog system.
• A feature-rich Admin Dashboard for managing products, categories, banners, testimonials, blog posts, outlets, subscribers, and site-wide settings — all without touching any code.
• A robust REST API layer with over 50 endpoints, JWT-based authentication, Zod validation, and a consistent response format.
• Cloudinary integration for image and media management, configured entirely from the admin panel.
• MongoDB as the database with Mongoose ODM, optimized with compound indexes and aggregation pipelines.

Features

Public Website

Admin Dashboard

Technology Stack

Requirements

Installation & Setup

Step 1 — Extract Files

unzip template-bakery.zip -d template-bakery
cd template-bakery

Step 2 — Install Dependencies

# Install pnpm globally (if not already installed)
npm install -g pnpm

# Install all project dependencies
pnpm install

Step 3 — Configure Environment Variables

cp .env.example .env.local
# Then edit .env.local with your actual values

See the Environment Variables section for all required values.

Step 4 — Seed the Database (Optional)

pnpm seed

This creates the initial admin user and populates default settings.

Step 5 — Start Development Server

pnpm dev

Open http://localhost:3000 in your browser. The admin dashboard is at http://localhost:3000/admin/login. The interactive documentation is at http://localhost:3000/documentation.

Environment Variables

Create a .env.local file in the project root with the following variables:

# ─── Database ──────────────────────────────────────────────────
# MongoDB connection string (required)
MONGODB_URI=mongodb+srv://<user>:<password>@cluster.mongodb.net/template-bakery

# ─── Authentication ────────────────────────────────────────────
# Secret key for signing NextAuth JWT tokens (required)
# Generate: openssl rand -base64 32
NEXTAUTH_SECRET=your_strong_random_secret

# ─── Application URLs ──────────────────────────────────────────
# Base URL for internal API calls (server-side fetches)
NEXT_PUBLIC_BASE_URL=http://localhost:3000

# Public application URL (for production absolute links)
NEXT_PUBLIC_APP_URL=https://your-domain.com

# ─── Cloudinary ────────────────────────────────────────────────
# Default upload folder name
CLOUDINARY_FOLDER=uploads

# Cloudinary secure base URL
CLOUDINARY_SECURE_URL_BASE=https://res.cloudinary.com/your-cloud-name

Running the Application

Project Structure

Pages & Routes

Public Pages

Admin Dashboard Pages (Protected)

All admin routes are under /admin/dashboard/ and require a valid authentication session.

API Reference — Public Endpoints

All API responses follow a consistent envelope format:

// Success
{ "success": true, "statusCode": 200, "message": "...", "data": { ... } }

// Error
{ "success": false, "statusCode": 400, "message": "...", "errors": [ ... ] }

Blogs

{ "category": "recipes", "search": "chocolate", "page": 1, "limit": 10 }

Products & Categories

Other Public Endpoints

{ "email": "user@example.com", "name": "Jane Doe" }

API Reference — Admin Authentication

// Request
{ "email": "admin@example.com", "password": "your_password" }

// Response
{
  "success": true,
  "data": {
    "token": "eyJhbGci...",
    "user": { "name": "Admin", "email": "admin@example.com", "role": "admin" }
  }
}

{ "currentPassword": "old_password", "newPassword": "new_password" }

API Reference — Banners

// Create Banner — Request Body
{
  "title": "Welcome to Our Bakery",
  "description": "Fresh baked goods daily",
  "image": "https://res.cloudinary.com/...",
  "linkUrl": "/menu",
  "isActive": true
}

// Sort Banners — Request Body
{ "items": [{ "id": "banner_id", "position": 1 }, ...] }

API Reference — Blogs

// Create Blog — Request Body
{
  "title": "Our New Summer Menu",
  "subtitle": "Refreshing treats for the season",
  "content": "<p>Rich HTML content from SunEditor...</p>",
  "image": "https://res.cloudinary.com/...",
  "category": "category_object_id",
  "tags": ["summer", "seasonal"],
  "isFeatured": false,
  "isShowHomepage": true,
  "status": "published"
}

Status values: pending | draft | published | archived

Blog category endpoints follow the same pattern under /api/admin/blog-category.

API Reference — Product Categories

// Create Category — Request Body
{
  "name": "Cakes",
  "description": "All types of cakes",
  "image": "https://res.cloudinary.com/...",
  "parent": null  // ObjectId for sub-category, null for root
}

API Reference — Products

// Create Product — Request Body
{
  "name": "Chocolate Fudge Cake",
  "description": "Rich chocolate cake with fudge frosting",
  "image": "https://res.cloudinary.com/...",
  "category": "category_object_id",
  "subcategory": "subcategory_object_id",
  "price": 29.99,
  "isPopular": true,
  "isFeatured": false,
  "status": "active"
}

API Reference — Outlets

// Create Outlet — Request Body
{
  "name": "Main Street Bakery",
  "address": "123 Main Street, Springfield",
  "phone": "1234567890",
  "dialCode": "+1",
  "image": "https://res.cloudinary.com/...",
  "mapLink": "https://maps.google.com/?q=...",
  "isShowHomepage": true,
  "businessHours": [
    { "day": "Monday", "open": "08:00", "close": "20:00", "isClosed": false },
    { "day": "Sunday", "open": "", "close": "", "isClosed": true }
  ]
}

API Reference — Testimonials

// Create Testimonial — Request Body
{
  "name": "Sarah Johnson",
  "review": "Absolutely the best bakery in town!",
  "rating": 5,
  "image": "https://res.cloudinary.com/...",
  "authorRole": "Regular Customer",
  "companyName": ""
}

API Reference — File Upload

// Response
{
  "success": true,
  "data": {
    "url": "https://res.cloudinary.com/your-cloud/image/upload/...",
    "publicId": "uploads/filename",
    "format": "jpg",
    "width": 1200,
    "height": 800
  }
}

API Reference — Settings

API Reference — Misc

{ "totalProducts": 48, "totalBlogs": 12, "totalOutlets": 3, "totalSubscribers": 210 }

Database Models

User

{
  name:     String,             // Admin display name
  email:    String (unique),    // Login credential
  password: String,             // Bcrypt hash
  role:     "admin" | "user"
}

Blog

{
  title:         String,
  slug:          String (unique),
  subtitle:      String,
  content:       String,          // Rich HTML
  image:         String,          // Cloudinary URL
  status:        "pending" | "draft" | "published" | "archived",
  isFeatured:    Boolean,
  isShowHomepage: Boolean,
  publishedAt:   Date,
  tags:          [String],
  category:      ObjectId -> BlogCategory
}

BlogCategory

{
  name:        String,
  slug:        String (unique),
  description: String,
  status:      Boolean,
  position:    Number
}

Category (Product Category)

{
  name:        String,
  slug:        String (unique),
  description: String,
  image:       String,
  parent:      ObjectId | null,   // Self-reference for sub-categories
  status:      Boolean,
  position:    Number
}

Product

{
  name:        String,
  slug:        String (unique),
  description: String,
  image:       String,
  category:    ObjectId -> Category,
  subcategory: ObjectId -> Category,
  price:       Number,
  isPopular:   Boolean,
  isFeatured:  Boolean,
  status:      "active" | "inactive"
}

Outlet

{
  name:          String,
  slug:          String (unique),
  address:       String,
  phone:         String,
  dialCode:      String,
  image:         String,
  mapLink:       String,
  isShowHomepage: Boolean,
  status:        Boolean,
  position:      Number,
  businessHours: [{ day, open, close, isClosed }]
}

Banner

{
  title:       String,
  description: String,
  image:       String,
  linkUrl:     String,
  isActive:    Boolean,
  status:      Boolean,
  position:    Number,
  type:        String
}

Testimonial

{
  name:        String,
  review:      String,
  rating:      Number (1-5),
  image:       String,
  authorRole:  String,
  companyName: String,
  status:      Boolean,
  position:    Number
}

Settings (Single Document)

{
  general: {
    companyName, phone, email, address, logo, favicon,
    socialLinks: { facebook, instagram, twitter, youtube, linkedin }
  },
  pageBanner:  { menu, location, gallery, reserveTable },
  cloudinary:  { cloud_name, api_key, api_secret, folderName, secureUrlBase },
  metadata:    { title, applicationName, description, keywords[], openGraphImage },
  termsPolicy: { terms, policy },
  businessHours: [{ day, open, close, isClosed }]
}

Authentication

The template uses NextAuth v5 with a Credentials provider for page-level session management, alongside a custom JWT implementation for API route protection.

Login Flow

1. POST /api/admin/auth/login  →  { email, password }
2. Server verifies password with bcrypt
3. Generates JWT token (30-day expiry) via jsonwebtoken
4. Client stores token in NextAuth session
5. Subsequent requests include:  Authorization: Bearer <token>
6. Protected API routes verify the token via lib/authenticate.ts

Protecting Custom API Routes

import { asyncHandler } from "@/lib/async-handler";

// This route is protected — unauthenticated requests get 401
export const GET = asyncHandler(
  async (req) => {
    return Response.json({ success: true, data: "protected data" });
  },
  { checkAuth: true }
);

Cloudinary Setup

1. Create a free account at cloudinary.com
2. Copy your Cloud Name, API Key, and API Secret from the Cloudinary dashboard
3. Log in to your admin dashboard and go to Settings → Cloudinary
4. Enter your credentials and click Save

Supported Upload Types

Admin Dashboard

Access the admin dashboard at /admin/login using your admin credentials.

State Management

The application uses Zustand for lightweight client-side state. Four stores are provided:

import { useBlogCategoryStore } from "@/store/useBlogCategoryStore";

const { activeCategory, setActiveCategory } = useBlogCategoryStore();

Customization Guide

Changing Brand Colors

/* In app/globals.css */
:root {
  --primary: 25 75% 40%;  /* HSL value */
}

Changing Fonts

Fonts are loaded in app/layout.tsx via next/font/google. Replace the current fonts with any Google Font:

import { Montserrat } from "next/font/google";
const font = Montserrat({ subsets: ["latin"], weight: ["400", "700"] });

Adding a New Public Page

1. Create a folder: app/(public)/your-page/
2. Add page.tsx inside it
3. Build your page using existing components from components/features/ and components/ui/

Adding a New Admin Section

1. Create page: app/(private)/admin/dashboard/your-section/page.tsx
2. Add API route: app/api/admin/your-section/route.ts
3. Add Mongoose model: model/YourModel.ts
4. Add validation: update lib/validation-schema.ts
5. Add server actions: actions/your-section/

Modifying Validation Rules

All Zod schemas are centralized in lib/validation-schema.ts:

export const createProductSchema = z.object({
  name:  z.string().min(2).max(200),
  price: z.number().positive(),
  // add your custom fields here
});

Deployment

Deploy on Vercel (Recommended)

1. Push your project to a GitHub repository
2. Import the repository on vercel.com
3. Add all environment variables under Project Settings → Environment Variables
4. Click Deploy — Vercel handles the rest automatically

Deploy on a VPS / Dedicated Server

# 1. Build the application
pnpm build

# 2. Start the production server
pnpm start
# Runs on port 3000 by default

Use Nginx or Caddy as a reverse proxy to expose the app on port 80/443:

# Sample Nginx configuration
server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Process Manager (PM2)

npm install -g pm2
pm2 start "pnpm start" --name template-bakery
pm2 save
pm2 startup

Changelog

v1.0.0 — Initial Release

• Full-stack bakery management system
• Public website with two homepage variants
• Admin dashboard with complete CRUD for all entities
• JWT-based authentication with bcrypt password hashing
• Cloudinary integration for all media uploads
• MongoDB with Mongoose (indexes, aggregation pipelines)
• Full blog system with categories, tags, featured flags
• Multi-outlet management with business hours
• Testimonial management with star ratings
• Newsletter subscription system
• Site-wide settings panel (general, SEO, Cloudinary, T&C)
• Drag-and-drop reordering for all list entities
• Dark mode support
• Fully responsive design
• TypeScript strict mode throughout
• Turbopack for fast development builds

Support

For support, questions, and bug reports, please use the Comments section on the item's CodeCanyon / ThemeForest page.

When reporting an issue, please include:

• Your Node.js version (node -v)
• Your operating system
• Steps to reproduce the issue
• Any error messages from the browser console or server logs