A modern, interactive Japanese learning companion application built with Next.js 16. Designed to help users master Kanji and Kana through a clean, responsive, and customizable interface.
- Kanji Grid Visualization: Explore and learn Kanji characters in an organized, responsive grid layout.
- Kana Mastery: Comprehensive reference and practice tools for both Hiragana and Katakana.
- Practice Mode: Dedicated section to test your knowledge and build muscle memory.
- Theme Customization: Toggle between Light and Dark modes for comfortable viewing in any environment.
- Advanced Input Handling: Integrated Wanakana for seamless Romaji-to-Kana conversion.
- Responsive Design: Optimized for a smooth experience across desktop and mobile devices.
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- UI Library: React 19
- Styling: Styled Components & CSS Modules
- Utilities: Wanakana (Japanese romaji <-> kana conversion)
- Linting: ESLint
Follow these steps to set up the project locally.
- Node.js (v18 or higher recommended)
- npm or bun
-
Clone the repository:
git clone https://github.com/NXRts/JapanApp.git cd JapanApp -
Install dependencies:
npm install # or bun install
Start the development server:
npm run dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
src/
├── app/ # Next.js App Router pages and layouts
│ ├── about/ # About page
│ ├── contact/ # Contact page
│ ├── kana/ # Kana learning page
│ ├── fonts/ # Local font files
│ ├── globals.css # Global styles
│ └── page.tsx # Main entry point (Home)
├── components/ # Reusable UI components
│ ├── KanjiGrid/ # Kanji display grid
│ ├── Navbar.tsx # Navigation bar
│ ├── Footer.tsx # Site footer
│ └── ...
└── context/ # React Context providers (e.g., ThemeContext)Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
Developed by NXRts