205 lines
5.7 KiB
Markdown
205 lines
5.7 KiB
Markdown
# 🎯 Professional Appointment Booking System
|
|
|
|
Ein professionelles Terminbuchungssystem mit Admin-Dashboard für Kundenprojekte und strukturierte Kundenbefragung.
|
|
|
|
## ✨ Features
|
|
|
|
### 📅 **Terminbuchung**
|
|
- **E-Mail-Verifikation** mit Supabase Auth
|
|
- **Automatische Bestätigung** nach Klick auf E-Mail-Link
|
|
- **Seamless User Flow** mit automatischen Weiterleitungen
|
|
- **Responsive Design** für alle Geräte
|
|
|
|
### 🏢 **Admin-Dashboard**
|
|
- **Professionelles UI** mit Glassmorphism-Design
|
|
- **Live-Status-Updates** für Termine
|
|
- **Strukturierte Kundenbefragung** mit 6 Hauptbereichen
|
|
- **Fortschritts-Tracking** in Echtzeit
|
|
- **Kreuz und quer Navigation** für effiziente Arbeit
|
|
|
|
### 📊 **Kundenprojekte Management**
|
|
- **Termin-Status-System:** Wartend → Läuft → Abgeschlossen
|
|
- **Live-Kollaboration** zwischen Admins
|
|
- **Vollständige Datenbearbeitung** in Echtzeit
|
|
- **Strukturierte Projektübersicht** für produktive Arbeit
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### **1. Repository klonen**
|
|
```bash
|
|
git clone https://github.com/yourusername/appointment-booking-system.git
|
|
cd appointment-booking-system
|
|
```
|
|
|
|
### **2. Dependencies installieren**
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### **3. Environment Variables setzen**
|
|
```bash
|
|
# .env.local erstellen
|
|
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
|
|
```
|
|
|
|
### **4. Development Server starten**
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
### **5. Browser öffnen**
|
|
```
|
|
http://localhost:3000
|
|
```
|
|
|
|
## 🛠️ Technologie-Stack
|
|
|
|
### **Frontend**
|
|
- **Next.js 14** mit App Router
|
|
- **React 18** mit TypeScript
|
|
- **TailwindCSS** für Styling
|
|
- **shadcn/ui** für UI-Komponenten
|
|
- **Lucide React** für Icons
|
|
|
|
### **Backend**
|
|
- **Supabase** für Datenbank und Auth
|
|
- **PostgreSQL** als Datenbank
|
|
- **Row Level Security (RLS)** für Sicherheit
|
|
|
|
### **Deployment**
|
|
- **Vercel** (empfohlen)
|
|
- **Netlify**
|
|
- **Any Static Hosting**
|
|
|
|
## 📋 Projektstruktur
|
|
|
|
```
|
|
project/
|
|
├── app/ # Next.js App Router
|
|
│ ├── auth/ # Authentifizierung
|
|
│ ├── kunden-projekte/ # Admin Dashboard
|
|
│ ├── success/ # Erfolgs-Seite
|
|
│ └── admin-login/ # Admin Login
|
|
├── components/ # React Komponenten
|
|
│ ├── ui/ # shadcn/ui Komponenten
|
|
│ ├── AppointmentStatus.tsx # Termin-Status
|
|
│ └── CustomerQuestionnaire.tsx # Kundenbefragung
|
|
├── hooks/ # Custom React Hooks
|
|
├── lib/ # Utilities
|
|
├── middleware.ts # Next.js Middleware
|
|
└── docs/ # Dokumentation
|
|
```
|
|
|
|
## 🎯 Workflow
|
|
|
|
### **1. Kunde bucht Termin**
|
|
```
|
|
Kunde → Terminbuchung → E-Mail-Verifikation → Automatische Bestätigung → Erfolgs-Seite
|
|
```
|
|
|
|
### **2. Admin verwaltet Termine**
|
|
```
|
|
Admin → Kunden-Projekte → Termin starten → Befragung → Projektarbeit
|
|
```
|
|
|
|
### **3. Strukturierte Kundenbefragung**
|
|
- **Kontaktdaten** (Firma, Ansprechpartner, E-Mail, Telefon)
|
|
- **Projektinfo** (Beschreibung, Zielgruppe, Website-Ziele)
|
|
- **Design & Features** (Design-Wünsche, Features, Stilvorbilder)
|
|
- **Technische Details** (Integrationen, Funktionen, Betreuung)
|
|
- **Zeitplan & Budget** (Deadline, Budget, Kommunikation)
|
|
|
|
## 🔧 Konfiguration
|
|
|
|
### **Supabase Setup**
|
|
1. **Projekt erstellen** auf [supabase.com](https://supabase.com)
|
|
2. **Database Schema** importieren (siehe `docs/`)
|
|
3. **Environment Variables** setzen
|
|
4. **Row Level Security** aktivieren
|
|
|
|
### **Email Setup**
|
|
1. **SMTP Provider** konfigurieren
|
|
2. **E-Mail-Templates** anpassen
|
|
3. **Domain-Verifikation** durchführen
|
|
|
|
## 📚 Dokumentation
|
|
|
|
### **Setup Guides**
|
|
- [Installation Guide](INSTALLATION_GUIDE.md)
|
|
- [Environment Setup](ENV_SETUP.md)
|
|
- [Supabase Auth Setup](SUPABASE_AUTH_SETUP.md)
|
|
|
|
### **Feature Guides**
|
|
- [Admin Dashboard](ADMIN_TERMIN_SYSTEM.md)
|
|
- [Database Schema](DATABASE_SCHEMA_FIX.md)
|
|
- [E-Mail-Verifikation Setup](EMAIL_VERIFICATION_SETUP.md)
|
|
|
|
### **Troubleshooting**
|
|
- [Database Debug](DATABASE_DEBUG_GUIDE.md)
|
|
- [Next.js Fixes](NEXTJS_CLIENT_SERVER_FIX.md)
|
|
- [Auth Flow](SUCCESSFUL_AUTH_FLOW.md)
|
|
|
|
## 🎨 Design Features
|
|
|
|
### **Professional UI**
|
|
- **Glassmorphism-Effekt** mit Backdrop-Blur
|
|
- **Gradient-Hintergründe** für modernen Look
|
|
- **Responsive Design** für alle Geräte
|
|
- **Intuitive Navigation** mit Icons
|
|
|
|
### **User Experience**
|
|
- **Live-Updates** für alle Status-Änderungen
|
|
- **Fortschritts-Balken** für Befragung
|
|
- **Toast-Benachrichtigungen** für Feedback
|
|
- **Loading States** für bessere UX
|
|
|
|
## 🔒 Sicherheit
|
|
|
|
### **Authentifizierung**
|
|
- **E-Mail-Verifikation** ohne Passwörter
|
|
- **Automatische Bestätigung** nach Klick auf E-Mail-Link
|
|
- **Session Management** mit Supabase
|
|
|
|
### **Datenbank-Sicherheit**
|
|
- **Row Level Security (RLS)** aktiviert
|
|
- **Prepared Statements** gegen SQL-Injection
|
|
- **Input Validation** auf Client und Server
|
|
|
|
## 🚀 Deployment
|
|
|
|
### **Vercel (Empfohlen)**
|
|
```bash
|
|
npm install -g vercel
|
|
vercel
|
|
```
|
|
|
|
### **Environment Variables**
|
|
```bash
|
|
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
|
|
```
|
|
|
|
## 🤝 Contributing
|
|
|
|
1. **Fork** das Repository
|
|
2. **Feature Branch** erstellen (`git checkout -b feature/AmazingFeature`)
|
|
3. **Commit** Änderungen (`git commit -m 'Add some AmazingFeature'`)
|
|
4. **Push** zum Branch (`git push origin feature/AmazingFeature`)
|
|
5. **Pull Request** erstellen
|
|
|
|
## 📄 License
|
|
|
|
Dieses Projekt ist unter der MIT License lizenziert - siehe [LICENSE](LICENSE) Datei für Details.
|
|
|
|
## 🙏 Credits
|
|
|
|
- **shadcn/ui** für UI-Komponenten
|
|
- **Lucide React** für Icons
|
|
- **Supabase** für Backend-Services
|
|
- **Next.js** für das Framework
|
|
|
|
---
|
|
|
|
**Entwickelt mit ❤️ für professionelle Terminbuchung und Kundenprojektverwaltung**
|