A beautiful, minimalist, and highly customizable platform for mastering Japanese
KanaDojo is an engaging web-based Japanese learning platform that makes mastering Hiragana, Katakana, Kanji, and Vocabulary fun and intuitive. Built with a focus on aesthetics, customization, and effective learning, KanaDojo provides an immersive training environment for Japanese language learners at all levels.
Whether you're just starting with the basic kana syllabaries or preparing for the JLPT exams with advanced kanji and vocabulary, KanaDojo offers a streamlined, distraction-free learning experience that adapts to your preferences and learning style.
- Kana Dojo - Master Hiragana and Katakana syllabaries with base, dakuon, yoon, and foreign sound groups
- Kanji Dojo - Learn essential kanji characters organized by JLPT levels (N5, N4, N3, N2)
- Vocabulary Dojo - Build your Japanese vocabulary with curated word collections by proficiency level
Each dojo supports four engaging training modes to reinforce learning:
- Pick - Multiple choice: Select the correct romanization/translation for the shown character
- Reverse-Pick - Reverse multiple choice: Select the correct character for the given romanization/translation
- Input - Text input: Type the correct romanization/translation
- Reverse-Input - Reverse text input: Type the correct character
- 100+ Themes - Choose from a vast collection of beautiful light and dark themes, or use the random theme feature
- 28 Japanese Fonts - Select from a variety of authentic Japanese typefaces to suit your aesthetic preferences
- Sound Effects - Enjoy satisfying UI feedback sounds that can be toggled on/off
- Display Options - Toggle between Romaji/English and Kana/Kanji displays in selection menus
- Hotkeys - Keyboard shortcuts for efficient training (can be disabled)
- Real-time feedback with correct/incorrect counters
- Streak tracking to maintain motivation
- Statistics to monitor your learning progress
- Fully responsive design that works on desktop, tablet, and mobile
- No installation required - train anywhere with an internet connection
- Clean, minimalist interface that keeps you focused on learning
- Smooth animations and transitions powered by Framer Motion
KanaDojo embraces a minimalist aesthetic combined with maximum flexibility. The design philosophy centers around:
- Clean interfaces with minimal distractions
- Focus on the learning content
- Intuitive navigation and clear information hierarchy
- Purposeful use of whitespace
- Extensive theme library (100+ options) ranging from soft pastels to vibrant neons
- Support for both light and dark modes
- Carefully curated color palettes that are easy on the eyes during extended study sessions
- Seamless theme transitions
- Smooth animations and micro-interactions for delightful feedback
- Responsive design that adapts beautifully to any screen size
- Audio feedback for interactions (optional)
- Consistent visual language across all sections
- 28 authentic Japanese fonts covering various styles
- Proper rendering of complex kanji characters
- Clear distinction between similar-looking characters
- Font previews with real Japanese text samples
KanaDojo is built with modern web technologies for optimal performance and developer experience:
- Next.js 15 - React framework with App Router for server-side rendering and optimal performance
- React 19 - Latest React with concurrent features
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first CSS framework
- shadcn/ui - High-quality, accessible component library
- Framer Motion - Smooth animations and transitions
- Lucide React - Beautiful, consistent icon library
- FontAwesome - Additional icon support
- Zustand - Lightweight state management with minimal boilerplate
- Zustand Persist - Local storage persistence for user preferences
- use-sound - Audio feedback system
- canvas-confetti - Celebration effects
- react-timer-hook - Timer functionality
- react-markdown - Markdown rendering for educational content
- random-js - Cryptographically strong random number generation
- clsx + tailwind-merge - Conditional styling utilities
- ESLint - Code linting
- next-sitemap - Automatic sitemap generation
- @vercel/analytics - Web analytics
- @vercel/speed-insights - Performance monitoring
- Node.js 18.x or higher
- npm 10.x or higher (comes with Node.js)
-
Clone the repository
git clone https://github.com/lingdojo/kanadojo.git cd kanadojo -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
# Create an optimized production build
npm run build
# Start the production server
npm start# Run ESLint
npm run lint
# Generate sitemap (runs automatically after build)
npm run postbuildkanadojo/
├── app/ # Next.js App Router pages
│ ├── kana/ # Kana dojo pages
│ │ └── train/[gameMode]/ # Training pages for each game mode
│ ├── kanji/ # Kanji dojo pages
│ │ └── train/[gameMode]/
│ ├── vocabulary/ # Vocabulary dojo pages
│ │ └── train/[gameMode]/
│ ├── preferences/ # Settings and customization page
│ ├── academy/ # Educational content
│ ├── layout.tsx # Root layout with providers
│ └── page.tsx # Home page
│
├── components/ # React components
│ ├── Dojo/ # Training-specific components
│ │ ├── Kana/ # Kana selection and cards
│ │ ├── Kanji/ # Kanji selection and cards
│ │ └── Vocab/ # Vocabulary selection and cards
│ ├── reusable/ # Shared components
│ │ ├── Menu/ # Navigation and menu components
│ │ └── ... # Other reusable components
│ ├── Settings/ # Preference components
│ └── ui/ # shadcn/ui components
│
├── lib/ # Utilities and helper functions
│ ├── hooks/ # Custom React hooks
│ │ ├── useAudio.ts # Audio feedback hooks
│ │ └── ...
│ ├── interfaces.ts # TypeScript interfaces
│ └── utils.ts # Utility functions
│
├── store/ # Zustand state management
│ ├── useKanaKanjiStore.ts # Kana/Kanji selection state
│ ├── useVocabStore.ts # Vocabulary selection state
│ ├── useStatsStore.ts # Statistics and progress
│ └── useThemeStore.ts # Theme and preferences
│
├── static/ # Static data and configuration
│ ├── kana.ts # Kana character data
│ ├── kanji/ # Kanji data by JLPT level
│ ├── vocab/ # Vocabulary data
│ ├── themes.ts # Theme definitions
│ ├── fonts.ts # Font configurations
│ └── info.tsx # Informational content
│
├── public/ # Static assets
│ ├── sounds/ # Audio files
│ └── wallpapers/ # Background images
│
├── CLAUDE.md # Developer documentation
├── next.config.ts # Next.js configuration
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
- User selects content in menu components
- Selections stored in Zustand stores (
useKanaKanjiStore,useVocabStore) - Training components read from stores to generate questions
- Stats tracked and persisted in
useStatsStore - User preferences saved in
useThemeStorewith localStorage persistence
- Dojo Components: Handle character/word selection for each content type
- Training Components: Render game modes and handle user interactions
- Reusable Components: Shared UI elements (buttons, cards, modals, etc.)
- Menu Components: Navigation, info sections, and dojo selection
- Kana: Organized by type (hiragana/katakana) and groups (base, dakuon, yoon, foreign)
- Kanji: Organized by JLPT level (N5-N2), with readings and meanings
- Vocabulary: Organized by JLPT level and word type (nouns, verbs, etc.)
Each game mode is a dynamic route (/[contentType]/train/[gameMode]) that:
- Reads selected content from the appropriate store
- Generates random questions from the selection
- Provides immediate feedback
- Tracks statistics (correct, incorrect, streak)
Contributions are welcome! KanaDojo is an open-source project built by the community, for the community.
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Follow the existing code style and conventions
- Use TypeScript for type safety
- Test your changes thoroughly
- Update documentation as needed
- Keep components focused and reusable
This project is licensed under the MIT License - see the LICENSE.md file for details.
- Japanese language data and character information
- Open-source community for the amazing tools and libraries
- All contributors who help make KanaDojo better
- Website: kanadojo.com
- Repository: github.com/lingdojo/kanadojo
Made with ❤️ for Japanese language learners worldwide
がんばって！ (Ganbatte! - Do your best!)
