48 Hours to Gamify Japanese Learning: What Worked, What I Faked

ABOUT

• Event page

• Hackathon post

• Github

• Demo live

THE SETUP

KendoReact Free Components Challenge. Solo developer. The constraint: build something production-ready using only free KendoReact components—no premium features allowed.

The idea hit fast: gamify Japanese language learning. Make Anki study sessions feel like an RPG. Track Japan travel goals alongside kanji progress. Add XP, gold, missions, a shop. Make it bilingual. Ship it in 48 hours.

I'd never used KendoReact before. I'd never implemented i18next. I barely knew what a samurai-themed progress tracker should look like.

Perfect hackathon conditions.

THE PLAN VS REALITY

The Plan:

• Dashboard with stats

• Mission system with dropdown status editor (todo → ongoing → done)

• Shop with inline "Buy" buttons in each row

• Full Japanese translation

• Stats page with charts

• Profile with badges

• Everything polished, everything functional

The Reality:

Hour 12: Hit the paywall. Custom cell renderers in KendoReact Grid? Premium only. My beautiful inline buy buttons? Gone. My dropdown status editor? Premium feature.

I had two choices: pivot the entire UX or give up.

The cuts I made:

1. Shop buttons → Row selection pattern. Can't put a button in each row? Fine. Click a row, display a buy card above the grid. Actually cleaner UX.

2. Status dropdown → Checkbox. Can't use a dropdown to cycle todo → ongoing → done? Use a boolean checkbox for "complete." Simpler. Better.

3. Elaborate mission templates → Simple add button. Was going to build a whole mission creation flow. Ended up with one button and manual entry. Good enough.

4. Real Anki integration → Mock data. This one hurt. The original vision was live Anki stats. Reality check: that's a whole separate project. Used mock weekly XP data instead.

The scope changed because the free tier forced creative UX decisions. And honestly? The final version is cleaner than what I originally planned.

THE CRITICAL MOMENT

Hour 36. The dark theme was live. Red and black samurai aesthetic, looking sharp.

Then I opened the Missions tab.

White text on white background. Completely unreadable.

The problem: KendoReact Grid has alternating row colors by default. Every other row was white. My dark theme's white text was invisible on those rows. The hover state? Also white background.

I had three hours until demo time.

First attempt: try to override the alternating row colors. Didn't work. The CSS specificity was fighting me.

Second attempt: add !important flags everywhere. Still broken. The hover state was still turning rows white.

Third attempt: target .k-alt class specifically. Force all rows to the same dark background. Override hover with !important. Force cell backgrounds to transparent.

.k-grid tbody tr {
  background-color: #1a1a1a !important;
}

.k-grid tbody tr.k-alt {
  background-color: #1a1a1a !important;
}

.k-grid tbody tr:hover {
  background-color: #2d2d2d !important;
}

It worked. Two hours before demo.

That moment taught me: default component behavior can kill you in a themed app. Test every state. Hover, active, disabled, alternate rows. All of it. CSS specificity is a game of chicken with component libraries.

WHAT SHIPPED

Actually working at demo time:

✅ Full navigation with TabStrip
✅ Mission grid with inline editing and completion checkboxes
✅ Shop with row selection → buy card pattern (gold checking, purchase notifications)
✅ Dashboard with XP progress bar and stat cards
✅ Profile with badges displayed as Chips
✅ Language toggle (EN/JP) that actually switches everything
✅ Recharts line graph showing mock weekly XP progression
✅ Complete samurai theme (readable on all backgrounds)

Duct-taped together:

⚠️ Mock data everywhere (no real persistence)
⚠️ The language switcher worked perfectly, but I only translated ~20 strings
⚠️ "Oda Nobunaga" as default player name (cultural easter egg that no one would notice)
⚠️ Statistics page had one chart when I wanted three

Not working at all:

❌ Data persistence (refresh = data loss)
❌ The "Settings" theme toggle did nothing
❌ Mission templates I sketched out at hour 6

Honestly? For 48 hours solo with a new component library and i18next implementation from scratch, it shipped clean. The gamification loop worked. You could complete missions, earn gold, buy items, see your XP go up. It felt like a real app.

TAKEAWAY FOR THE NEXT ONE

Do differently: Don't theme until the functionality works. I spent 6 hours on the samurai aesthetic before discovering the grid contrast bug. Should've built features first, made it pretty later. Theming is a trap when you're racing the clock.

Keep doing: Embrace the constraints. The row selection + external buy button ended up being better UX than inline buttons would've been. The checkbox for mission completion is more intuitive than a three-state dropdown. Sometimes limitations force you into better design.

The real lesson: AI-assisted development is a superpower under time pressure. I used Claude to brainstorm Japanese cultural elements, generate initial layouts, troubleshoot CSS specificity wars, and iterate on designs. The MVP existed in 12 hours because I wasn't writing boilerplate from scratch. I was making decisions and letting AI handle the tedious parts.

Next hackathon? Build the ugliest functional version first. Ship the core loop. Theme it in the final 20%. And always, always test your dark theme on alternating table rows.

---

Samurai Progress Dashboard shipped live on Vercel. 10+ KendoReact components. Full bilingual support. Built in under 48 hours. Check it out.

The grid contrast bug fix? Committed at 3 AM. The demo? 8 AM. Some things never change.

---

🤖 Generated by AI from the LLM logs.