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>
2.8 KiB
2.8 KiB
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 Turbopacknpm run build- Build the application for productionnpm run start- Start production servernpm run lint- Run ESLint for code quality checksnpm 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 routesapi/- Backend API endpoints for scanning, crawling, analysisdashboard/- Main dashboard pages and website managementauth/- Authentication pages
src/components/- React components organized by featurecore/- Core dashboard and competitor analysis componentsdashboard/- Website monitoring and metrics componentsui/- Reusable UI components (forms, feedback, data display)
src/contexts/- React contexts for auth and monitoring statesrc/services/- Business logic services for API callssrc/types/- TypeScript type definitionsscanner-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