FeaturedAbgeschlossen

Señor Profesor - SpanischApp

KI-gestütztes Sprachenlernen auf einem modernen Full-Stack Fundament.

SpanischApp

Über das Projekt

🇪🇸 Señor Profesor: Das KI-gestützte Lernsystem

Die SpanischApp Señor Profesor ist eine hochmoderne Progressive Web App (PWA), die den Spracherwerb durch radikale Automatisierung und wissenschaftlich fundierte Lernmethoden neu definiert. Durch die Kombination von React 19, Supabase und einer tiefen Integration von n8n-Workflows entsteht eine Lernplattform, die Inhalte nicht nur verwaltet, sondern aktiv generiert und bewertet.

🛠 Der Tech-Stack (Stand 2026)

  • Frontend: Vite 6 & React 19 (TypeScript) für maximale Performance.
  • Routing & State: TanStack Router & Query für effizientes Datenhandling; Zustand für persistente UI-States.
  • Backend: Supabase (PostgreSQL, Edge Functions, Auth, Storage).
  • Automation Engine: n8n als zentrales Gehirn für alle KI-gestützten Prozesse.

🚀 Highlights & Features

🧠 Intelligentes Gedächtnis (SRS)

Die App nutzt ein Spaced Repetition System (SRS) auf Basis des SM-2 Algorithmus.

  • Daily Drip: Täglich werden automatisch neue Vokabeln in den Lern-Pool gespült.
  • Fehler-Loop: Falsch beantwortete Fragen aus Übungen oder Spielen landen sofort im Repaso-Modus zur Wiederholung.

🎮 Gamified Learning & Mini-Games

Lernen erfolgt hier intuitiv durch ein breites Spektrum an Micro-Games, die alle XP vergeben und den Lernstatus direkt beeinflussen:

  • Audio-Challenges: Im „Supermercado“ Zahlen nach Gehör tippen.
  • Logik-Spiele: „El Intruso“ (Den Eindringling finden) oder „Orden en el Caos“ (Satzbau-Training).
  • High-Speed: Der Verb-Blitz-Trainer für Konjugations-Reflexe unter Zeitdruck.

🎙 KI-native Funktionen via n8n

Die App nutzt n8n-Webhooks, um High-End-KI-Modelle ohne Overhead zu integrieren:

  • Situational Chat: Realistische Rollenspiele mit GPT-4o inklusive Echtzeit-Grammatik-Feedback.
  • Voice-Check: Aussprache-Analyse via OpenAI Whisper mit lokalem Scoring-System.
  • Text-to-Speech: Native Vertonung jedes einzelnen spanischen Wortes in der App.

🗺 Visueller Lernpfad (Grammatik-Graph)

Statt starrer Listen bietet ein interaktiver React-Flow-Skill-Graph Orientierung. Nutzer sehen ihren Fortschritt visuell aufbereitet und schalten neue Themenpfade durch das Absolvieren von Voraussetzungen frei.

⚙️ Admin-Power & Skalierbarkeit

Ein dedizierter Admin-Bereich ermöglicht es, die gesamte App per Knopfdruck zu skalieren. n8n-Workflows generieren auf Anfrage komplette Kapitel, Übungssätze, Verbkonjugationen oder themenspezifisches Vokabular. Damit ist das System theoretisch unbegrenzt erweiterbar, ohne dass manuell Inhalte eingepflegt werden müssen.

📱 User Experience (UX)

  • Hybrid-Navigation: Modernes Desktop-Layout und eine optimierte Mobile-Bottom-Tab-Bar für native App-Haptik.
  • Dark- & Light-Mode: Vollständige Design-Persistenz.
  • Security: Multi-Faktor-Authentifizierung (MFA) und Admin-gesteuerter Registrierungs-Lock.

Fazit: Die SpanischApp demonstriert, wie Low-Code-Automatisierung (n8n) und klassische Webentwicklung (React/Supabase) verschmelzen, um komplexe Probleme wie Content-Generierung und Sprachanalyse effizient zu lösen.

Galerie