# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Development Commands

- `npm run dev` - Start Next.js development server with Turbopack
- `npm run build` - Build the application for production 
- `npm run start` - Start production server
- `npm run lint` - Run ESLint for code quality checks
- `npm run dev:all` - Start both frontend and backend servers concurrently

## Architecture Overview

This is a website monitoring platform built with Next.js 15 (App Router) that analyzes website performance, SEO, and accessibility using Lighthouse scans.

### Core Technologies
- **Frontend**: Next.js 15 with App Router, React 19, TypeScript
- **UI**: Tailwind CSS with Shadcn/UI components
- **Database**: Supabase (PostgreSQL)
- **Authentication**: Supabase Auth
- **Charts**: Recharts and Chart.js
- **Web Scraping**: Puppeteer and Lighthouse integration
- **Backend Worker**: Dockerized Express server for scan processing

### Project Structure

- `src/app/` - Next.js App Router pages and API routes
  - `api/` - Backend API endpoints for scanning, crawling, analysis
  - `dashboard/` - Main dashboard pages and website management
  - `auth/` - Authentication pages
- `src/components/` - React components organized by feature
  - `core/` - Core dashboard and competitor analysis components
  - `dashboard/` - Website monitoring and metrics components  
  - `ui/` - Reusable UI components (forms, feedback, data display)
- `src/contexts/` - React contexts for auth and monitoring state
- `src/services/` - Business logic services for API calls
- `src/types/` - TypeScript type definitions
- `scanner-worker/` - Dockerized Express worker for Lighthouse scans

### Key Patterns

**Authentication Flow**: 
- Uses Supabase auth with custom AuthContext (`src/contexts/AuthContext.tsx`)
- Users are automatically assigned to organizations
- Route protection implemented in AuthContext

**Data Flow**:
- API routes in `src/app/api/` handle backend logic
- Services in `src/services/` manage API calls from frontend
- Supabase client configured in `src/lib/supabase.ts`

**Component Structure**:
- UI components use Shadcn/UI patterns with Tailwind CSS
- Dashboard components are organized by feature (dashboard/, monitoring/, etc.)
- Reusable components in `ui/` folder with consistent interfaces

**Scanning Architecture**:
- Frontend triggers scans via API routes
- Docker worker processes Lighthouse scans with Puppeteer
- Results stored in Supabase and displayed in dashboard

### Development Notes

- Uses Supabase for both authentication and database
- Scanner worker runs in Docker with Chromium for consistent Lighthouse results
- Components follow Shadcn/UI patterns and use class-variance-authority for styling
- Form validation uses react-hook-form with Zod schemas