Skip to main content

​
Prerequisites

Before installing the web dashboard, ensure you have:

Node.js 20+

LTS version recommended for stability

pnpm or npm

Package manager (pnpm is recommended)

Supabase Project

Backend setup with database tables

Git

For cloning the repository

​
Installation Steps

1

Clone the Repository

First, clone the incidents-app repository:
git clone https://github.com/tuerre/incidents-app.git
cd incidents-app/web
2

Install Dependencies

Install the project dependencies using your preferred package manager:
pnpm install
The project uses pnpm by default. Check pnpm-lock.yaml in the repository.
3

Configure Environment Variables

Create a .env.local file in the web/ directory:
.env.local
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
Never commit .env.local to version control. Add it to .gitignore.
Get your Supabase credentials:
  1. Go to your Supabase Dashboard
  2. Select your project
  3. Navigate to Settings → API
  4. Copy the Project URL and anon/public key
4

Start Development Server

Run the Next.js development server:
pnpm dev
The dashboard will be available at http://localhost:3000
5

Verify Installation

Open your browser and navigate to http://localhost:3000. You should see the landing page.To access the dashboard:
  1. You’ll need admin credentials
  2. The auth flow redirects unauthenticated users
  3. Create an admin user in Supabase or use existing credentials

​
Project Structure

After installation, you’ll have this structure: 
web/
├── app/                      # Next.js App Router
│   ├── (dashboard)/          # Dashboard route group
│   │   └── dashboard/
│   │       ├── page.tsx      # Main dashboard
│   │       ├── layout.tsx    # Dashboard layout
│   │       ├── incidents/    # Incident management
│   │       ├── employees/    # User management
│   │       ├── analytics/    # Analytics pages
│   │       ├── areas/        # Area management
│   │       ├── rooms/        # Room management
│   │       └── sessions/     # Session management
│   ├── layout.tsx           # Root layout
│   ├── page.tsx             # Landing page
│   ├── globals.css          # Global styles
│   └── not-found.tsx        # 404 page
├── components/               # React components
│   ├── ui/                  # shadcn/ui components
│   ├── app-sidebar.tsx      # Navigation sidebar
│   ├── chart-area-interactive.tsx
│   ├── data-table.tsx
│   └── section-cards.tsx
├── lib/                      # Utilities
│   ├── supabase.ts          # Client-side Supabase
│   ├── supabase-server.ts   # Server-side Supabase
│   └── utils.ts             # Utility functions
├── hooks/                    # Custom React hooks
├── public/                   # Static assets
├── middleware.ts             # Auth middleware
├── components.json           # shadcn/ui config
├── next.config.ts           # Next.js config
├── package.json
├── tsconfig.json
└── tailwind.config.js       # Tailwind config

​
Development Workflow

​
Hot Module Replacement

Next.js provides fast refresh for instant feedback:
  • Edit any file in app/ or components/
  • Changes appear instantly without losing state
  • TypeScript errors show in the browser

​
TypeScript

The project uses TypeScript with strict mode: 
# Type checking
pnpm typecheck

# Or with npm
npm run typecheck

​
Linting

Run ESLint to check code quality: 
pnpm lint

​
Building for Production

Test a production build locally: 
pnpm build
pnpm start
The production server runs on http://localhost:3000

​
Troubleshooting

Change the port with the -p flag:
pnpm dev -p 3001
Or set the PORT environment variable:
PORT=3001 pnpm dev
Check your environment variables:
  1. Verify .env.local exists in the web/ directory
  2. Confirm NEXT_PUBLIC_SUPABASE_URL is correct
  3. Confirm NEXT_PUBLIC_SUPABASE_ANON_KEY is the anon/public key
  4. Restart the dev server after changing env vars
Environment variables with NEXT_PUBLIC_ prefix are exposed to the browser. Never use the service_role key here.
Clear caches and reinstall:
rm -rf node_modules .next
pnpm install
pnpm dev
This happens when middleware and auth state are out of sync:
  1. Clear browser cookies for localhost:3000
  2. Clear Next.js cache: rm -rf .next
  3. Verify middleware logic in middleware.ts
  4. Check Supabase auth settings
Ensure Tailwind CSS is properly configured:
  1. Check tailwind.config.js exists
  2. Verify @tailwind directives in globals.css
  3. Restart dev server
  4. Clear browser cache

​
Next Steps

Configuration

Configure the dashboard settings

Analytics

Explore analytics features

User Management

Manage employee accounts

Deployment

Deploy to production

Build docs developers (and LLMs) love

Get started for freeTalk to us