Andreas
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>
126 lines
2.8 KiB
Markdown
126 lines
2.8 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
git clone <repo-url>
|
|
cd fitcoachpro
|
|
```
|
|
|
|
### 2. Dependencies installieren
|
|
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
### 3. Umgebungsvariablen konfigurieren
|
|
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
|
|
Trage deine Supabase-Credentials in `.env` ein:
|
|
|
|
- `NEXT_PUBLIC_SUPABASE_URL` - Supabase Project URL
|
|
- `NEXT_PUBLIC_SUPABASE_ANON_KEY` - Supabase Anon Key
|
|
- `SUPABASE_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
|
|
|
|
```bash
|
|
# Entwicklungsserver
|
|
pnpm dev
|
|
|
|
# Oder via Docker
|
|
docker compose up --build
|
|
```
|
|
|
|
App laeuft auf [http://localhost:3000](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](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
|
|
|
|
```text
|
|
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
|
|
```
|