A premium, interactive, and high-fidelity Japanese learning application built with Next.js 16 (App Router), React 19, TypeScript, and Styled Components. Designed to guide learners from complete beginner to advanced proficiency (JLPT N5–N1) through interactive SVG stroke order practice, gamified roadmaps, SRS memory retention, mini-games, listening/speaking modules, and OCR camera scanning.
- Gamified Serpentine Learning Path: Interactive 3D learning roadmap featuring animated vector SVG portals (Alphabet, Vocabulary, Grammar, Conversation, Kanji, Finance, Travel, Trophy).
- Tactile 3D Buttons & Level Themes: Mechanical compression button feedback and breathing neon rings customized per JLPT level (N5 Emerald, N4 Purple, N3 Sunset, N2 Blue, N1 Crimson).
- Dynamic 8-13 Unit Lessons: Deterministic seeding algorithm populates units dynamically with Vocabulary, Grammar, Reading, Listening, and Fill-in-the-Blank interactive drills.
- Kanji Dictionary & Library: Comprehensive searchable database covering stroke counts, radicals, On'yomi, Kun'yomi, Romaji, and Indonesian translations.
- JLPT Kanji Writer (
/jlpt/kanji-writer): HanziWriter vector engine with radical color highlights, automated hint triggers, and offline SVG fallback (STROKE_PATHS_DB). - JLPT Simulation Exams (
/jlpt-exam): Full timed JLPT mock exams evaluating vocabulary, grammar, and reading comprehension.
- 2-Column Responsive Studio Layout:
- Left Panel (Studio Canvas & Audio): Interactive SVG stroke order writer canvas (with replay animation, trace guide, grid lines, touch & mouse handwriting, directional arrow badges
❶↓ ❷→ ❸→ ❹→), plus TTS Audio Playback (Native 1x & 0.7x Slow speed). - Right Panel (Knowledge Cards): Detailed Bahasa Indonesia meaning, On'yomi & Kun'yomi tags, Jukugo (Pasangan Kosakata Populer) compound word cards, and Awas Tertukar (Kanji Mirip) confusable kanji cards.
- Left Panel (Studio Canvas & Audio): Interactive SVG stroke order writer canvas (with replay animation, trace guide, grid lines, touch & mouse handwriting, directional arrow badges
- Zero-Click Context Learning: Seamless single-page environment combining audio, handwriting, stroke order, and vocabulary without tab switching.
- LocalStorage SRS Connection: Dynamically tracks items with low Ease Factor (< 2.2) and past quiz errors directly from
ProgressContext. - Targeted Repair Sessions: Interactive
🛠️ Perbaiki Kanji Lemahaction button to launch focused study sessions, or disabled statusTidak Ada Kanji Lemah ✨when memory accuracy is perfect.
- Hiragana & Katakana Grid: Complete chart for basic Vowels, Dakuten, Handakuten, and Yoon combinations with native audio pronunciations.
- Interactive Practice Sheets: Interactive canvas and printable tracing worksheets for offline handwriting practice.
- Kanji Battle Game: RPG-style turn-based battle where correct Kanji translations trigger attacks against opponent monsters.
- Match Pairs Game: Fast-paced card matching game connecting Kana/Kanji to their meanings.
- Reverse Quiz: Type the correct Kanji/Kana character when given the Indonesian/Romaji clue.
- Listening Comprehension (Choukai): Audio drills with interactive script toggles and speed controls (1x & 0.7x).
- Speaking Roleplay (Kaiwa): Interactive conversation scenarios with Speech Recognition & native TTS feedback.
- Grammar & Particle Drills: Detailed explanation cards for Japanese sentence structures (Wa vs Ga, Ni vs De, etc.) with fill-in-the-blank exercises.
- SRS Review Engine: SuperMemo SM-2 algorithm scheduling cards based on ease factors, intervals, and memory retention performance.
- Leitner Box: Multi-stage flashcard review system reinforcing long-term memory.
- EXP & Streak System: Earn experience points, level up, and maintain daily learning streaks.
- Hearts & Gems Economy: Hearts system rewarding accurate answers and Gems currency to refill hearts or buy streak freezes.
- Daily & Weekly Quests: Complete quests to earn gems, EXP, and unlock exclusive achievement badges.
- Leaderboard Leagues: Compete with other learners in Bronze, Silver, Gold, and Master leagues based on weekly EXP.
- Live Camera OCR (Tesseract.js): Scan Japanese characters directly from photos or live camera feeds inside the dictionary search overlay.
- Quick Dictionary Overlay: Floating Jisho search accessible anywhere via quick search bar or keyboard shortcut.
- Rich educational articles covering JLPT study strategies, Kansai dialect nuances, Japanese business etiquette, and culture.
- Printable course completion certificates and detailed analytics dashboards visualizing learning heatmap, accuracy, and EXP gains.
- Core Framework: Next.js 16 (App Router)
- UI Engine: React 19
- Programming Language: TypeScript 5
- Styling Engine: Styled Components 6 (CSS-in-JS) & Vanilla CSS
- PWA & Service Worker: @ducanh2912/next-pwa
- OCR Engine: Tesseract.js
- Kanji Stroke Engine: HanziWriter
- Japanese Text Utility: Wanakana (Romaji-to-Kana converter)
- State & Progression: React Context (
ProgressContext,ThemeContext,DeviceModeContext)
-
Clone the repository:
git clone https://github.com/NXRts/JapanApp.git cd JapanApp -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open http://localhost:3000 in your browser.
JapanApp/
├── public/ # Static assets, manifests, service workers, & public Icon.json
├── src/
│ ├── app/ # Next.js App Router pages (50+ routes)
│ │ ├── jlpt/ # JLPT Kanji Writer & Mock Exam
│ │ ├── practice/ # Practice Hub, SRS Reviews, & Drills
│ │ ├── roadmap/ # Serpentine Map Learning Path
│ │ ├── study/ # Daily Study Studio & Dashboard
│ │ ├── game/ # Kanji Battle & Mini Games
│ │ ├── kana/ # Hiragana & Katakana Master Grid
│ │ ├── kanji/ # Kanji Library (N5-N1)
│ │ ├── grammar/ # Grammar Rules & Exercises
│ │ ├── blog/ # Educational Articles
│ │ └── quests/ # Daily & Weekly Quests
│ ├── components/ # Reusable UI components & SVG AppIcons
│ ├── context/ # React Contexts (ProgressContext, Theme, DeviceMode)
│ ├── data/ # Static datasets, blog posts, & Icon.json registry
│ ├── features/ # Feature modules (daily-study, kana, kanji, navigation)
│ └── lib/ # Audio play helpers, SRS algorithms, & WanakanaDeveloped with ❤️ by NXRts