Timeline: Aug 4th, 2025 (1 day)
Role: Developer, UX Designer
Team: Solo
Link to WebApp: https://reenazys.github.io/JP-vocab-helper/
I. Three study modes:
Japanese → English translation
Kanji → Hiragana conversion
Reverse (English → Japanese)
II. Flagging system to mark and review difficult words
III. Custom vocabulary management: add, edit, delete words
IV. Bulk vocabulary import for faster setup
While studying Japanese on Duolingo, I found that the platform limited my ability to review vocabulary flexibly.
Beyond personal learning, my secondary goal was to experiment with AI-assisted development as a way to prototype faster, while still owning the product vision and UX direction. I chose Claude Code and Cursor for my vibe-coding tool.
After implementing most of the core features, I turned my attention to accessibility.
I realized that moving between input fields and advancing to the next flashcard would feel much smoother if users didn’t need to rely on a mouse click every time.
Keyboard navigation becomes the next priority.
Japanese IME input (used to type hiragana, katakana, and kanji) created unique challenges, often interfering with standard keyboard shortcuts.
This was my first experiment with “vibe coding” using Claude AI, and it taught me a lot about pairing AI-assisted development with my own UX direction.
Bottom Line: Frequent testing, clear feedback, and rounds of iterations were essential to achieve a polished user experience.
Even with AI assistance, product vision and UX decisions remain human-driven. AI accelerated the build, but thoughtful design choices—like accessibility, navigation flow, and feedback mechanisms—still required deliberate iteration. This project reinforced my belief that AI can speed up development, but design ownership is what makes a product usable and meaningful.