Dennis
50e25e3ee8
Rename subdirectories for a cleaner single-repo layout: - website-monitoring-backend/ → backend/ - website-monitoring-frontend/ → frontend/ - website-monitoring-devops/ → devops/ Update all references in package.json scripts, CI workflows, docker-compose, pre-commit hooks, and documentation. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
68 lines
2.8 KiB
Markdown
68 lines
2.8 KiB
Markdown
# 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 |