🎙️ CLARIK

Die nächste Generation von Audio-Diskussionsräumen

Moderne Echtzeit-Audioplattform für strukturierte Gespräche
Intuitive Benutzerführung · Hochwertige Audioqualität · Intelligente Raumverwaltung

🚀 Features • 🛠️ Tech-Stack • 🔧 Setup • 📱 Screenshots • ⚙️ Architektur • 🚀 Deployment • 📜 Lizenz

---

🚀 Features

	Benutzer		Räume		Audio
🔐	Authentifizierung Magic Links & Passkeys	🏠	Raumverwaltung Erstellen, Einladen, Verwalten	🎙️	HD Audio Kristallklare Sprachqualität
👤	Profilverwaltung Personalisierte Avatare	📅	Zeitplanung Geplante und spontane Räume	🔊	Noise Cancellation Unterdrückung von Hintergrundgeräuschen
🔔	Benachrichtigungen Echtzeit-Updates	👥	Rollenmanagement Moderator, Speaker, Listener	✋	Wortmeldungen Intelligente Speaker-Queue
🌙	Dark Mode Augenschonende Nutzung	🔍	Raum-Discovery Themenbasierte Raumsuche	📊	Sprachaktivität Visuelle Sprecher-Indikatoren
📱	Responsive Design Desktop & Mobile optimiert	🔒	Privatsphäre Öffentliche/Private Räume	⚡	Niedrige Latenz Verzögerungsfreie Kommunikation

✨ Besonderheiten

• Admin-Dashboard – Umfassende Plattformüberwachung und Nutzerverwaltung
• Realtime-Infrastruktur – Sofortige Synchronisation aller Änderungen
• Skalierbare Architektur – Entworfen für hohe Nutzer- und Raumzahlen
• Fokus auf UX – Intuitive Benutzerführung für alle Altersgruppen

🛠️ Tech-Stack

Next.js 14	TypeScript	Tailwind	shadcn/ui	React
Supabase	PostgreSQL	LiveKit	Zustand	Vercel

Architektur-Highlights

Frontend: App Router · Server Components · Streaming · Suspense
Backend: Row-Level Security · Realtime Subscriptions · Edge Functions
Audio: WebRTC · SFU-Architektur · Opus-Codec · Automatische Skalierung

🔧 Setup

🚀 Schnellstart # Repository klonen git clone https://github.com/ttvtimotheus/clarik.git cd clarik # Abhängigkeiten installieren npm install # Entwicklungsserver starten npm run dev # Besuche http://localhost:3000

🔑 Voraussetzungen Node.js 18+ und npm/yarn/pnpm Supabase-Konto (kostenlose Tier ausreichend) LiveKit-Konto (kostenlose Tier für Entwicklung) GitHub-Konto für Deployment über Vercel

⚙️ Umgebungsvariablen

Erstelle eine .env.local Datei im Projektroot:

# Supabase Konfiguration
NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

# LiveKit Konfiguration
LIVEKIT_API_KEY=your-livekit-api-key
LIVEKIT_API_SECRET=your-livekit-api-secret
NEXT_PUBLIC_LIVEKIT_URL=wss://your-livekit-instance.livekit.cloud

🗃️ Datenbank einrichten

1. Erstelle ein neues Projekt auf Supabase
2. Führe die SQL-Skripte in der folgenden Reihenfolge aus:
   • lib/supabase/schema.sql (Basisschema)
   • lib/supabase/admin-schema.sql (Admin-Funktionen)
   • lib/supabase/secure-admin-views.sql (Sichere Views)
3. Aktiviere die Authentication-Dienste:
   • Email mit "Confirm email" aktivieren
   • Passkey-Authentifizierung aktivieren

🎙️ LiveKit konfigurieren

1. Erstelle ein neues Projekt auf LiveKit Cloud
2. Kopiere API-Key und Secret in die .env.local
3. Optional: Für Produktionsumgebungen eigenes LiveKit-Cluster aufsetzen

📱 Screenshots

Homepage	Audio Room	Admin Dashboard

Ersetze die Platzhalter-Bilder durch echte Screenshots deiner Anwendung

⚙️ Architektur

flowchart TD
    U[User] -->|interacts with| F[Frontend - Next.js]
    F -->|Auth & Data| S[Supabase Backend]
    F -->|Real-time Audio| L[LiveKit WebRTC]
    S -->|Row-Level Security| DB[(PostgreSQL)]
    S -->|Realtime Updates| F
    L -->|Audio Stream| F
    
    subgraph "Frontend Components"
    FC1[Pages & Layouts] --> FC2[Component Library]
    FC2 --> FC3[Context Providers]
    FC3 --> FC4[Hooks & Utils]
    end
    
    subgraph "Backend Services"
    BS1[Authentication] --> BS2[Database]
    BS2 --> BS3[Realtime]
    BS3 --> BS4[Edge Functions]
    end
    
    F --- FC1
    S --- BS1

Loading

📂 Projektstruktur

📦 clarik ┣ 📂 app # Next.js App Router ┃ ┣ 📂 account # Benutzereinstellungen ┃ ┣ 📂 admin # Admin-Dashboard ┃ ┣ 📂 api # API-Routen ┃ ┣ 📂 auth # Authentifizierung ┃ ┣ 📂 rooms # Raum-Seiten ┃ ┗ 📜 layout.tsx # Root-Layout ┣ 📂 components # UI-Komponenten ┃ ┣ 📂 auth # Auth-Komponenten ┃ ┣ 📂 providers # Context-Provider ┃ ┣ 📂 room # Raum-Komponenten ┃ ┗ 📂 ui # UI-Komponenten

┣ 📂 lib # Bibliotheken ┃ ┣ 📂 hooks # Custom Hooks ┃ ┣ 📂 store # Zustand Stores ┃ ┣ 📂 supabase # Supabase Client ┃ ┗ 📂 utils # Hilfsfunktionen ┣ 📂 public # Statische Assets ┣ 📜 .env.example # Beispiel-Umgebungsvariablen ┣ 📜 .gitignore # Git-Ignore-Datei ┣ 📜 middleware.ts # Next.js Middleware ┣ 📜 next.config.js # Next.js-Konfiguration ┣ 📜 package.json # Abhängigkeiten ┣ 📜 README.md # Projektdokumentation ┗ 📜 tsconfig.json # TypeScript-Konfiguration

🚀 Deployment

🌐 Frontend

One-Click-Deployment mit Vercel:

1. Klicke auf den Button oben
2. Verbinde dein GitHub-Konto
3. Konfiguriere die Umgebungsvariablen:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
   • LIVEKIT_API_KEY
   • LIVEKIT_API_SECRET
   • NEXT_PUBLIC_LIVEKIT_URL

🔐 Backend

Dein Supabase-Projekt dient als Backend und ist bereits gehostet. Für die Produktion empfehlen wir:

1. Upgrade auf den Supabase Pro-Plan für Produktionsworkloads
2. Aktiviere täglich Backups der Datenbank
3. Konfiguriere CORS-Einstellungen für deine Domain
4. Konfiguriere den SMTP-Server für E-Mail-Benachrichtigungen

🔊 Audio-Server

LiveKit Cloud bietet eine gehostete Lösung für die WebRTC-Funktionalität:

1. Für Produktionsumgebungen wähle den passenden Plan nach erwarteter Nutzerzahl
2. Konfiguriere regionale Server für niedrige Latenz
3. Stelle sicher, dass die LiveKit-Tokens korrekt generiert werden

🌟 Community & Beiträge

Beiträge sind willkommen! So kannst du helfen:

• 🐛 Issues - Bug-Reports und Feature-Requests einreichen
• 🔀 Pull Requests - Code-Verbesserungen vorschlagen
• 📖 Dokumentation - Zur Dokumentation beitragen
• 🧪 Tests - Helfen, die Testabdeckung zu verbessern

📜 Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert.

---

Mit ❤️ entwickelt von Timotheus

🔝 Zurück nach oben