Skip to content

Production-ready Next.js 16 boilerplate for multi-branch SaaS. Enterprise RBAC, audit logging, real-time updates, and hierarchical organization management. Built with React 19, Tailwind 4, Prisma, Supabase.

License

Notifications You must be signed in to change notification settings

aguswirajati/nextjs-multi-branch-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

59 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿข Next.js Multi-Branch Boilerplate

Next.js React TypeScript Prisma Supabase Tailwind CSS License: MIT

Production-ready Next.js 16 boilerplate for building multi-branch SaaS applications. Enterprise-grade RBAC, audit logging, real-time collaboration, and hierarchical organization managementโ€”all in one powerful starter template.

Launch your multi-location business faster. Skip months of foundational work and start building features that matter.


๐Ÿ“Š At a Glance

Category Features
๐Ÿ” Auth & Security Supabase Auth โ€ข Row-Level Security โ€ข RBAC (96 permissions) โ€ข Password Reset โ€ข Email Notifications
๐Ÿ—๏ธ Architecture Multi-branch Hierarchy โ€ข Soft Delete Pattern โ€ข Audit Trail (8 tables) โ€ข Server Components โ€ข Server Actions
โšก Real-time Live Data Sync โ€ข WebSocket Updates โ€ข Collaborative Editing โ€ข Toast Notifications
๐Ÿ“ File Management Avatar Upload โ€ข Logo Upload โ€ข Supabase Storage โ€ข Image Optimization
๐Ÿงช Testing Playwright E2E (16 tests) โ€ข Vitest Unit Tests โ€ข Coverage Reports โ€ข CI/CD Ready
๐ŸŽจ UI/UX Dark/Light Mode โ€ข Responsive Design โ€ข shadcn/ui โ€ข Tailwind CSS 4 โ€ข Professional Themes
๐Ÿ“ง Email Transactional Emails โ€ข React Email Templates โ€ข Welcome โ€ข Password Reset โ€ข Role Changes
๐Ÿ› ๏ธ Developer Tools Permission Matrix โ€ข Sample Data Seeding โ€ข Database Reset โ€ข TypeScript โ€ข ESLint

๐ŸŽฏ The Problem

Building a multi-location SaaS application requires solving the same foundational challenges every time:

  • Complex RBAC: Managing permissions across organizational hierarchies (HQ โ†’ Branch โ†’ Sub-branch) is tedious and error-prone
  • Audit Requirements: Compliance and business needs demand complete tracking of who did what and when
  • Real-time Collaboration: Modern users expect instant updates without manual refreshes
  • Security First: Implementing proper RLS, authentication, and authorization takes weeks
  • Boilerplate Fatigue: Setting up auth, file uploads, email, testing infrastructure eats 40-60% of early development time

Most teams spend 2-3 months on these foundations before building actual business features.


โœจ The Solution

Next.js Multi-Branch Boilerplate provides everything you need to launch a production-ready multi-location application in days, not months.

โฑ๏ธ Time Savings Breakdown

Task Typical Time With Boilerplate Saved
Auth setup (Supabase + RLS) 1-2 weeks 5 minutes ~10 days
RBAC system (6 roles, 96 permissions) 3-4 weeks Pre-configured ~21 days
Audit logging (8 tables, soft delete) 1-2 weeks Built-in ~10 days
Real-time updates infrastructure 1 week Hooks ready ~5 days
File upload system 3-5 days Integrated ~4 days
Email system (templates + sending) 1 week 4 templates ready ~5 days
E2E + Unit testing setup 1 week Configured ~5 days
Total saved ~60 days ~30 minutes Save 2-3 months

๐ŸŽ What You Get

  • Complete authentication flow with Supabase Auth
  • 6 pre-configured roles (Super Admin โ†’ Regular User) with 96 granular permissions
  • Hierarchical branch system supporting HQ โ†’ Branch โ†’ Sub-branch organizational structures
  • Complete audit trail with soft deletes across all entities
  • Real-time collaboration with WebSocket-powered live updates
  • File upload system for avatars and logos with Supabase Storage
  • Email notification system with 4 professional React Email templates
  • E2E test suite with 16 Playwright tests covering major workflows
  • Developer admin tools for permission management and data seeding
  • Modern UI with dark/light themes and responsive design

๐Ÿš€ Features Deep Dive

1. ๐Ÿ” Enterprise Authentication & RBAC

96 Granular Permissions organized into 4 scopes:

  • CREATE: Control who can create new entities (users, branches, tickets, etc.)
  • READ: Manage data visibility across organizational hierarchy
  • UPDATE: Fine-tune edit permissions for different user levels
  • DELETE: Secure deletion rights with soft-delete audit trail

6 Role Levels with inheritance:

1. SUPER_ADMIN    โ†’ Full system access (level 100)
2. GENERAL_MANAGER โ†’ Cross-branch management (level 80)
3. BRANCH_MANAGER  โ†’ Branch administration (level 60)
4. STAFF_ADMIN     โ†’ Branch staff management (level 40)
5. TECHNICIAN      โ†’ Field operations (level 20)
6. USER            โ†’ Basic access (level 10)

Features:

  • Row-Level Security (RLS) at database layer
  • Branch-scoped data access (users only see their branch hierarchy)
  • Permission inheritance (higher roles include lower role permissions)
  • Dynamic permission checking in UI and server actions
  • Email notifications on role changes

2. ๐ŸŒณ Multi-Branch Hierarchy Management

Organizational Structure:

Headquarters (HQ)
โ”œโ”€โ”€ Branch A (BRANCH)
โ”‚   โ”œโ”€โ”€ Sub-Branch A1 (SUB_BRANCH)
โ”‚   โ””โ”€โ”€ Sub-Branch A2 (SUB_BRANCH)
โ”œโ”€โ”€ Branch B (BRANCH)
โ”‚   โ””โ”€โ”€ Sub-Branch B1 (SUB_BRANCH)
โ””โ”€โ”€ Branch C (BRANCH)

Features:

  • Unlimited depth (HQ โ†’ Branch โ†’ Sub-branch โ†’ Sub-sub-branch...)
  • Cascade permissions (managers see their branch + all children)
  • Location-based filtering (users, tickets, inventory all branch-scoped)
  • Branch logos with Supabase Storage integration
  • Hierarchical visualization with collapsible tree UI
  • Soft delete protection (can't delete branch with active users/sub-branches)

3. ๐Ÿ“Š Complete Audit Trail System

ERP-Integration Ready with who/when/what tracking on 8 core tables:

Table Audit Fields
users createdBy, createdAt, updatedBy, updatedAt, deletedBy, deletedAt
profiles createdBy, createdAt, updatedBy, updatedAt, deletedBy, deletedAt
branches createdBy, createdAt, updatedBy, updatedAt, deletedBy, deletedAt
roles createdBy, createdAt, updatedBy, updatedAt, deletedBy, deletedAt
permissions createdBy, createdAt, updatedBy, updatedAt, deletedBy, deletedAt
role_permissions createdBy, createdAt, updatedBy, updatedAt, deletedBy, deletedAt
user_roles createdBy, createdAt, updatedBy, updatedAt, deletedBy, deletedAt
audit_logs userId, action, resource, timestamp, metadata

Features:

  • Soft delete pattern (data never truly deleted, only marked)
  • Complete history (every create/update/delete tracked with user + timestamp)
  • Audit log table for sensitive operations (login, permission changes, etc.)
  • Compliance ready (SOC 2, HIPAA, GDPR tracking capabilities)
  • Restore functionality (can undo soft deletes)
  • Prisma helpers (createAuditData, updateAuditData, softDelete)

4. ๐Ÿ”„ Real-time Collaboration

Live Data Synchronization powered by Supabase Realtime:

Implemented Hooks:

// Users table real-time updates
useRealtimeUsers(onInsert, onUpdate, onDelete)

// Branches table real-time updates
useRealtimeBranches(onInsert, onUpdate, onDelete)

Features:

  • Instant updates across all connected clients
  • Toast notifications on CREATE/UPDATE/DELETE operations
  • Automatic re-fetch to sync local state
  • Optimistic updates for immediate UI feedback
  • Multi-user collaboration (see changes as they happen)
  • WebSocket connection (no polling overhead)
  • Automatic cleanup on component unmount

Example Use Cases:

  • Admin creates user โ†’ All users see new entry instantly
  • Manager updates branch โ†’ Everyone sees changes live
  • User gets role changed โ†’ Notification appears immediately

5. ๐Ÿ“ File Upload & Storage

Supabase Storage Integration with security and optimization:

Supported Uploads:

  • User Avatars: Profile pictures (max 2MB, JPG/PNG/WebP)
  • Branch Logos: Organization branding (max 2MB, JPG/PNG/WebP/SVG)

Features:

  • Client-side validation (file type, size)
  • Server-side validation (double-check security)
  • Automatic image optimization (resize, compress)
  • Storage buckets with RLS policies
  • Public URLs for avatars/logos
  • Replace functionality (update without breaking references)
  • Storage cleanup on user/branch deletion

Security:

  • RLS policies ensure users can only upload to their own profile
  • File type whitelist prevents malicious uploads
  • Size limits prevent abuse
  • Signed URLs for temporary access

6. ๐Ÿ“ง Email Notification System

Transactional Emails with React Email + Resend:

4 Professional Templates:

  1. Welcome Email โ†’ Sent on user creation
  2. Password Reset Email โ†’ Forgot password flow
  3. Role Changed Email โ†’ Role assignment updates (shows added/removed roles)
  4. Account Status Changed Email โ†’ Account activation/suspension

Features:

  • React Email for template building (component-based)
  • Resend for reliable delivery (99%+ deliverability)
  • Professional design with gradient headers, badges, responsive layout
  • Non-blocking sends (email failures don't break user operations)
  • Smart change detection (only sends if data actually changed)
  • Customizable support email in templates
  • HTML + plain text versions

Developer Experience:

// Simple API
await sendWelcomeEmail({ to, userName, userEmail })
await sendRoleChangedEmail({ to, userName, oldRoles, newRoles, changedBy })
await sendAccountStatusChangedEmail({ to, userName, newStatus, changedBy })

7. ๐Ÿงช Comprehensive Testing Infrastructure

E2E Testing with Playwright:

16 Test Cases across 3 suites:

  • Audit Logging (7 tests): Admin access, CRUD logging, filtering, search, pagination
  • File Upload (5 tests): Validation, avatar upload, logo upload, replace functionality
  • Real-time Updates (4 tests): Multi-user sync, create/update/delete events, rapid updates

Unit Testing with Vitest:

  • React Testing Library integration
  • Component unit tests
  • Utility function tests
  • Coverage reports with --coverage flag

Features:

  • Multi-browser support (Chromium, Firefox, WebKit)
  • Parallel execution for faster test runs
  • Video recording on failures
  • Screenshot capture for debugging
  • Test fixtures for auth and database state
  • CI/CD ready (GitHub Actions compatible)

Test Commands:

npm test              # Run all E2E tests
npm run test:ui       # Interactive UI mode
npm run test:headed   # Watch tests run in browser
npm run test:debug    # Debug mode with pauses

npm run test:unit              # Run unit tests
npm run test:unit:watch        # Watch mode
npm run test:unit:coverage     # Generate coverage report

8. ๐Ÿ› ๏ธ Admin Developer Tools

Developer Control Panel at /admin/dev-tools (Super Admin only):

3 Powerful Tools:

Permission Matrix

  • Visual grid (roles ร— permissions)
  • Toggle switches for each permission
  • Grouped by resource (users, branches, roles, etc.)
  • Save changes with audit logging
  • Real-time validation

Sample Data Seeding

10 Test Users with realistic patterns:

gm@test.com           โ†’ General Manager
bm_mlg@test.com       โ†’ Branch Manager (Malang)
bm_jog@test.com       โ†’ Branch Manager (Jogja)
sa_mlg@test.com       โ†’ Staff Admin (Malang)
tech_mlg@test.com     โ†’ Technician (Malang)
tech_jog@test.com     โ†’ Technician (Jogja)
user_mlg@test.com     โ†’ Regular User (Malang)
user_jog@test.com     โ†’ Regular User (Jogja)

3 Test Branches: Malang (HQ), Jogja (Branch), Jogja Sub (Sub-branch) All passwords: test1234

Database Reset

  • Deletes all test data
  • Preserves Super Admin + HQ branch
  • Type RESET to confirm (safety check)
  • Logs all deletions in audit trail

Safety Features:

  • Super Admin access only
  • Type-to-confirm for destructive actions
  • Audit logging on all operations
  • Clear warning messages

๐Ÿ› ๏ธ Tech Stack

Frontend

  • Next.js 16 - App Router, Server Components, Server Actions, React 19
  • TypeScript 5 - Type safety and better DX
  • Tailwind CSS 4 - Utility-first styling (latest version)
  • shadcn/ui - Accessible component library built on Radix UI
  • Lucide React - Beautiful icon library
  • React Hook Form - Performant form handling with validation
  • Zod 4 - Schema validation for forms and APIs
  • TanStack Query - Server state management and caching
  • next-themes - Dark/light mode with system preference support

Backend

  • Prisma 6 - Type-safe ORM with PostgreSQL
  • Supabase Auth - Authentication and user management
  • Supabase Storage - File storage with RLS
  • Supabase Realtime - WebSocket-based live updates
  • bcrypt - Password hashing (via Supabase)
  • Row-Level Security (RLS) - Database-level access control

Email & Communication

  • Resend - Transactional email delivery
  • React Email - Component-based email templates
  • Sonner - Toast notifications

DevOps & Testing

  • Playwright - E2E testing framework
  • Vitest - Unit testing with React Testing Library
  • ESLint 9 - Code linting with Next.js config
  • Prettier - Code formatting with Tailwind plugin
  • Husky - Git hooks for pre-commit checks
  • lint-staged - Run linters on staged files
  • GitHub Actions - CI/CD ready

Developer Experience

  • tsx - TypeScript execution for scripts and seeding
  • Prisma Studio - Visual database browser
  • dotenv - Environment variable management
  • TypeScript strict mode for maximum type safety

๐Ÿš€ Quick Start

Prerequisites

  • Node.js 18+ (20 recommended)
  • npm or pnpm (pnpm recommended for speed)
  • PostgreSQL database (or Supabase project)
  • Git for version control

5-Minute Setup

1๏ธโƒฃ Clone and Install

# Clone the repository
git clone https://github.com/aguswirajati/nextjs-multi-branch-boilerplate.git
cd nextjs-multi-branch-boilerplate

# Install dependencies (faster with pnpm)
pnpm install
# or npm install

2๏ธโƒฃ Setup Environment Variables

# Copy the environment template
cp .env.example .env

Edit .env and configure:

# Database (Supabase or local PostgreSQL)
DATABASE_URL="postgresql://postgres:postgres@127.0.0.1:54322/postgres"

# Supabase (get from https://app.supabase.com โ†’ Project Settings โ†’ API)
NEXT_PUBLIC_SUPABASE_URL="https://your-project.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="your-anon-key"
SUPABASE_SERVICE_ROLE_KEY="your-service-role-key"

# App URL (for email links)
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# Email (Resend - get from https://resend.com/api-keys)
RESEND_API_KEY="re_..."
RESEND_FROM_EMAIL="onboarding@resend.dev"

3๏ธโƒฃ Setup Database

# Generate Prisma client
npx prisma generate

# Run database migrations
npx prisma migrate dev

# Seed initial data (creates Super Admin + HQ)
npx prisma db seed

Default Super Admin credentials:

  • Email: admin@repairshop.com
  • Password: Admin123!

4๏ธโƒฃ Run Development Server

npm run dev
# or pnpm dev

Open http://localhost:3000 and login with Super Admin credentials.

5๏ธโƒฃ Explore Admin Dev Tools (Optional)

  1. Login as Super Admin
  2. Navigate to /admin/dev-tools (orange "Dev Tools" link in nav)
  3. Seed Sample Data โ†’ Click "Generate Sample Data"
  4. Explore Permission Matrix โ†’ See RBAC configuration
  5. Test with different user roles (see seeded users in Database Reset tab)

๐Ÿ”ง Common Setup Issues

Issue: Database connection fails

Problem: Error: P1001: Can't reach database server

Solution:

# Check if PostgreSQL is running
psql -U postgres

# Or start Supabase local instance
supabase start

# Update DATABASE_URL in .env to match your setup

Issue: Supabase auth errors

Problem: Invalid API key or auth not working

Solution:

  1. Verify Supabase credentials in .env
  2. Ensure you're using anon key for NEXT_PUBLIC_SUPABASE_ANON_KEY
  3. Use service role key for SUPABASE_SERVICE_ROLE_KEY
  4. Check RLS policies are created (see prisma/migrations)

Issue: Email not sending

Problem: Welcome emails not arriving

Solution:

  1. Verify RESEND_API_KEY in .env (get from resend.com)
  2. Check RESEND_FROM_EMAIL is verified domain or use onboarding@resend.dev for testing
  3. Check console for email errors (emails are non-blocking, won't break user creation)

Issue: Build fails with TypeScript errors

Problem: Build errors on npm run build

Solution:

# Clear Next.js cache
rm -rf .next

# Regenerate Prisma client
npx prisma generate

# Try build again
npm run build

๐Ÿ“œ Available Scripts

# Development
npm run dev                    # Start dev server (localhost:3000)
npm run build                  # Build for production
npm start                      # Start production server

# Database
npx prisma generate            # Generate Prisma client
npx prisma migrate dev         # Run migrations
npx prisma db seed             # Seed initial data
npx prisma studio              # Open Prisma Studio (GUI)

# Testing
npm test                       # Run E2E tests (Playwright)
npm run test:ui                # E2E tests in UI mode
npm run test:headed            # E2E tests in headed browser
npm run test:debug             # Debug E2E tests

npm run test:unit              # Run unit tests (Vitest)
npm run test:unit:watch        # Unit tests in watch mode
npm run test:unit:ui           # Unit tests in UI mode
npm run test:unit:coverage     # Generate coverage report

# Code Quality
npm run lint                   # Run ESLint
npm run format                 # Format code with Prettier
npm run format:check           # Check code formatting

# Custom Scripts
npm run workflow               # Run custom workflow script

๐Ÿ“ Project Structure

nextjs-multi-branch-boilerplate/
โ”œโ”€โ”€ app/                          # Next.js App Router
โ”‚   โ”œโ”€โ”€ (auth)/                   # Auth routes (login, register, etc.)
โ”‚   โ”œโ”€โ”€ (dashboard)/              # Protected dashboard routes
โ”‚   โ”‚   โ”œโ”€โ”€ admin/                # Admin-only routes
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ users/            # User management
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ branches/         # Branch management
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ audit-logs/       # Audit log viewer
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ dev-tools/        # Developer tools (Super Admin only)
โ”‚   โ”‚   โ””โ”€โ”€ dashboard/            # Dashboard home (stats, activity)
โ”‚   โ”œโ”€โ”€ layout.tsx                # Root layout
โ”‚   โ””โ”€โ”€ page.tsx                  # Landing page
โ”‚
โ”œโ”€โ”€ features/                     # Feature modules (domain-driven design)
โ”‚   โ”œโ”€โ”€ auth/                     # Authentication
โ”‚   โ”‚   โ”œโ”€โ”€ actions/              # Server actions (login, logout, register)
โ”‚   โ”‚   โ”œโ”€โ”€ components/           # Auth forms and UI
โ”‚   โ”‚   โ””โ”€โ”€ utils/                # Auth helpers
โ”‚   โ”œโ”€โ”€ users/                    # User management
โ”‚   โ”‚   โ”œโ”€โ”€ actions/              # User CRUD actions
โ”‚   โ”‚   โ”œโ”€โ”€ components/           # User table, forms, detail view
โ”‚   โ”‚   โ”œโ”€โ”€ services/             # User business logic
โ”‚   โ”‚   โ””โ”€โ”€ types/                # User TypeScript types
โ”‚   โ”œโ”€โ”€ branches/                 # Branch management
โ”‚   โ”‚   โ”œโ”€โ”€ actions/              # Branch CRUD actions
โ”‚   โ”‚   โ”œโ”€โ”€ components/           # Branch hierarchy tree, forms
โ”‚   โ”‚   โ”œโ”€โ”€ services/             # Branch business logic
โ”‚   โ”‚   โ””โ”€โ”€ types/                # Branch TypeScript types
โ”‚   โ”œโ”€โ”€ audit/                    # Audit logging
โ”‚   โ”‚   โ”œโ”€โ”€ actions/              # Audit log retrieval
โ”‚   โ”‚   โ”œโ”€โ”€ components/           # Audit log table and filters
โ”‚   โ”‚   โ””โ”€โ”€ services/             # Audit log services
โ”‚   โ”œโ”€โ”€ admin/                    # Admin tools
โ”‚   โ”‚   โ”œโ”€โ”€ actions/              # Dev tools actions
โ”‚   โ”‚   โ””โ”€โ”€ components/           # Permission matrix, data seeding
โ”‚   โ””โ”€โ”€ dashboard/                # Dashboard widgets
โ”‚       โ”œโ”€โ”€ actions/              # Dashboard data actions
โ”‚       โ”œโ”€โ”€ components/           # Stats cards, activity feed
โ”‚       โ””โ”€โ”€ services/             # Dashboard services
โ”‚
โ”œโ”€โ”€ lib/                          # Shared utilities and configuration
โ”‚   โ”œโ”€โ”€ supabase/                 # Supabase client (server + client)
โ”‚   โ”œโ”€โ”€ prisma/                   # Prisma client instance
โ”‚   โ”œโ”€โ”€ rbac/                     # RBAC utilities (permission checking)
โ”‚   โ”œโ”€โ”€ email/                    # Email sending and templates
โ”‚   โ”‚   โ”œโ”€โ”€ templates/            # React Email templates
โ”‚   โ”‚   โ””โ”€โ”€ send-email.ts         # Email sending functions
โ”‚   โ”œโ”€โ”€ validation/               # Zod schemas for forms and APIs
โ”‚   โ”œโ”€โ”€ utils/                    # Generic utilities
โ”‚   โ”‚   โ”œโ”€โ”€ prisma-helpers.ts     # Audit trail helpers
โ”‚   โ”‚   โ””โ”€โ”€ cn.ts                 # Class name utility
โ”‚   โ”œโ”€โ”€ hooks/                    # React hooks
โ”‚   โ”‚   โ”œโ”€โ”€ useRealtimeUsers.ts   # Real-time user updates
โ”‚   โ”‚   โ””โ”€โ”€ useRealtimeBranches.ts # Real-time branch updates
โ”‚   โ””โ”€โ”€ generated/                # Prisma generated types
โ”‚
โ”œโ”€โ”€ components/                   # Reusable UI components
โ”‚   โ”œโ”€โ”€ ui/                       # shadcn/ui components (button, input, etc.)
โ”‚   โ”œโ”€โ”€ layout/                   # Layout components (nav, sidebar)
โ”‚   โ”œโ”€โ”€ theme/                    # Theme provider and toggle
โ”‚   โ””โ”€โ”€ providers/                # React context providers
โ”‚
โ”œโ”€โ”€ prisma/                       # Database
โ”‚   โ”œโ”€โ”€ schema.prisma             # Prisma schema (8 tables + RLS)
โ”‚   โ”œโ”€โ”€ migrations/               # Database migration history
โ”‚   โ””โ”€โ”€ seed.ts                   # Seed script (Super Admin + HQ)
โ”‚
โ”œโ”€โ”€ tests/                        # E2E tests
โ”‚   โ”œโ”€โ”€ helpers/                  # Test utilities (auth helper)
โ”‚   โ”œโ”€โ”€ audit-logging.spec.ts     # Audit logging tests (7 tests)
โ”‚   โ”œโ”€โ”€ file-upload.spec.ts       # File upload tests (5 tests)
โ”‚   โ””โ”€โ”€ realtime-updates.spec.ts  # Real-time tests (4 tests)
โ”‚
โ”œโ”€โ”€ docs/                         # Documentation
โ”‚   โ”œโ”€โ”€ ARCHITECTURE.md           # System architecture
โ”‚   โ”œโ”€โ”€ API.md                    # API reference
โ”‚   โ”œโ”€โ”€ SECURITY.md               # Security guide
โ”‚   โ”œโ”€โ”€ DEPLOYMENT.md             # Deployment guide
โ”‚   โ””โ”€โ”€ CODE_STYLE.md             # Code conventions
โ”‚
โ”œโ”€โ”€ .env.example                  # Environment variable template
โ”œโ”€โ”€ .eslintrc.json                # ESLint configuration
โ”œโ”€โ”€ .prettierrc                   # Prettier configuration
โ”œโ”€โ”€ playwright.config.ts          # Playwright E2E test config
โ”œโ”€โ”€ vitest.config.ts              # Vitest unit test config
โ”œโ”€โ”€ tailwind.config.ts            # Tailwind CSS configuration
โ”œโ”€โ”€ tsconfig.json                 # TypeScript configuration
โ””โ”€โ”€ package.json                  # Dependencies and scripts

๐Ÿ’ผ Use Cases

This boilerplate is perfect for:

1. ๐Ÿช Retail Chain Management

Scenario: Retail company with HQ, 20 regional branches, and 100+ sub-stores

How it helps:

  • Branch hierarchy maps to physical locations
  • Regional managers see their entire region (cascade permissions)
  • Store managers see only their store
  • Inventory, sales, staff all branch-scoped
  • Real-time updates across locations

2. ๐Ÿฅ Healthcare Network

Scenario: Hospital network with central admin, regional hospitals, and clinics

How it helps:

  • RBAC controls who accesses patient data
  • Audit trail for HIPAA compliance
  • Branch-scoped patient records
  • Role-based access (doctors, nurses, admin)
  • Email notifications for critical updates

3. ๐ŸŽ“ Education Management System

Scenario: University with main campus, satellite campuses, and departments

How it helps:

  • Multi-campus organization structure
  • Role hierarchy (admin, dean, faculty, student)
  • Audit trail for grade changes
  • Real-time enrollment updates
  • Email notifications for announcements

4. ๐Ÿข Enterprise SaaS Platform

Scenario: B2B SaaS with multiple customer organizations

How it helps:

  • Each customer = HQ branch
  • Customers manage their own sub-branches
  • RBAC isolates customer data
  • Audit trail for compliance (SOC 2, ISO)
  • Real-time collaboration within organization

5. ๐Ÿšš Logistics & Delivery Network

Scenario: Delivery company with warehouses, distribution centers, and hubs

How it helps:

  • Location-based order routing
  • Branch-scoped driver assignments
  • Real-time delivery status updates
  • Hierarchical reporting (hub โ†’ region โ†’ HQ)
  • Email notifications for delivery events

6. ๐Ÿ—๏ธ Construction Project Management

Scenario: Construction firm with multiple ongoing projects and sites

How it helps:

  • Project = branch, sites = sub-branches
  • Role-based access (project manager, foreman, worker)
  • Audit trail for change orders
  • Real-time progress updates
  • File uploads for blueprints/photos

๐Ÿ“š Documentation Hub

Core Documentation

Deployment & Operations

Development

Getting Help


๐Ÿš€ Deployment

Deploy to Vercel (Recommended)

One-Click Deploy:

Deploy with Vercel

Manual Deployment:

  1. Push to GitHub:

    git remote add origin https://github.com/yourusername/your-repo.git
    git push -u origin main
  2. Deploy to Vercel:

    • Go to vercel.com
    • Click "Import Project"
    • Select your GitHub repository
    • Add environment variables (all values from .env)
    • Click "Deploy"
  3. Setup Supabase Production:

    • Create production project at app.supabase.com
    • Run migrations: npx prisma migrate deploy
    • Update Vercel environment variables with production Supabase credentials
  4. Configure Email:

    • Get production Resend API key
    • Update RESEND_FROM_EMAIL with verified domain
    • Update Vercel environment variables

See full deployment guide: docs/DEPLOYMENT.md


๐Ÿค Contributing

We welcome contributions from the community! Whether it's bug fixes, new features, or documentation improvementsโ€”all contributions are appreciated.

How to Contribute

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Make your changes (follow code style guide)
  4. Run tests (npm test and npm run test:unit)
  5. Format code (npm run format)
  6. Commit your changes (git commit -m 'feat: add amazing feature')
  7. Push to branch (git push origin feature/amazing-feature)
  8. Open a Pull Request

Commit Convention

We use Conventional Commits:

feat: Add new feature
fix: Fix bug
docs: Update documentation
style: Code style changes (formatting)
refactor: Code refactoring
test: Add or update tests
chore: Maintenance tasks

Development Guidelines

  • Write TypeScript with strict type checking
  • Add tests for new features
  • Update documentation for breaking changes
  • Follow existing code patterns and architecture
  • Use Prettier for formatting
  • Run npm run lint before committing

๐Ÿ—บ๏ธ Roadmap

โœ… Completed (v1.0.0)

  • Multi-branch hierarchy system
  • Enterprise RBAC (96 permissions)
  • Complete audit trail (8 tables)
  • Real-time collaboration
  • File upload system
  • Email notification system
  • E2E + Unit testing
  • Admin developer tools
  • Dark/light theme
  • Comprehensive documentation

๐Ÿšง In Progress

  • API rate limiting improvements
  • Advanced audit log filtering
  • Email digest notifications

๐Ÿ”ฎ Planned (v1.1.0)

  • Multi-tenancy support (optional mode)
  • Advanced reporting dashboard
  • Export data (CSV, Excel, PDF)
  • Two-factor authentication (2FA)
  • API key management
  • Webhook system
  • Mobile-responsive improvements
  • Notification preferences UI

๐Ÿ’ก Future Considerations

  • GraphQL API option
  • Mobile app (React Native)
  • Advanced caching strategies
  • Internationalization (i18n)
  • Custom branding per branch
  • Integration marketplace

Want to influence the roadmap? Open a discussion or vote on existing feature requests!


๐Ÿ“„ License

This project is licensed under the MIT License. See LICENSE file for details.

TL;DR: You can use this boilerplate for personal or commercial projects, modify it, and distribute it freely. Attribution appreciated but not required.


๐Ÿ‘ฅ Credits

Created by

Built With

Special Thanks

  • Vercel team for Next.js
  • Supabase team for amazing BaaS platform
  • shadcn for the beautiful UI components
  • Open source community for all the amazing tools

๐Ÿ”— Links


Built with โค๏ธ using Next.js 16 โ€ข React 19 โ€ข TypeScript โ€ข Prisma โ€ข Supabase โ€ข Tailwind CSS

โญ Star this repo if you find it useful!

Report Bug โ€ข Request Feature โ€ข Documentation

About

Production-ready Next.js 16 boilerplate for multi-branch SaaS. Enterprise RBAC, audit logging, real-time updates, and hierarchical organization management. Built with React 19, Tailwind 4, Prisma, Supabase.

Topics

Resources

License

Contributing

Security policy

Stars

Watchers

Forks

Packages

No packages published