Full Site Build Studio Project Since 2025 - Now

Gojuon Master

Overview

Project Overview

Gojuon Master is a self-initiated project born from the observation that most Japanese learning apps focus on individual character memorization rather than structural understanding.

The Gojuon (五十音) is not just a character chart—it is the foundation of Japanese verb conjugation. Understanding its column and row structure makes conjugation logical rather than rote memorization.

This app bridges the gap between character knowledge and grammar understanding by emphasizing how the syllabary structure relates to verb stems and conjugation patterns.

Scope

Interactive Gojuon table with traditional right-to-left layout
Learn and Practice modes for different study approaches
Dual script support (Hiragana and Katakana)
Audio pronunciation for each character
Mobile-responsive design

Challenge

The Challenge

Existing Japanese learning apps treat the Gojuon as a simple memorization exercise, missing its deeper grammatical significance.
Learners struggle to connect individual character knowledge with verb conjugation patterns.
Most apps display characters in Western left-to-right format, losing the traditional column-based structure that Japanese learners need to understand.

Constraints & Context

The app needed to present the Gojuon in its traditional right-to-left, top-to-bottom format to match authentic Japanese teaching materials.
Interactive elements should highlight columns (verb stems) and rows (conjugation endings) to reinforce structural learning.
The interface must work seamlessly across desktop and mobile devices.
Audio pronunciation should be available for each character to support auditory learners.

Solution

Our Approach

Built with React and Vite for a fast, modern single-page application experience.
Implemented traditional right-to-left Gojuon layout matching authentic Japanese syllabary charts.
Created Learn mode for interactive exploration with visual column/row highlighting.
Developed Practice mode with quiz exercises focused on column and row patterns.
Added dual script support allowing seamless switching between Hiragana and Katakana.
Integrated stroke order animations using the AnimCJK open-source project.
Deployed on Netlify with CI/CD pipeline including automated testing and code coverage.

Screenshots

The Result

Technologies

Tech Stack

React 18 Vite Tailwind CSS TypeScript Vitest Netlify GitHub Actions

Results

Outcomes

Launched as a free educational resource for Japanese learners worldwide.
Comprehensive test coverage (85%+ target) ensuring reliability.
Clean, accessible interface following WCAG guidelines.
Active development roadmap including spaced repetition and advanced conjugation exercises.

Ready to work together?

Let's discuss how we can help with your project.

Schedule Consultation Take the Assessment