DEV Community

Yrladd
Yrladd

Posted on

Samurai Progress Dashboard: Gamifying Japanese Learning with KendoReact

#devchallenge #kendoreactchallenge #react #webdev

This is a submission for the KendoReact Free Components Challenge.

What I Built

Samurai Progress Dashboard (サムライ進捗) is a gamified progress tracker that combines Japanese language learning with travel goal tracking. Inspired by samurai culture, this app transforms your Anki study sessions and Japan trip planning into an engaging RPG-like experience.

The problem it solves: Learning Japanese and planning Japan trips can feel overwhelming and monotonous. By adding gamification elements (XP, gold, missions, shop items, badges), users stay motivated and track their progress in a fun, visual way.

Key Features:

  • 🎯 Mission System: Track learning goals and travel objectives with deadlines and rewards
  • 🏪 Shop: Purchase virtual items (Ramen Bowl 🍜, Matcha Tea 🍵, Kimono 👘, etc.) using earned gold
  • 📊 Statistics Dashboard: Visualize XP progression with charts and view player stats
  • 🏆 Badge System: Earn achievements as you complete missions
  • 🌐 Bilingual Interface: Full English/Japanese translation toggle (EN/日本語)
  • 🎨 Samurai Theme: Dark red & black aesthetic inspired by Japanese warrior culture

Demo

🔗 Live Demo: https://samurai-progress-dashboard.vercel.app/

📦 GitHub Repository: https://github.com/leopaul29/Samurai-Progress-Dashboard

Screenshots:

Dashboard (ダッシュボード)
Dashboard showing player stats, XP progression chart, recent missions, and purchases

Missions Page (任務)
Missions grid with editable tasks and completion tracking

Profile Page
Player profile with badges, statistics, and language toggle

Shop (商店)
Shop grid with items to purchase using gold

KendoReact Components Used

I successfully integrated 10+ KendoReact free components into this project:

  1. Grid (@progress/kendo-react-grid) - Mission list and shop items table with row selection and inline editing
  2. TabStrip (@progress/kendo-react-layout) - Main navigation between Dashboard, Missions, Shop, Statistics, and Profile
  3. Card/CardBody/CardHeader (@progress/kendo-react-layout) - Dashboard info cards and profile sections
  4. Button (@progress/kendo-react-buttons) - Action buttons throughout the app
  5. Chip/ChipList (@progress/kendo-react-buttons) - Badge display system
  6. Switch (@progress/kendo-react-inputs) - Language toggle (EN/JP)
  7. ProgressBar (@progress/kendo-react-progressbars) - XP progression visualization
  8. Notification/NotificationGroup (@progress/kendo-react-notification) - Success messages for purchases and actions
  9. DropDownList (@progress/kendo-react-dropdowns) - Language selector (alternate implementation)
  10. Indicators (@progress/kendo-react-indicators) - Loading states and visual feedback

Additional Libraries:

  • react-i18next + i18next-browser-languagedetector - Internationalization
  • @progress/kendo-theme-fluent - Custom samurai-themed styling
  • recharts - Data visualization for the Statistics page

Data Visualization with Recharts

For the Statistics page, I integrated Recharts to create interactive charts showing progress over time. Using mocked weekly XP data, I implemented:

// Mocked data for XP progression chart
const weeklyXpData = [
  { day: 'Mon', xp: 10 },
  { day: 'Tue', xp: 25 },
  { day: 'Wed', xp: 40 },
  { day: 'Thu', xp: 70 },
  { day: 'Fri', xp: 90 },
  { day: 'Sat', xp: 120 },
  { day: 'Sun', xp: 160 }
];

<LineChart width={600} height={300} data={weeklyXpData}>
  <Line type="monotone" dataKey="xp" stroke="#dc143c" />
  <XAxis dataKey="day" />
  <YAxis />
  <Tooltip />
</LineChart>
Enter fullscreen mode Exit fullscreen mode

Development Journey

Key Learnings:

1. Creative Workarounds for Free Components
The biggest challenge was working within the constraints of free components. I couldn't use custom cell renderers (premium feature) in the Grid, so I got creative:

  • Mission completion: Used checkbox editor instead of dropdown (todo → ongoing → done)
  • Shop purchases: Implemented row selection + external buy button instead of inline action buttons
  • This taught me to think about UX differently and find elegant solutions within limitations

2. First-Time i18next Implementation
Implementing bilingual support was a major learning experience:

  • Set up language detection based on browser settings
  • Created translation files for EN/JP
  • Built a custom language switcher with KendoReact Switch
  • Learned about translation key organization and fallback handling

3. Custom Theming
Created a complete samurai-inspired dark theme:

  • Red (#dc143c) and black (#1a1a1a) color palette
  • Custom CSS overrides for all KendoReact components
  • Fixed contrast issues for accessibility
  • Added Japanese aesthetic elements (sharp borders, red accents, gradients)

4. AI-Assisted Rapid Development
Used AI (Claude) to:

  • Brainstorm Japanese cultural elements and item names
  • Generate initial page layouts
  • Troubleshoot KendoReact component issues
  • Iterate quickly on design concepts
  • Built MVP in under 48 hours thanks to AI + KendoReact's components

What I'm Most Proud Of:

The bilingual translation system. This was my first time implementing i18next, and it works flawlessly. The app seamlessly switches between English and Japanese, maintaining context and layout. This skill will be invaluable for future projects targeting Japanese users.

Fun Facts:

  • Historical Easter Egg: The default player name is "織田信長 (Oda Nobunaga)" - one of the three great unifiers of Japan and a legendary daimyo
  • 48-Hour MVP: From idea to working prototype in less than two days
  • Cultural Research: Recently studied Japanese history, which inspired the samurai theme and mission names
  • Gamification Philosophy: Combined Anki learning system with RPG mechanics to make language learning addictive

Technical Highlights

State Management 

// GameContext provides global state for XP, gold, badges, items
const { level, xp, gold, badges, addXp, addGold, addBadge } = useGame();
Enter fullscreen mode Exit fullscreen mode

Grid Customization 

// Missions grid with inline editing
<Grid 
  data={missions}
  editable={{ mode: 'incell' }}
  onItemChange={handleItemChange}
>
  <GridColumn field="status" title="Done" editor="boolean" />
</Grid>
Enter fullscreen mode Exit fullscreen mode

Bilingual Support 

const { t, i18n } = useTranslation();
<h1>{t("dashboardtitle")}</h1>
i18n.changeLanguage('jp');
Enter fullscreen mode Exit fullscreen mode

Target Audience

Perfect for:

  • Japanese language learners using Anki or similar spaced repetition systems
  • People planning trips to Japan who want to gamify their preparation
  • Anyone who loves RPG mechanics and Japanese culture
  • Students looking for motivation to maintain consistent study habits

Future Enhancements

  • Data persistence with localStorage/backend
  • More shop items and badge types
  • Mission templates (JLPT prep, travel checklist)
  • Social features (leaderboards, friend challenges)
  • Mobile app version
  • Integration with actual Anki stats

Conclusion

This project showcases how KendoReact's free components can build a fully-featured, production-ready application with complex interactions, beautiful UI, and bilingual support. The constraints of free components pushed me to think creatively about UX patterns, resulting in a cleaner, more intuitive interface.

Special thanks to the KendoReact team for providing such powerful free components and excellent documentation!

サムライ進捗ダッシュボード：KendoReactで日本語学習をゲーム化

作ったもの

サムライ進捗ダッシュボードは、日本語学習と日本旅行の目標追跡を組み合わせた、ゲーム化された進捗管理アプリです。侍の文化にインスピレーションを受け、Ankiの勉強セッションと日本旅行の計画をRPGのような楽しい体験に変えます。

主な機能：

  • 🎯 ミッションシステム：学習目標と旅行目標を期限と報酬付きで追跡
  • 🏪 ショップ：獲得したゴールドで仮想アイテムを購入
  • 📊 統計ダッシュボード：XPの進捗をチャートで視覚化
  • 🏆 バッジシステム：ミッション完了で実績を獲得
  • 🌐 バイリンガルインターフェース：英語/日本語の完全対応
  • 🎨 サムライテーマ：日本の武士文化に触発された赤と黒のダークテーマ

KendoReactの無料コンポーネントだけで、完全に機能するゲーム化アプリを48時間以内に構築できることを証明しました！

Made with ⚔️ by a Japanese culture enthusiast
KendoReact + React + TypeScript + Vite

Top comments (0)