KanaFlow
About My Project
After a few years of casually studying Japanese, I wanted a quick, easy-to-use app to practice Kana. In just a month, I mastered React Native, built a quiz system, and created a working version. When I shared a preview with a Japanese teacher friend overseas, she was eager to try it and gave positive feedback. Encouraged by others, I rebuilt the app with the goal of publishing it, and on November 12th, 2024, it was accepted into the Apple App Store.
I developed a responsive and sleek React Native app UI adaptable for phones and tablets of all sizes. Users can comfortably use my app on any mobile device or desktop, leading to a 38% increase in downloads from non-iPhone devices.
Roles
App Developer, Front-End Developer
Launched
November 2024
Tech Stack
- Typescript
- Node.JS
- SCSS
Development
Before creating KanaFlow, I had minimal experience with React Native. This was a build-as-you-learn project, as many other works in development have been for me. I designed a simple webpage not only to showcase the app, but also to contain a support page and privacy policy required by the Apple App Store. This site is my favorite so far, as it challenged me to design a simple yet appealing landing page.
Accomplishments
- Designed and developed a dynamic React Native app with a clean and easy-to-follow UI adaptable to any screen size.
- Effectively demonstrated the app's feature set in a simple and modern React webpage, resulting in an average of 30 more app page impressions monthly.
- Successfully approved for publication on the Apple App Store, providing a smooth user experience for Japanese language learners and currently holding a 5-star rating.
Challenges Faced
Generating reasonable question choices was a challenge. While developing a proof-of-concept, I realized the questions were too easy because the incorrect options were often vastly different from the correct one. While this might not be noticeable to a beginner learning Japanese, my familiarity with Kana and focus on memorization made it simple to identify the correct answer by eliminating choices whose characters were not in the same column as the target character.
Solution
I rewrote the character dataset, which initially included only the character and its pronunciation, to incorporate metadata about each character's relationship to others. The updated entries specified the character's variant and column placement. Using this data, I implemented a filtering function that considered the character's variant, column, and the first 1–2 letters of its pronunciation. During question generation, this function ranked characters from most to least similar to the correct answer and picked the top 3. The result was a set of four closely related choices, encouraging users to focus on subtle differences and deepen their familiarity with the characters.