eedb049bab
Next.js 16 app with full CRUD lead management: - REST API (/api/leads) with GET (pagination), POST, PUT, DELETE (soft delete) - Zod validation (server + client), Supabase (PostgreSQL) - Responsive UI: leads table (desktop) + cards (mobile), modal form, toast notifications - 43 tests (Vitest + React Testing Library): validation, components, pagination - Docker setup (multi-stage build, health check) - Supabase migration + 15 seed leads - Documentation (CLAUDE.md, README, API docs) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2.8 KiB
2.8 KiB
FitCoach Pro - Lead-Verwaltung
Lead-Erfassung und Verwaltung fuer FitCoach Pro, ein Online-Fitness-Coaching-Business.
Features
- Lead-Liste mit Pagination (Desktop-Tabelle + Mobile-Cards)
- Lead erstellen, bearbeiten und loeschen (Soft Delete)
- Formular-Validierung (Client + Server)
- Responsive Design (Mobile First)
- REST API mit vollstaendigem CRUD
- Dark Mode Support
Tech Stack
- Next.js 16 (App Router, TypeScript strict)
- Tailwind CSS 4
- Supabase (PostgreSQL)
- Zod 4 (Validierung)
- Vitest + React Testing Library (43 Tests)
- Docker (Multi-Stage Build)
Setup
Voraussetzungen
- Node.js 22+
- pnpm 10+
- Docker Desktop (optional)
- Supabase Account (kostenlos)
1. Repository klonen
git clone <repo-url>
cd fitcoachpro
2. Dependencies installieren
pnpm install
3. Umgebungsvariablen konfigurieren
cp .env.example .env
Trage deine Supabase-Credentials in .env ein:
NEXT_PUBLIC_SUPABASE_URL- Supabase Project URLNEXT_PUBLIC_SUPABASE_ANON_KEY- Supabase Anon KeySUPABASE_SERVICE_ROLE_KEY- Supabase Service Role Key (nur serverseitig!)
4. Datenbank einrichten
Fuehre die SQL-Migration in deinem Supabase SQL Editor aus:
supabase/migrations/001_create_leads_table.sql
Optional Seed-Daten laden:
supabase/seed.sql
5. Starten
# Entwicklungsserver
pnpm dev
# Oder via Docker
docker compose up --build
App laeuft auf http://localhost:3000
Befehle
| Befehl | Beschreibung |
|---|---|
pnpm dev |
Entwicklungsserver starten |
pnpm build |
Production Build |
pnpm test |
Tests ausfuehren |
pnpm test:watch |
Tests im Watch-Modus |
pnpm test:coverage |
Tests mit Coverage-Report |
pnpm lint |
ESLint ausfuehren |
docker compose up --build |
Docker-Container starten |
API
Vollstaendige API-Dokumentation: docs/API.md
| Method | Endpoint | Beschreibung |
|---|---|---|
| GET | /api/leads?page=1&limit=10 |
Leads mit Pagination |
| POST | /api/leads |
Neuen Lead erstellen |
| GET | /api/leads/:id |
Einzelnen Lead abrufen |
| PUT | /api/leads/:id |
Lead aktualisieren |
| DELETE | /api/leads/:id |
Lead soft-deleten |
Projektstruktur
src/
app/
api/leads/ # REST API (Route Handlers)
layout.tsx # Root Layout mit Header
page.tsx # Leads-Verwaltung (Startseite)
components/ # UI-Komponenten
lib/
supabase/ # Supabase Client
types/ # TypeScript Types
validations/ # Zod Schemas
test/ # Test Setup
supabase/
migrations/ # SQL Migrationen
seed.sql # Testdaten (15 Leads)
docs/ # Dokumentation