Law Firm Template

Overview

This is a professional, production-ready law firm website template built with the modern Next.js App Router. It ships with a fully-featured admin dashboard that lets you manage every piece of content — from attorney profiles and blog posts to site settings and SEO metadata — without ever touching code.

Requirements

Quick Start

1. Install dependencies

   npm install
   # or
   pnpm install

2. Configure environment variables

   Create a .env file at the project root. See Environment Variables for all required keys.

3. Create the first admin user

   Insert a user document into your MongoDB users collection with a bcrypt-hashed password:

   // In mongosh or MongoDB Compass:
   db.users.insertOne({
     name: "Admin",
     email: "admin@yourdomain.com",
     password: "<bcrypt-hashed-password>",
     role: "admin",
     createdAt: new Date(),
     updatedAt: new Date()
   })

4. Configure Cloudinary

   Start the dev server, log in at /admin/login, then go to Settings → Cloudinary and enter your credentials.

5. Start the development server

   npm run dev

   Site: http://localhost:3000  |  Admin: http://localhost:3000/admin/login

Available Scripts

Environment Variables

# ── Application ───────────────────────────────────────────
AUTH_TRUST_HOST="true"
NEXTAUTH_URL="http://localhost:3000"
NEXT_PUBLIC_BASE_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-strong-random-secret"

# ── Database ───────────────────────────────────────────────
MONGODB_URI="mongodb+srv://user:pass@cluster.mongodb.net/dbname?retryWrites=true&w=majority"

Tech Stack

Project Structure

Public Pages

Admin Dashboard

Access the admin panel at /admin/login. After successful login you are redirected to /admin/dashboard.

API — Authentication

Admin API routes require a valid JWT token in the Authorization header as Bearer <token>.

API — Dashboard

API — Attorneys

API — Awards

API — Blog Categories

API — Blogs

API — Banner

API — About Section

API — FAQ

API — Practice Areas

API — Services

API — Settings

API — Taglines

API — Testimonials

API — Public Endpoints

These endpoints are unauthenticated and used by the public-facing frontend. They only return records with status: true.

Database Schema

User

Attorney

Awards

Banner

Blog

Blog Category

FAQ

Practice Areas

Services

Settings

Taglines

Testimonials

About Section

Image Management — Cloudinary

All images in this template are stored and served via Cloudinary. The server stores only the Cloudinary public_id in MongoDB and constructs full URLs at query time using the configured secureUrlBase.

Configuration

After starting the dev server, go to Admin → Settings → Cloudinary and fill in:

Folder Structure in Cloudinary

{folder}/
├── attorneys/
├── awards/
├── blog/
├── practices/
└── settings/

Authentication

Admin Login (JWT)

The admin panel uses custom JWT-based authentication. On POST /api/admin/auth/login a signed JWT is returned and stored client-side. All admin API routes verify this token via the authenticate middleware.

Session Management (NextAuth)

Next-Auth v5 wraps the protected dashboard layout group (private) to manage session persistence across page navigations.

Creating the First Admin User

There is no sign-up page. You must insert the first admin user directly into MongoDB:

// Using mongosh
use your-database-name

db.users.insertOne({
  name: "Admin",
  email: "admin@yourdomain.com",
  password: "<bcrypt-hash-of-your-password>",
  role: "admin",
  createdAt: new Date(),
  updatedAt: new Date()
})

Generate a bcrypt hash in Node.js:

const bcrypt = require('bcrypt');
const hash = await bcrypt.hash('YourSecurePassword123!', 12);
 // paste this as the password value

Customization

Change Brand Colors

Update the color tokens in src/app/globals.css and extend the Tailwind theme in tailwind.config.js. All component color references use CSS custom properties for easy theming.

Change Logo / Favicon

Go to Admin → Settings → General and upload a new logo and favicon image.

Add Practice Areas

Go to Admin → Practice Areas → Create. Each practice area requires a title, slug (used as the URL path), three images, several description fields, and an expertise list. Setting status: true makes it appear in the site navigation automatically.

Update SEO

Go to Admin → Settings → Metadata to configure the site title, meta description, keywords, and Open Graph image used across all pages.

Modify Navigation Items

Navigation is dynamically generated from Practice Areas with status: true. To add or remove nav items, activate or deactivate the corresponding practice area.

Add New Blog Posts

Go to Admin → Blogs → Create. Write content using the built-in SunEditor WYSIWYG editor. Assign a category, reading time, and publish status.

Deployment

Vercel (Recommended)

1. Push to GitHub / GitLab / Bitbucket

   Push your repository to any Git provider.

2. Import in Vercel

   Go to vercel.com/new, import the repository, and select the Next.js framework preset.

3. Set environment variables

   Add all five environment variables in the Vercel project settings under Settings → Environment Variables.

4. Deploy

   Vercel will build and deploy automatically on every push to your main branch.

Self-Hosted (Railway, Render, VPS)

# Build and start
npm run build
npm run start

Production Environment Variables

AUTH_TRUST_HOST=true
NEXTAUTH_URL=https://yourdomain.com
NEXT_PUBLIC_BASE_URL=https://yourdomain.com
NEXTAUTH_SECRET=<strong-random-secret>
MONGODB_URI=<production-mongodb-connection-string>

Support

For questions, bug reports, or customization requests, please reach out via the support channel associated with your purchase.

• View this documentation online at /documentation
• Refer to public/sample-data/ for example data structures
• Check the README.md for a quick reference in markdown format