Introduction

Welcome to DBS (DB Studio Dashboard) — a production-ready Next.js 15 admin dashboard starter kit designed to give you a massive head start on any B2B application, internal tool, or SaaS platform.

DBS is opinionated by design. Every pattern — from API protection to form handling — has a single, recommended way to do it, so your team writes consistent code from day one.

What Is DBS?

DBS is a full-stack admin dashboard boilerplate that combines the best-in-class libraries into a cohesive, deeply integrated system. It ships with:

Authentication — Email/password, 2FA (TOTP), Passkeys (WebAuthn), and session management via Better Auth.
Authorization — A granular Role-Based Access Control (RBAC) system with dynamic permissions at both the UI and API level.
Real-time — Server-Sent Events (SSE) for live notifications, background task updates, and broadcast messages.
Background Tasks — A native async pattern (202 Accepted + webhook callback) that integrates with any queue provider.
Audit Logging — Every critical action is traceable with a built-in auditLogger.
Dynamic UI — A database-driven sidebar, permission-aware menus, and a stunning shadcn/ui + Tailwind design system.

🚀Getting Started 🔐Authentication 🛡️RBAC & Permissions 🧩UI Components ⚙️Background Tasks 🌐Real-time Broadcasts

Core Philosophy

Building a modern dashboard involves stitching together authentication, authorization, data fetching, form handling, real-time updates, and background jobs. DBS solves this by providing a unified, cohesive foundation:

Principle	What It Means
Secure by Default	Every API route uses `apiGuard`. Every page uses `RouteGuard`. Security is not an afterthought.
Single Source of Truth	Roles, permissions, and menus are seeded from one place and synced to the database.
Consistent Patterns	One way to fetch data (`useData`), one way to protect routes (`apiGuard`), one way to write forms.
Developer Experience	Fully typed TypeScript throughout. Auto-completing service layer. Standardized error/empty/loading states.

Tech Stack Overview

Framework & Runtime

Next.js 15 (App Router) — Server Components for performance, Client Components for interactivity, deployed on Vercel.

Authentication & Authorization

Better Auth — Handles sessions, email/password, 2FA, Passkeys, and OAuth.
Custom RBAC — Roles and permissions stored in PostgreSQL, checked at every API boundary and UI layer.

Database

PostgreSQL — Primary database.
Prisma ORM — Type-safe schema, migrations, and client singleton in src/lib/prisma.ts.

UI & Styling

shadcn/ui — Accessible, customizable component library.
Tailwind CSS — Utility-first styling.
Lucide React — Icon system used across the sidebar and UI components.

State & Data Fetching

SWR — Powers the useData, usePagination, and useDataTable custom hooks.
React Hook Form + Zod — Form validation with typed schema inference.

Communication

Resend — Transactional email via src/lib/email.ts.
Server-Sent Events — Real-time push to clients via /api/stream/events.

Ready to build your next big thing?

Start the Tutorial