Blog Template

Overview

Blog Template is a scalable, full-stack blog platform with a dual-interface architecture — a public-facing blog site and a private admin dashboard. It is built on the Next.js App Router with server components, server actions, and API routes. All data is stored in MongoDB, and media files are managed via Cloudinary CDN.

The template is designed to be purchased, configured, and deployed with minimal setup. The admin dashboard provides a complete content management system so non-technical users can manage all blog content without touching the codebase.

Features

Public Interface

Admin Dashboard

Tech Stack

Requirements

• Node.js >= 18.x
• MongoDB — Atlas cluster or local MongoDB instance
• Cloudinary — free or paid account (configured via admin dashboard)
• pnpm (recommended) or npm / yarn

Installation

1. Extract or clone the project
   cd blog-template
2. Install dependencies
   

   pnpm install
   # or
   npm install

3. Create environment variables
   Create a .env.local file in the project root — see Environment Variables.
4. Start development server
   

   pnpm dev

   Application runs at http://localhost:3000
5. Login to admin dashboard
   Visit http://localhost:3000/admin/login with default credentials:
   Email: admin@example.com  |  Password: ChangeMe123!
6. Configure Cloudinary
   Go to Settings → Cloudinary in the admin dashboard and enter your Cloudinary credentials.

Environment Variables

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

MONGODB_URI=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/<dbname>?retryWrites=true&w=majority
NEXTAUTH_SECRET=your_nextauth_secret_here
NEXTAUTH_URL=http://localhost:3000
JWT_SECRET=your_jwt_secret_here

Default Admin Credentials

A default admin user is automatically seeded into the database on first connection if no admin exists.

Project Structure

blog-template/
├── app/                            # Next.js App Router root
│   ├── layout.tsx                  # Root layout
│   ├── globals.css                 # Global styles
│   ├── icon.tsx                    # App icon
│   ├── api/                        # API route handlers
│   │   ├── auth/[...nextauth]/     # NextAuth.js handler
│   │   ├── admin/                  # Protected admin APIs
│   │   │   ├── auth/               # Admin authentication
│   │   │   ├── blog/               # Blog CRUD
│   │   │   ├── category/           # Category CRUD
│   │   │   ├── author/             # Author CRUD
│   │   │   ├── contact-us/         # Contact messages
│   │   │   ├── feedback/           # Feedback management
│   │   │   ├── home-section/       # Home section editor
│   │   │   ├── settings/           # App settings
│   │   │   ├── subscribe/          # Subscribers list
│   │   │   └── dashboard/          # Dashboard stats
│   │   ├── blog/                   # Public blog APIs
│   │   ├── category/               # Public category API
│   │   ├── author/                 # Public author APIs
│   │   ├── banner/                 # Banner API
│   │   ├── contact-us/             # Contact form API
│   │   ├── feedback/               # Feedback API
│   │   ├── subscribe/              # Subscription API
│   │   ├── search/                 # Search API
│   │   ├── menu/                   # Navigation menu API
│   │   ├── home-section/           # Home section API
│   │   ├── settings/               # Public settings API
│   │   └── cache/                  # Cache invalidation
│   ├── (auth)/                     # Authentication pages (no layout)
│   │   └── admin/login/            # Admin login page
│   ├── (private)/                  # Protected admin interface
│   │   ├── layout.tsx              # Dashboard layout (auth guard)
│   │   └── admin/dashboard/        # Dashboard pages
│   │       ├── page.tsx            # Dashboard overview
│   │       ├── blogs/              # Blog management
│   │       ├── categories/         # Category management
│   │       ├── author/             # Author management
│   │       ├── settings/           # Global settings
│   │       ├── contact-us/         # Contact inbox
│   │       ├── feedback/           # Feedback list
│   │       ├── subscribe/          # Subscriber list
│   │       └── (showCase)/         # Homepage showcase editor
│   │           ├── banner-one/     # Banner 1 editor
│   │           ├── banner-two/     # Banner 2 editor
│   │           └── editor/         # Editor picks
│   ├── (public)/                   # Public-facing interface
│   │   ├── layout.tsx              # Public layout (header + footer)
│   │   ├── page.tsx                # Home page
│   │   ├── home2/                  # Alternative home
│   │   ├── about/                  # About page
│   │   ├── all-blogs/              # Blog listing
│   │   ├── blog-details/[slug]/    # Blog post detail
│   │   ├── lets-talk/              # Contact page
│   │   └── terms/                  # Terms & conditions
│   └── documentation/              # Documentation viewer route
│
├── actions/                        # Next.js Server Actions
│   ├── blog/                       # Blog mutations
│   ├── author/                     # Author mutations
│   ├── categories/                 # Category mutations
│   ├── settings/                   # Settings mutations
│   ├── subscribe/                  # Newsletter actions
│   ├── contactUs/                  # Contact form actions
│   ├── adminLogin/                 # Auth actions
│   └── profile/                    # Profile actions
│
├── components/                     # React components
│   ├── ui/                         # Shadcn/Radix UI primitives (30+ components)
│   ├── features/                   # Feature-specific components
│   │   └── landing/                # Public page sections
│   ├── form/                       # Form field components
│   │   ├── InputField.tsx
│   │   ├── PasswordField.tsx
│   │   ├── FileUploadComponent.tsx
│   │   └── PhoneNumber.tsx
│   ├── custom/                     # Custom business components
│   │   ├── FeedbackModal.tsx
│   │   ├── NewsletterModal.tsx
│   │   └── ContactUsForm.tsx
│   ├── shared/                     # Shared utility components
│   ├── hooks/                      # Component-level hooks
│   │   ├── useFilteredBlogPosts.tsx
│   │   └── useLoadMore.tsx
│   └── providers/                  # React providers
│       └── theme-provider.tsx
│
├── config/                         # Configuration modules
│   ├── database.ts                 # MongoDB connection + auto-seeding
│   ├── cloudinary.ts               # Cloudinary upload/delete utilities
│   ├── routes.ts                   # Route constants
│   ├── constant.ts                 # App constants (roles, cache keys)
│   └── cache.ts                    # In-memory cache config
│
├── hooks/                          # App-level custom hooks
│   └── use-mobile.ts
│
├── lib/                            # Utility functions
│   ├── utils.ts                    # General utilities (cn, etc.)
│   ├── api-client.ts               # HTTP client wrapper
│   ├── authenticate.ts             # Auth helpers
│   ├── validation-schema.ts        # Zod validation schemas
│   ├── types.ts                    # Shared TypeScript interfaces
│   ├── metadata.ts                 # SEO metadata builder
│   ├── date-format.ts              # Date formatting helpers
│   ├── mongo-adapter.ts            # MongoDB adapter
│   └── file-validator.ts           # File type/size validation
│
├── model/                          # Mongoose schemas & models
│   ├── Blog.ts                     # Blog schema
│   ├── Category.ts                 # Category schema
│   ├── User.ts                     # User/Author schema
│   ├── Settings.ts                 # App settings schema
│   ├── Contactus.ts                # Contact submissions schema
│   ├── Feedback.ts                 # Feedback schema
│   ├── Subscribe.ts                # Newsletter subscriber schema
│   └── HomeSection.ts              # Home section data schema
│
├── provider/                       # App-level providers
│   ├── AuthSessionProvider.tsx     # NextAuth session provider
│   ├── DashboardProvider.tsx       # Dashboard context
│   └── ThemeProvider.tsx           # Theme context
│
├── public/                         # Static assets
│   ├── fonts/                      # Custom web fonts
│   ├── images/                     # Static images
│   ├── sample-data/                # Sample data files
│   ├── documentation.html          # Standalone documentation
│   └── documentation.pdf           # PDF documentation
│
├── store/                          # Zustand state stores
│   ├── useBlogStore.ts
│   ├── useUserProfile.ts
│   ├── useLoadingStore.ts
│   └── useOutletStore.ts
│
├── types/                          # TypeScript type extensions
│   ├── next.d.ts
│   └── next-auth.d.ts
│
├── next.config.ts
├── tsconfig.json
├── postcss.config.mjs
├── components.json
└── package.json

Application Routes

Public Routes

Auth Routes

Admin Dashboard Routes (Protected)

Authentication

The template uses NextAuth.js 5.x (beta) for session management alongside a custom JWT-based API authentication layer.

How It Works

1. Admin visits /admin/login and submits credentials.
2. NextAuth validates credentials against the MongoDB users collection.
3. A session is created server-side; a signed JWT is also issued for API requests.
4. All /api/admin/* routes verify the JWT from the Authorization: Bearer <token> header.
5. Protected Next.js pages under (private) redirect unauthenticated users to /admin/login.

Security Details

• Passwords hashed with bcrypt (10 salt rounds)
• NEXTAUTH_SECRET and JWT_SECRET must be strong, unique random strings
• Default admin password must be changed on first login
• Role-based access: admin = full dashboard access; user = author access only

Generating Secrets

openssl rand -base64 32

Run this command twice — once for NEXTAUTH_SECRET and once for JWT_SECRET.

State Management

The app uses Zustand for global client-side state.

Image Management

All images are managed through Cloudinary CDN. Credentials are stored in MongoDB — no .env changes are needed for Cloudinary configuration.

Setup Steps

1. Create a Cloudinary account at cloudinary.com.
2. Copy your Cloud Name, API Key, and API Secret from the dashboard.
3. In the admin dashboard, navigate to Settings → Cloudinary and enter your credentials.
4. Set a Folder Name (e.g., blog-uploads) for organized media storage.

Supported Operations

API — Authentication

Login Request

POST /api/admin/auth/login

{
  "email": "admin@example.com",
  "password": "ChangeMe123!"
}

Login Response

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "_id": "...",
    "name": "Admin",
    "email": "admin@example.com",
    "role": "admin"
  }
}

API — Blogs

Admin (Protected)

Create Blog Request

POST /api/admin/blog

{
  "title": "My Blog Post Title",
  "slug": "my-blog-post-title",
  "shortDescription": "A brief summary of the post",
  "description": "<p>Full HTML content from the rich text editor</p>",
  "readTime": "5 min read",
  "image": "https://res.cloudinary.com/cloud/image/upload/v1/...",
  "category": "60d5f9b0c9e77c001f3c9d34",
  "createdBy": "60d5f9b0c9e77c001f3c9d35",
  "isPopular": false,
  "isFeature": true,
  "status": true
}

Public

API — Categories

Admin (Protected)

Sort Request

POST /api/admin/category/sort

{ "orderedIds": ["id1", "id2", "id3"] }

Public

API — Authors

Admin (Protected)

Public

API — Settings

Admin (Protected)

Cloudinary Request Body

{
  "cloudName": "your-cloud-name",
  "apiKey": "123456789012345",
  "apiSecret": "your-api-secret",
  "folder": "blog-uploads",
  "secureUrlBase": "https://res.cloudinary.com/your-cloud-name"
}

SEO Metadata Request Body

{
  "title": "My Blog — Latest Articles",
  "applicationName": "My Blog",
  "description": "Explore insightful articles and stories.",
  "keywords": ["blog", "articles", "news"],
  "openGraphImage": "https://res.cloudinary.com/..."
}

Public

API — Contact & Feedback

API — Newsletter

Subscribe Request

POST /api/subscribe

{ "email": "subscriber@example.com" }

API — Search

Example: GET /api/search?q=javascript

API — Banners & Home Sections

API — Menu, Dashboard & Cache

Database — Blog Model

Collection: blogs

Indexes: status+slug, status+isPopular, status+isFeature, status+title, status+category

Database — Category Model

Database — User Model

Database — Settings Model

Database — Other Models

Contact Us

Feedback

Subscribe (Newsletter)

HomeSection

Admin — First Time Setup

1. Login at /admin/login with default credentials
2. Settings → General — set company name, logo, favicon, social links
3. Settings → Cloudinary — configure Cloudinary CDN credentials
4. Settings → SEO Metadata — set page title, description, Open Graph image
5. Create at least one Category before creating blog posts
6. Create at least one Author before creating blog posts
7. Create your first Blog Post

Admin — Creating Blog Posts

1. Navigate to Blogs → Create New
2. Enter the Title — the slug auto-generates but can be customized
3. Add a Short Description — this appears in blog listing cards
4. Write full content in the SunEditor rich text editor
5. Upload a Cover Image — uploaded directly to Cloudinary
6. Select a Category and Author
7. Set Read Time (e.g., "5 min read")
8. Toggle isFeature to show on home page featured section
9. Toggle isPopular to show in trending section
10. Click Publish for live or save as Draft

Admin — Managing Categories

• Categories can be reordered by drag-and-drop on the categories page
• Each category has an active/inactive toggle for visibility control
• Deleting a category does not delete its associated blog posts
• The count field on each category reflects the number of assigned blogs

Admin — Home Page Customization

Use the Showcase section in the admin sidebar to edit home page content:

Admin — Settings Guide

Build & Production

Build

pnpm build

Uses Turbopack for fast production bundling (configured in package.json).

Start Production Server

pnpm start

Pre-Deploy Checklist

• ☐ MONGODB_URI points to production MongoDB cluster
• ☐ NEXTAUTH_SECRET is a strong, unique random string
• ☐ JWT_SECRET is a strong, unique random string
• ☐ NEXTAUTH_URL is set to the production domain (e.g., https://yourdomain.com)
• ☐ Admin default password has been changed
• ☐ Cloudinary credentials are configured in admin settings

Deployment

Vercel (Recommended)

1. Push project to GitHub, GitLab, or Bitbucket.
2. Import at vercel.com.
3. Set all environment variables in the Vercel project settings.
4. Deploy — Vercel handles builds and CDN automatically.

Self-Hosted (Node.js + PM2)

pnpm build
pm2 start pnpm --name "blog-template" -- start

Run behind a reverse proxy (Nginx or Caddy) for SSL termination.

Docker

FROM node:20-alpine
WORKDIR /app
COPY . .
RUN npm install -g pnpm && pnpm install && pnpm build
EXPOSE 3000
CMD ["pnpm", "start"]

Credits