Señor Profesor - SpanischApp

🇪🇸 SpanischApp (Señor Profesor): Das KI-gestützte Full-Stack Lern-Ökosystem

Die SpanischApp Señor Profesor ist ein hochentwickeltes Web-Ökosystem, das den Spracherwerb durch wissenschaftlich fundierte Methoden, Deep-Tech-Automatisierung und Gamification optimiert. Durch die architektonische Verschmelzung von React 19, Supabase und einer Event-gesteuerten n8n-Workflow-Engine bricht das Projekt den traditionellen „Content-Flaschenhals“ auf: Inhalte werden nicht nur verwaltet, sondern autonom generiert, strukturiert und evaluiert.

🛠 Der Technical Stack (Stand: Juni 2026)

• Frontend: Core-Upgrade auf React 19 und TypeScript, gebündelt mit dem brandneuen Vite 8 (Rolldown-Bundler) für kompromisslose Ladezeiten und optimiertes Tree-Shaking.
• Routing & Server State: Dateibasiertes Routing via TanStack Router gekoppelt mit TanStack Query für ein performantes, konsistentes Caching- und Query-Key-Management.
• Client State & UI: Zustand für die lokale, persistente Verwaltung von User-Fortschritten (XP, Streaks). Visuell umgesetzt mit Shadcn/UI, Tailwind CSS und vollem Dark/Light-Mode-Support.
• Backend-as-a-Service: Supabase isoliert auf einem dedizierten sprachapp-Schema, zuständig für relationale Datenhaltung (PostgREST), sichere Authentifizierung (inkl. optionalem Turnstile-Captcha und MFA/TOTP) sowie Storage-Management.
• Automation: n8n steuert als asynchrone Workflow-Schnittstelle sämtliche KI-Verarbeitungen und administrativen Hintergrundprozesse per Webhook.

✨ Architektur & Kernfunktionen

🧠 Intelligenter Wissensaufbau (SM-2 Spaced Repetition)

Vergessenskurven werden algorithmisch minimiert. Das integrierte Repaso-Modul nutzt das bewährte SM-2-Verfahren zur dynamischen Intervallberechnung.

• Automatisches Fehler-Enrollment: Falsch beantwortete Fragen aus Lektionen oder Mini-Games werden im Hintergrund direkt in den täglichen Wiederholungszyklus des Nutzers einsortiert.
• Daily Drip: Ein konfigurierbarer Algorithmus speist täglich eine vordefinierte Anzahl neuer Vokabeln und Verben ein, um kognitive Überlastung zu verhindern.

🎙 Native KI-Medienverarbeitung & Real-Talk

Die Anwendung nutzt n8n-Schnittstellen zur Echtzeit-Kommunikation mit High-End-Sprachmodellen (GPT-4o, Whisper):

• Situational Chat: Kontextbezogene Rollenspiele (z. B. im Restaurant oder Hotel) mit persistiertem Chat-Verlauf und automatisiertem, visuell hervorgehobenem Grammatik-Feedback.
• Sprachanalyse (STT & TTS): Native Audio-Vertonung fast aller Textbausteine via OpenAI TTS. Über die Browser-MediaRecorder-API aufgenommene Sprachproben der Nutzer werden per Whisper STT transkribiert und über ein lokales Normalisierungs- und Scoring-System auf Verständlichkeit geprüft.

🎮 High-Fidelity Gamification & Mini-Games

Ein breites Spektrum an Micro-Games transformiert passives Wissen in aktive Sprachreflexe. Jedes Spiel triggert bei Erfolg (≥ 80%) ein zentral gesteuertes Konfetti-Belohnungssystem:

• Bilder-Memory: Ein visuelles Vokabel-Matching mit flüssigen 3D-Karten-Flips, asynchronem Bild-Ladeindikator und Touch-Optimierung für Mobilgeräte.
• Verb-Blitz-Trainer: Ein 60-Sekunden-Modus zum schnellen Eintippen von Konjugationen unter Zeitdruck, inklusive Streak-Bonus und globalem Leaderboard.
• Spezial-Trainer: El Supermercado (Zahlen-Hörtraining), El Detective (Fehler-Suchspiel) und Orden en el Caos (Satzbau-Strukturierung).

🗺 Visueller Grammatik-Graph

Statt linearer Lektionslisten navigieren Nutzer durch einen interaktiven, mit React Flow gerenderten Skill-Graphen. Abhängigkeiten zwischen komplexen Grammatikthemen werden visuell als animierte Pfade dargestellt. Knoten sperren oder öffnen sich dynamisch basierend auf dem in Supabase validierten Lernfortschritt.

⚙️ Datensteuerung & Administration

Ein geschütztes Admin-Dashboard erlaubt die vollständige Kontrolle über die Plattform. Da die App selbst keine harte KI-Logik enthält, triggert der Administrator hier n8n-gesteuerte Generierungsprozesse. Mit einem Klick erzeugen verzweigte Workflows (u. a. über n8n Switch-Nodes) vollständige Kapitelstrukturen, korrekte Verbkonjugationstabellen über alle Zeitformen hinweg oder themenspezifische Vokabularsets.

📱 Mobil-optimierte User Experience

Die Navigation passt sich dem Endgerät an: Während am Desktop eine klassische Pill-Leiste dominiert, greift auf Smartphones eine fixierte Bottom-Tab-Bar mit Safe-Area-Unterstützung (iPhone Notch) und platzsparenden Mini-Sheets für tiefergehende Menüpunkte.