One paste. Five study tools. Zero setup. Here's how I built NihongoSpark for the MeDo Hackathon.
What I Built
NihongoSpark is a web app that takes any Japanese text — or even just an English description of a topic — and instantly generates five interconnected study tools: flashcards, a quiz, a mind map, a kanji breakdown, and a JLPT grammar pattern spotter.
The entire application was built using MeDo, Baidu's no-code AI app builder, without writing a single line of code manually. From the first prompt to a deployed, publicly accessible URL took less than a day.
The Problem It Solves
Japanese learners constantly juggle multiple tools:
- Anki for flashcards
- Jisho for kanji lookups
- Separate grammar reference apps
- Quiz generators that don't accept custom input
None of these tools talk to each other, and none let you feed in your own source text. Studying a news article or manga panel means manually creating materials from scratch — which nobody does.
NihongoSpark collapses that entire workflow into a single input box.
Key Features
⛩️ Kanji Breakdown (signature feature)
For every kanji found in the text:
- Radical decomposition with meanings — e.g. 語 = 言 (speech) + 吾 (I)
- On'yomi and kun'yomi readings with example words
- JLPT level badge (N5 to N1)
- AI-generated mnemonic — a short story linking radicals to meaning, so you actually remember it
- Stroke count
This is what no generic flashcard app does. The mnemonic alone makes kanji memorable in a way rote repetition never does.
🧠 Mind Map
Interactive SVG mind map of the key concepts in the text. Nodes are draggable and clickable for definitions. Includes a full-screen expand modal for dense texts and a JP/EN toggle that instantly switches all node labels between Japanese and English.
🃏 Flashcards
Vocabulary cards with furigana and English meaning. 3D flip animation on click. Cards you mark "Review again" cycle back into the deck. Completion screen when all cards are mastered.
📝 Quiz
5 multiple-choice questions mixing three types:
- Meaning — "What does 食べる mean?"
- Reading — "How do you read 東京?"
- Fill in the blank — "私は___が好きです。"
Includes a visible timer bar, instant feedback with explanation, and a score summary. The quiz only starts when you click "Start Quiz" — no auto-start surprise.
📐 Grammar Pattern Spotter
Scans the text for JLPT N5–N1 grammar patterns. Each pattern is:
- Highlighted in the original text with color coding by level (N5 green → N1 red)
- Listed below with its name, JLPT level, English explanation, and an example sentence
Example Interaction
Input:
東京は日本の首都で、世界で最も人口が多い都市の一つです。
Output across all five panels:
| Panel | Output |
|---|---|
| Kanji | 東 = 木 (tree) + 日 (sun) → "The sun rising behind a tree — that's east." JLPT N4 |
| Flashcards | 首都 → Capital city · 人口 → Population · 都市 → City |
| Quiz | Q: What does 首都 mean? A) Population B) Capital city ✓ C) Metropolis D) Country |
| Mind Map | Tokyo → [Capital] → [World's largest] · Tokyo → [Japan] → [Asia] |
| Grammar | 〜の一つ (N4) "one of ~" · 〜で (N5) location particle |
Demo & Screenshots
(Screenshots to be added — see the live app link below)
Live app: NihongoSpark on MeDo
Demo video: YouTube
How I Used MeDo — The Full Build Sequence
The entire app was built through MeDo's chat interface in 8 prompts. No code editor, no terminal, no deployment config.
Prompt 1 — Initial app generation
Described the full app in plain English. MeDo generated a Requirement.md and offered a "Generate App" button. One click and the skeleton was live.
Prompt 2 — Flashcards panel
Specified flip animation, deck cycling behavior, and progress indicator. Functional on first try.
Prompt 3 — Quiz panel
Added three question types, a timer bar, and a score summary screen.
Prompt 4 — Mind Map panel
SVG-based interactive mind map with draggable nodes and click-to-define tooltips.
Prompt 5 — Kanji Breakdown panel
The core feature: radical decomposition, dual readings, JLPT badge, AI mnemonic, stroke count per character.
Prompt 6 — Grammar Pattern Spotter
Full-width fifth panel detecting N5–N1 patterns with color-coded highlights and per-pattern explanations.
Prompt 7 — Polish & UX fixes
Fixed textarea contrast (black on black bug), added "Start Quiz" button, built mind map expand modal with JP/EN toggle, reorganized panel layout to: Kanji + Mind Map / Flashcards + Quiz / Grammar full-width.
Prompt 8 — Deploy
One click. MeDo deployed to Baidu Cloud with a live public URL.
Total credits used: ~400
Lessons Learned
Prompt specificity is everything.
Vague prompts give vague results. The more you describe exact behavior, layout, and edge cases upfront, the fewer fix iterations you need — and each iteration costs credits.
One feature per prompt.
Trying to build two panels in one prompt leads to one being half-baked. Focused prompts gave much cleaner results every time.
Credit budget is real.
Each prompt costs ~15 credits. You get 300 free credits on signup + 100 per day. That's roughly 25–30 prompts total. Plan your build sequence before you start — don't discover the prompt order by trial and error.
MeDo handles full-stack surprisingly well.
Frontend, backend logic, and AI API calls were all wired together without any manual configuration. For a no-code tool, that's genuinely impressive.
Bug fixes need precise symptom descriptions.
When the textarea had black text on black background, describing the exact visual symptom (not the suspected cause) gave a faster fix than speculating about CSS conflicts.
Find your differentiator early.
Generic flashcard apps already exist. The Kanji Breakdown with AI mnemonics is what makes NihongoSpark worth building and worth submitting. Define your unique feature first, then build everything else around it.
What's Next
Features intentionally left out of scope for this release that would make strong v2 additions:
- Spaced repetition algorithm (SM-2) for flashcard scheduling
- Audio pronunciation via text-to-speech
- Progress tracking and study history
- Export to Anki-compatible CSV
- JLPT mock exam mode using the grammar spotter data
Built with MeDo for the Build with MeDo Hackathon 2026 · #BuiltWithMeDo
Top comments (0)