Offline. Free. No account. Built on a train in 53 minutes.
Romaji prompt → you write the character by hand.
Flip → animated stroke reveal, your attempt still visible.
Got it / missed it.
Missed cards replay at the end of the deck.
There's no App Store link. It's a website that installs like an app — that's why it's free, and why it works with no signal.
TAP A STEP TO HOLD IT



This is one person, one day. It's not a study. It's a log.
4 STEPS · 6 SENDS — the whole build, in the order it went out. Transcribed from the creator's own file, line breaks and typos included.
Let's make a new app. We'll call it kanahero. nextjs PWA, no API, no backend, works on a plane This app will help me write hiragana from memory. I find that I can read hiragana but I cannot write it without reference. the loop: romaji prompt card on top -> I write the character by hand on a canvas on the bottom -> flip prompt card -> the real stroke order animates on top of my attempt -> i grade myself (got it or missed) -> missed cards come back until I get them. all 71 shuffled. also have an option between all 71 or base 46 kana only. keep track of how many of the 71 I've written from memory across sessions, on device. that count is the whole point of the app so put it where I'll see it. the strokes have to animate the way a pen moves, not trace the outline of the glyph. find a source for that. what it does not have: handwriting recognition, hints, nav bar, settings, accounts, streaks, percentages, no skip cards, self grading is the whole point. before you write any code, give me a build brief as SPEC.md. This will have info about the app, the screen map with what's on each screen, user flows, where the stroke data comes from and what attribution it obliges me to show, and what you are deliberately not building. I'm handing that file to a design tool, so the screen map has to fit on one screen — put your reasoning below it, not inside it.
1. create a skeleton of the mobile app kanahero. screens and userflows. low fidelity unstyled only for now.
looks right, go ahead. set up the nextjs app and prefill the PWA metadata, then bake and verify the stroke data. give me a /verify page that renders all 71 animating so I can check it myself before we build anything on top of it.
strokes look good. now build the loop — every screen and flow in SPEC.md, functional only. no styling beyond what you need to test it. when it works and you've verified it, stop and tell me. design pass comes after.
ok go ahead and create hi fidelity mockups for all 4 screens. refer to the uploaded the-log-reference html file. That file contains channel specific information. Make the high fidelity mocup specific for kanahero
skip playwright right now. polish design. refer to /design folder
The code, if you'd rather read than build. The prompts above are the actual path.
github.com/joeyguierra/kanaheroThe stroke data I pulled and checked the night before. Here's the file. Everything else you're watching happen.