Über KanaDojo | Screenshots | UI & Design-Philosophie | Technischer Stack | Erste Schritte | Projektstruktur | Mitwirken | Lizenz | Danksagungen | Kontakt & Links

KanaDojo かな道場

📖 Über KanaDojo

KanaDojo ist eine fesselnde, webbasierte Lernplattform für Japanisch, die das Meistern von Hiragana, Katakana, Kanji und Vokabeln spaßig und intuitiv gestaltet. Entwickelt mit Fokus auf Ästhetik, Anpassbarkeit und effektives Lernen, bietet KanaDojo eine immersive Trainingsumgebung für Japanischlernende aller Niveaus.

Ob Sie gerade mit den grundlegenden Kana-Silbenschriften beginnen oder sich mit fortgeschrittenen Kanji und Vokabeln auf die JLPT-Prüfungen vorbereiten, KanaDojo bietet ein optimiertes, ablenkungsfreies Lernerlebnis, das sich an Ihre Präferenzen und Ihren Lernstil anpasst.

✨ Hauptfunktionen

🎯 Drei Trainings-Dojos

• Kana Dojo – Meistern Sie die Hiragana- und Katakana-Silbenschriften mit Basis-, Dakuon-, Yoon- und Fremdklang-Gruppen.
• Kanji Dojo – Lernen Sie wesentliche Kanji-Zeichen, organisiert nach JLPT-Niveaus (N5, N4, N3, N2).
• Vokabel Dojo – Bauen Sie Ihren japanischen Wortschatz mit kuratierten Wortsammlungen nach Sprachniveau auf.

🎮 Vier Dynamische Spielmodi

Jedes Dojo unterstützt vier fesselnde Trainingsmodi zur Lernverstärkung:

1. Pick (Auswahl) – Multiple Choice: Wählen Sie die korrekte Romanisierung/Übersetzung für das angezeigte Zeichen.
2. Reverse-Pick (Umgekehrte Auswahl) – Umgekehrte Multiple Choice: Wählen Sie das korrekte Zeichen für die gegebene Romanisierung/Übersetzung.
3. Input (Eingabe) – Texteingabe: Tippen Sie die korrekte Romanisierung/Übersetzung ein.
4. Reverse-Input (Umgekehrte Eingabe) – Umgekehrte Texteingabe: Tippen Sie das korrekte Zeichen ein.

🎨 Umfangreiche Anpassungsmöglichkeiten

• Über 100 Themes – Wählen Sie aus einer riesigen Sammlung wunderschöner heller und dunkler Themes oder nutzen Sie die Zufallsthema-Funktion.
• 28 Japanische Schriftarten – Wählen Sie aus einer Vielzahl authentischer japanischer Schriftarten, die Ihren ästhetischen Vorlieben entsprechen.
• Soundeffekte – Genießen Sie befriedigende UI-Feedback-Sounds, die ein- und ausgeschaltet werden können.
• Anzeigeoptionen – Wechseln Sie in den Auswahlmenüs zwischen Romaji/Englisch und Kana/Kanji-Anzeigen.
• Hotkeys – Tastaturkürzel für effizientes Training (können deaktiviert werden).

📊 Fortschrittsverfolgung

• Echtzeit-Feedback mit Richtig/Falsch-Zählern.
• Streak-Verfolgung zur Aufrechterhaltung der Motivation.
• Statistiken zur Überwachung Ihres Lernfortschritts.

🌐 Modernes Weberlebnis

• Vollständig responsives Design, das auf Desktop, Tablet und Mobilgeräten funktioniert.
• Keine Installation erforderlich – trainieren Sie überall mit einer Internetverbindung.
• Saubere, minimalistische Oberfläche, die Sie auf das Lernen fokussiert.
• Flüssige Animationen und Übergänge, angetrieben durch Framer Motion.

🖼️ Screenshots

🎨 UI & Design-Philosophie

KanaDojo verbindet eine minimalistische Ästhetik mit maximaler Flexibilität. Die Design-Philosophie konzentriert sich auf:

Minimalismus Zuerst

• Klare Oberflächen mit minimalen Ablenkungen.
• Fokus auf den Lerninhalt.
• Intuitive Navigation und klare Informationshierarchie.
• Gezielte Nutzung von Leerraum.

Ästhetische Anpassung

• Umfangreiche Theme-Bibliothek (über 100 Optionen), von sanften Pastelltönen bis zu lebendigen Neons.
• Unterstützung für helle und dunkle Modi.
• Sorgfältig kuratierte Farbpaletten, die auch bei längeren Lernsitzungen augenschonend sind.
• Nahtlose Theme-Übergänge.

Benutzererfahrung

• Flüssige Animationen und Mikro-Interaktionen für angenehmes Feedback.
• Responsives Design, das sich jeder Bildschirmgröße perfekt anpasst.
• Akustisches Feedback für Interaktionen (optional).
• Konsistente visuelle Sprache in allen Bereichen.

Japanische Typografie

• 28 authentische japanische Schriftarten, die verschiedene Stile abdecken.
• Korrekte Darstellung komplexer Kanji-Zeichen.
• Klare Unterscheidung zwischen ähnlich aussehenden Zeichen.
• Schriftart-Vorschauen mit echten japanischen Textbeispielen.

🛠️ Technischer Stack

KanaDojo wurde mit modernen Web-Technologien für optimale Leistung und Entwicklererfahrung erstellt:

Kern-Framework

• Next.js 15 – React-Framework mit App Router für serverseitiges Rendering und optimale Leistung.
• React 19 – Neuestes React mit Concurrent Features.
• TypeScript – Typensichere Entwicklung.

Styling & UI

• Tailwind CSS – Utility-First-CSS-Framework.
• shadcn/ui – Hochwertige, barrierefreie Komponentenbibliothek.
• Framer Motion – Flüssige Animationen und Übergänge.
• Lucide React – Schöne, konsistente Icon-Bibliothek.
• FontAwesome – Zusätzliche Icon-Unterstützung.

Zustandsmanagement

• Zustand – Leichtgewichtiges Zustandsmanagement mit minimalem Boilerplate.
• Zustand Persist – Lokale Speicherpersistenz für Benutzereinstellungen.

Utilities & Funktionen

• use-sound – Audio-Feedback-System.
• canvas-confetti – Feier-Effekte.
• react-timer-hook – Timer-Funktionalität.
• react-markdown – Markdown-Rendering für Bildungsinhalte.
• random-js – Kryptografisch starke Zufallszahlengenerierung.
• clsx + tailwind-merge – Conditional Styling Utilities.

Entwicklungswerkzeuge

• ESLint – Code-Linting.
• next-sitemap – Automatische Sitemap-Generierung.

Analytik & Performance

• @vercel/analytics – Web-Analytik.
• @vercel/speed-insights – Performance-Überwachung.

🚀 Erste Schritte

Voraussetzungen

• Node.js 18.x oder höher
• npm 10.x oder höher (kommt mit Node.js)

Installation

1. Das Repository klonen

git clone https://github.com/lingdojo/kanadojo.git
cd kanadojo

2. Abhängigkeiten installieren

npm install

3. Den Entwicklungsserver starten

npm run dev

4. Ihren Browser öffnen
   Navigieren Sie zu http://localhost:3000

Erstellung für die Produktion

# Eine optimierte Produktions-Build erstellen
npm run build

# Den Produktionsserver starten
npm start

Andere Befehle

# ESLint ausführen
npm run lint

# Sitemap generieren (läuft automatisch nach dem Build)
npm run postbuild

Fehlerbehebung

Wenn Sie während der Entwicklung auf Probleme stoßen, versuchen Sie diese Lösungen:

Next.js Cache Löschen

macOS/Linux:

rm -rf .next
npm run dev

Windows (PowerShell):

Remove-Item -Recurse -Force .next
npm run dev

Windows (Command Prompt):

rmdir /s /q .next
npm run dev

Node Modules Löschen und Neu Installieren

macOS/Linux:

rm -rf node_modules package-lock.json
npm install

Windows (PowerShell):

Remove-Item -Recurse -Force node_modules, package-lock.json
npm install

Windows (Command Prompt):

rmdir /s /q node_modules
del package-lock.json
npm install

Alle Caches Löschen (Nukleare Option)

macOS/Linux:

rm -rf .next node_modules package-lock.json
npm cache clean --force
npm install
npm run dev

Windows (PowerShell):

Remove-Item -Recurse -Force .next, node_modules, package-lock.json
npm cache clean --force
npm install
npm run dev

Windows (Command Prompt):

rmdir /s /q .next
rmdir /s /q node_modules
del package-lock.json
npm cache clean --force
npm install
npm run dev

Port Bereits Verwendet

Wenn Port 3000 bereits verwendet wird:

macOS/Linux:

# Prozess finden, der Port 3000 verwendet
lsof -i :3000

# Prozess beenden (PID durch tatsächliche Prozess-ID ersetzen)
kill -9 PID

Windows (PowerShell/Command Prompt):

# Prozess finden, der Port 3000 verwendet
netstat -ano | findstr :3000

# Prozess beenden (PID durch tatsächliche Prozess-ID ersetzen)
taskkill /PID PID /F

Oder einfach auf einem anderen Port ausführen:

# macOS/Linux/Windows
PORT=3001 npm run dev

📁 Projektstruktur

kanadojo/
├── app/                        # Next.js App Router Seiten
│   ├── kana/                   # Kana Dojo Seiten
│   │   └── train/[gameMode]/   # Trainingsseiten für jeden Spielmodus
│   ├── kanji/                  # Kanji Dojo Seiten
│   │   └── train/[gameMode]/
│   ├── vocabulary/             # Vokabel Dojo Seiten
│   │   └── train/[gameMode]/
│   ├── preferences/            # Einstellungen und Anpassungsseite
│   ├── academy/                # Bildungsinhalte
│   ├── layout.tsx              # Root-Layout mit Providern
│   └── page.tsx                # Startseite
│
├── components/                 # React Komponenten
│   ├── Dojo/                   # Trainingsspezifische Komponenten
│   │   ├── Kana/               # Kana Auswahl und Karten
│   │   ├── Kanji/              # Kanji Auswahl und Karten
│   │   └── Vocab/              # Vokabel Auswahl und Karten
│   ├── reusable/               # Gemeinsame Komponenten
│   │   ├── Menu/               # Navigations- und Menükomponenten
│   │   └── ...                 # Andere wiederverwendbare компоненты
│   ├── Settings/               # Präferenzkomponenten
│   └── ui/                     # shadcn/ui Komponenten
│
├── lib/                        # Utilities und Helferfunktionen
│   ├── hooks/                  # Benutzerdefinierte React Hooks
│   │   ├── useAudio.ts         # Audio-Feedback-Hooks
│   │   └── ...
│   ├── interfaces.ts           # TypeScript Interfaces
│   └── utils.ts                # Utility-Funktionen
│
├── store/                      # Zustand Zustandsmanagement
│   ├── useKanaKanjiStore.ts    # Kana/Kanji Auswahlzustand
│   ├── useVocabStore.ts        # Vokabel Auswahlzustand
│   ├── useStatsStore.ts        # Statistiken und Fortschritt
│   └── useThemeStore.ts        # Theme und Präferenzen
│
├── static/                     # Statische Daten und Konfiguration
│   ├── kana.ts                 # Kana Zeichendaten
│   ├── kanji/                  # Kanji Daten nach JLPT-Niveau
│   ├── vocab/                  # Vokabeldaten
│   ├── themes.ts               # Theme-Definitionen
│   ├── fonts.ts                # Schriftart-Konfigurationen
│   └── info.tsx                # Informationsinhalte
│
├── public/                     # Statische Assets
│   ├── sounds/                 # Audiodateien
│   └── wallpapers/             # Hintergrundbilder
│
├── CLAUDE.md                   # Entwicklerdokumentation
├── next.config.ts              # Next.js Konfiguration
├── tailwind.config.js          # Tailwind CSS Konfiguration
└── tsconfig.json               # TypeScript Konfiguration

Schlüsselkonzepte

Zustandsmanagement-Fluss (State Management Flow)

1. Der Benutzer wählt Inhalte in den Menükomponenten aus.
2. Die Auswahlen werden in den Zustand-Stores (useKanaKanjiStore, useVocabStore) gespeichert.
3. Trainingskomponenten lesen aus den Stores, um Fragen zu generieren.
4. Statistiken werden in useStatsStore erfasst und persistent gespeichert.
5. Benutzereinstellungen werden in useThemeStore mit localStorage-Persistenz gespeichert.

Komponentenarchitektur

• Dojo-Komponenten: Verwalten die Zeichen-/Wortauswahl für jeden Inhaltstyp.
• Trainingskomponenten: Rendern die Spielmodi und verwalten Benutzerinteraktionen.
• Wiederverwendbare Komponenten: Gemeinsame UI-Elemente (Schaltflächen, Karten, Modals usw.).
• Menü-Komponenten: Navigation, Info-Bereiche und Dojo-Auswahl.

Datenorganisation

• Kana: Organisiert nach Typ (Hiragana/Katakana) und Gruppen (Basis, Dakuon, Yoon, Fremdklänge).
• Kanji: Organisiert nach JLPT-Niveau (N5-N2), mit Lesungen und Bedeutungen.
• Vokabeln: Organisiert nach JLPT-Niveau und Wortart (Nomen, Verben usw.).

Implementierung der Spielmodi

Jeder Spielmodus ist eine dynamische Route (/[contentType]/train/[gameMode]), die:

1. Ausgewählte Inhalte aus dem entsprechenden Store liest.
2. Zufällige Fragen aus der Auswahl generiert.
3. Sofortiges Feedback bietet.
4. Statistiken (richtig, falsch, Streak) verfolgt.

🤝 Mitwirken (Contributing)

Beiträge sind willkommen! KanaDojo ist ein Open-Source-Projekt, das von der Community für die Community entwickelt wurde. Lesen Sie CONTRIBUTING.md für detailliertere Informationen zum Mitwirken.

So können Sie beitragen

1. Forken Sie das Repository.
2. Erstellen Sie einen Feature-Branch (git checkout -b feature/AmazingFeature).
3. Committen Sie Ihre Änderungen (git commit -m 'Add some AmazingFeature').
4. Pushen Sie zum Branch (git push origin feature/AmazingFeature).
5. Eröffnen Sie einen Pull Request.

Entwicklungsrichtlinien

• Halten Sie sich an den bestehenden Codestil und die Konventionen.
• Verwenden Sie TypeScript für Typensicherheit.
• Testen Sie Ihre Änderungen gründlich.
• Aktualisieren Sie die Dokumentation bei Bedarf.
• Halten Sie Komponenten fokussiert und wiederverwendbar.

📄 Lizenz

Dieses Projekt ist unter der AGPL 3.0 Lizenz lizenziert – Details finden Sie in der Datei LICENSE.md.

🙏 Danksagungen

• Japanische Sprachdaten und Zeicheninformationen.
• Die Open-Source-Community für die großartigen Tools und Bibliotheken.
• Alle Mitwirkenden, die helfen, KanaDojo besser zu machen.

📞 Kontakt & Links

• Webseite: https://kanadojo.com
• Repository: https://github.com/lingdojo/kanadojo
• E-Mail: [email protected]