Open-source admin dashboard starter. Production-ready Next.js 16 template with authentication, role-based access control, analytics, and a clean, extensible architecture. Clone, install, and start building.

• 🔐 Auth built-in — Login, register, forgot/reset password, session management via NextAuth.js v5
• 🌐 OAuth providers — Google + GitHub sign-in (optional, enable via env vars)
• ✅ Email verification — Toggle via VERIFY_EMAIL env var; disabled by default in dev, enforced in production
• 🛡️ RBAC — Admin, editor, viewer roles with permission-based access
• 📊 Charts & analytics — Live dashboard with Recharts: registration trends, role distribution, activity charts
• 📥 CSV export — Export user data to CSV with one click
• 🌗 Dark mode — System-aware theme with manual toggle
• 🧩 shadcn/ui — Beautiful, accessible components you own and customize
• 🗄️ SQLite zero-setup — No external database needed to run locally
• 📱 Responsive — Sidebar drawer on mobile, collapse on desktop
• ♿ Accessible — Keyboard navigation, focus trap, ARIA labels throughout
• ⚡ Rate limiting — Brute force protection on auth endpoints
• 🏗️ Feature-based architecture — Code organized by domain, not file type
• 🚀 Next.js 16 — App Router, Server Components, Turbopack, streaming

# Clone the repo
git clone https://github.com/wayosu/tecton.git
cd tecton

# Install dependencies
npm install

# Set up environment
cp .env.example .env
# Generate your own AUTH_SECRET:
#   openssl rand -base64 32

# (Optional) Skip email verification for local dev:
echo "VERIFY_EMAIL=false" >> .env

# Initialize the database & seed sample data
npx drizzle-kit push
npm run seed

# Start developing
npm run dev

Open http://localhost:3000 — you'll be redirected to login.

src/
├── app/                        # Next.js App Router
│   ├── (auth)/                 # Auth pages (login, register, password reset)
│   ├── (dashboard)/            # Protected dashboard routes
│   │   └── dashboard/          # Dashboard page with analytics tabs
│   └── api/                    # API routes (auth, users, export, verify-email)
├── features/                   # Domain logic by feature
│   ├── auth/                   # Auth components, hooks, login form
│   ├── users/                  # User management (table, CRUD, hooks)
│   └── dashboard/              # Dashboard widgets
│       ├── queries.ts          # Analytics SQL queries via Drizzle
│       └── components/         # Recharts components (Area, Bar, Pie, Sparkline)
├── components/                 # Shared components
│   ├── ui/                     # shadcn/ui components (button, card, tabs, etc.)
│   ├── layout/                 # Shell, sidebar, header, page-shell
│   └── shared/                 # StatusBadge, DataTable, etc.
├── config/                     # Navigation & app configuration
├── db/                         # Database schema (Drizzle ORM)
│   └── schema.ts               # Users, accounts, sessions, tokens, analytics_events
├── lib/                        # Utilities
│   ├── auth.ts                 # NextAuth.js configuration
│   ├── rbac.ts                 # Role-based access control
│   ├── db.ts                   # Database client
│   ├── rate-limit.ts           # Rate limiting helpers
│   └── utils.ts                # General utilities (cn, etc.)
├── drizzle/                    # Drizzle Kit generated migrations
└── scripts/
    └── seed.ts                 # Seed script (users + 708 analytics events)

npm run dev              # Start development server (Turbopack)
npm run build            # Production build
npm run lint             # Run ESLint
npm test                 # Run Vitest (22 tests)
npm run seed             # Seed database with sample users + analytics events

npx drizzle-kit generate # Generate new migration after schema changes
npx drizzle-kit push     # Push schema to database (create tables)
npx drizzle-kit migrate  # Apply pending migrations
npx drizzle-kit studio   # Open Drizzle Studio (GUI database browser)

All configuration is done via .env. Copy .env.example to get started.

# Required
AUTH_SECRET=your-secret-here    # Generate: openssl rand -base64 32

# Email Verification Policy
# Set to "false" to skip email verification (convenient for local dev)
# Default: true (production-safe)
VERIFY_EMAIL=false

# OAuth (optional — omit to use credentials-only auth)
# Google: https://console.cloud.google.com → APIs & Services → Credentials
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

# GitHub: https://github.com/settings/developers → OAuth Apps
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

Email verification is controlled entirely by the VERIFY_EMAIL environment variable:

In production, configure a real email service to deliver verification links. In development, the verification link is printed in the API response and also logged to the terminal.

# Run all tests
npm test

# Run with UI
npx vitest --ui

# Run specific test file
npx vitest run src/lib/rbac.test.ts

# Watch mode
npm test -- --watch

The test suite covers:

• ✅ RBAC permissions — 7 unit tests for role-based access
• ✅ User API — 11 integration tests (CRUD, validation, pagination)
• ✅ Sidebar — 4 component tests (collapse, mobile drawer, focus trap)

See CONTRIBUTING.md for detailed guidelines. All contributions welcome — from bug fixes to new features.

1. Fork the repository
2. Create a feature branch (git checkout -b feat/amazing-feature)
3. Make your changes
4. Run lint + tests (npm run lint && npm test && npm run build)
5. Commit with conventional commits (feat:, fix:, docs:, etc.)
6. Open a Pull Request

• Authentication (credentials + OAuth)
• Role-based access control (admin, editor, viewer)
• User management CRUD with TanStack Table
• CSV data export
• Forgot / Reset password
• Email verification (env-var toggle)
• Rate limiting on auth endpoints
• Responsive sidebar (mobile drawer + desktop collapse)
• Keyboard navigation & focus management
• Charts & analytics dashboard (Recharts)
• PostgreSQL / MySQL adapter
• E2E tests with Playwright
• Component documentation (Storybook)
• CLI scaffolding tool
• Multi-tenancy support

MIT © Wayosu