Admin Dashboard UI

A modern, reusable admin panel template built with Next.js 14 and NestJS. Features authentication, responsive sidebar layout, and a generic data table component with pagination and filtering.

Features

• Authentication: JWT-based login with protected routes
• Responsive Layout: Collapsible sidebar, topbar with user menu, and breadcrumbs
• Generic Data Table: Pagination, column visibility, search, and custom filters
• Sample Pages: Dashboard overview, Users management, and Audit Logs
• Dark Mode Ready: CSS variables for easy theming
• Docker Support: One-command deployment with Docker Compose

Tech Stack

Frontend

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS
• shadcn/ui components
• TanStack Table (React Table v8)
• Zustand (State Management)

Backend

• NestJS 10
• TypeORM
• PostgreSQL
• Passport JWT
• Swagger/OpenAPI

Quick Start

Using Docker (Recommended)

# Clone the repository
git clone https://github.com/yourusername/admin-dashboard-ui.git
cd admin-dashboard-ui

# Copy environment file
cp .env.example .env

# Start all services
docker compose up --build

The application will be available at:

• Frontend: http://localhost:3000
• Backend API: http://localhost:3001
• API Documentation: http://localhost:3001/api/docs

Demo Credentials

Email: admin@example.com
Password: admin123

Local Development

Prerequisites

• Node.js 20+
• PostgreSQL 16+

Backend Setup

cd backend

# Install dependencies
npm install

# Start PostgreSQL (or use Docker)
docker run -d --name postgres -e POSTGRES_PASSWORD=postgres -e POSTGRES_DB=admin_dashboard -p 5432:5432 postgres:16-alpine

# Start development server
npm run start:dev

Frontend Setup

cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

Project Structure

admin-dashboard-ui/
├── frontend/                   # Next.js frontend
│   ├── src/
│   │   ├── app/               # App Router pages
│   │   │   ├── login/         # Login page
│   │   │   └── dashboard/     # Protected dashboard pages
│   │   ├── components/
│   │   │   ├── ui/            # shadcn/ui components
│   │   │   ├── layout/        # Layout components
│   │   │   └── data-table/    # Generic table component
│   │   └── lib/               # Utilities and stores
│   └── Dockerfile
├── backend/                    # NestJS backend
│   ├── src/
│   │   ├── auth/              # Authentication module
│   │   ├── users/             # Users module
│   │   └── audit-logs/        # Audit logs module
│   └── Dockerfile
├── compose.yml                 # Docker Compose config
└── README.md

API Endpoints

Authentication

• POST /auth/login - User login
• GET /auth/me - Get current user

Users

• GET /users - List users (paginated)

Audit Logs

• GET /audit-logs - List audit logs (paginated)

All endpoints except /auth/login require Bearer token authentication.

Environment Variables

Variable	Description	Default
DB_HOST	PostgreSQL host	localhost
DB_PORT	PostgreSQL port	5432
DB_USER	PostgreSQL user	postgres
DB_PASSWORD	PostgreSQL password	postgres
DB_NAME	Database name	admin_dashboard
JWT_SECRET	JWT signing secret	super-secret-jwt-key-for-poc
PORT	Backend port	3001
CORS_ORIGIN	Allowed CORS origin	http://localhost:3000
NEXT_PUBLIC_API_URL	API URL for frontend	http://localhost:3001

License

MIT License - feel free to use this template for your projects.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.