DEV Community: leopaul29

I Built a Complete Japanese Study App in One Day — Without Writing a Single Line of Code

leopaul29 — Wed, 20 May 2026 09:30:16 +0000

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

👘 I Built an AI That Suggests Japanese Outfits Based on Weather (Using Auth0 & GPT-4)

leopaul29 — Sun, 19 Oct 2025 16:15:28 +0000

🎌 Building a Japanese Fashion AI Agent with Auth0, LangChain & Real-Time Weather Data

This is a submission for the Auth0 for AI Agents Challenge

What I Built

Japanese Fashion AI Agent is an intelligent chatbot that combines cultural fashion expertise with real-time weather data to suggest personalized Japanese-inspired outfits for any city in the world.

The Problem It Solves

Ever wondered what to wear in Tokyo's humid summer or Kyoto's snowy winter? Or how to incorporate beautiful Japanese clothing elements like kimono, yukata, or modern streetwear into your wardrobe based on actual weather conditions? This AI agent solves that by:

🌍 Fetching real-time weather for any global city using Open-Meteo API
👘 Suggesting authentic Japanese fashion - from traditional (kimono, yukata, hakama) to modern streetwear
😂 Adding humor and cultural context - making fashion advice entertaining and educational
🔐 Securing user sessions with Auth0 authentication

Key Features

✅ AI Agent with ReAct Pattern - Uses LangChain to autonomously reason, call weather APIs, and generate recommendations

✅ Japanese Fashion Expertise - Trained on traditional and contemporary Japanese clothing

✅ Global Weather Integration - Real-time data for 100,000+ cities worldwide

✅ Auth0 Ready - Built with authentication best practices for production scaling

Demo

🚀 Live Demo: https://japan-outfit-ai.streamlit.app/

📦 GitHub Repository: [https://github.com/leopaul29/japanese-fashion-ai]

Screenshots

Login Screen

Simple authentication flow powered by Auth0

AI Agent in Action

AI agent fetching Tokyo weather and suggesting a yukata outfit

Example Interaction

User: "What should I wear in Tokyo today?"

AI Agent: 
🌤️ Weather in Tokyo, Japan: 22°C, clear sky, 
precipitation: 0mm, wind: 8 km/h

Perfect spring weather for a light indigo yukata 
with a subtle floral pattern! Pair it with geta 
sandals for that authentic click-clack sound effect 
(+10 style points). Since there's a gentle breeze, 
throw on a casual haori jacket - think of it as 
the Japanese cardigan but way cooler. 

You'll look like you just stepped out of a Studio 
Ghibli film! 🎌

How It Works

User logs in via Auth0 (fake log for instance)
Enters any city (e.g., Tokyo, Paris, Kyoto)
AI Agent reasons: "I need weather data first"
Calls get_weather tool → Fetches real-time data
Analyzes conditions → Suggests Japanese clothing
Returns humorous, culturally-informed advice

How I Used Auth0 for AI Agents

Authentication Architecture

I built this project with Auth0 OAuth 2.0 best practices, using the PKCE (Proof Key for Code Exchange) flow for secure authentication:

# Auth0 Configuration
AUTH0_DOMAIN = os.getenv("AUTH0_DOMAIN")
AUTH0_CLIENT_ID = os.getenv("AUTH0_CLIENT_ID")
AUTH0_CLIENT_SECRET = os.getenv("AUTH0_CLIENT_SECRET")

# PKCE Flow Implementation
def generate_code_verifier():
    return base64.urlsafe_b64encode(
        secrets.token_bytes(32)
    ).decode('utf-8').rstrip('=')

def generate_code_challenge(verifier):
    digest = hashlib.sha256(verifier.encode('utf-8')).digest()
    return base64.urlsafe_b64encode(digest).decode('utf-8').rstrip('=')

Why Auth0 for AI Agents?

1. Secure User Identity Management

AI agents need to know WHO is making requests
Auth0 provides verified user profiles (email, name)
Enables personalized recommendations and usage tracking

2. Token Management for API Calls

AI agents often call multiple external APIs (weather, fashion databases, etc.)
Auth0's token system could secure these calls in production
Future enhancement: Use Auth0 tokens to authenticate agent API requests

3. Session State & Security

# Session management after Auth0 login
if user_authenticated:
    st.session_state.authenticated = True
    st.session_state.user_info = {
        "email": user_data['email'],
        "name": user_data['name']
    }

4. Scalability for Production

Current demo uses simplified login for hackathon speed
Full OAuth 2.0 flow implemented and ready to activate
When scaling, Auth0 handles millions of users effortlessly

Lessons Learned and Takeaways

🧠 Key Insights

1. AI Agents Need Structure
Initially, I let GPT generate responses freely, which led to hallucinated weather data! The solution was implementing the ReAct pattern (Reasoning + Acting):

Thought: I need weather data
Action: get_weather("Tokyo")
Observation: Tokyo 22°C, clear
Thought: Now I can suggest outfit
Final Answer: Wear a light yukata...

This forced the agent to always use real tools before answering.

2. Streamlit + Auth0 Session Challenges
Streamlit's session state resets on redirects, which broke the OAuth state parameter validation. I learned to:

Store critical data server-side (or use fixed verifiers for demos)
Implement graceful fallbacks for hackathon timelines
Plan for proper session storage (Redis/database) in production

3. Prompt Engineering is Everything
My first prompt was generic: "Suggest an outfit"

After iteration:

"""You are a hilarious JAPANESE fashion advisor...
MUST use get_weather tool FIRST...
Suggest items like: kimono, yukata, hakama, haori...
Add humor with cultural references..."""

Result: 10x better responses with authentic Japanese fashion terms!

4. API Selection Matters

Initially tried using Auth0 tokens for Open-Meteo (unnecessary!)
Open-Meteo is free and open - no auth needed
Lesson: Understand your APIs before adding complexity

🎓 What I Learned

About AI Agents:

Agents need guardrails (max iterations, required tool usage)
Verbose mode is essential for debugging agent reasoning
Tools should return structured, validated data

💡 Advice for Other Developers

Building AI Agents?

Start with a single tool and make it bulletproof
Use ReAct pattern to prevent hallucinations
Test with edge cases ("test", "123", empty strings)
Keep max_iterations=5 (prevents infinite loops)

Integrating Auth0?

Read the Auth0 Quickstarts - they're excellent
Test OAuth flows locally before deploying
Use environment variables for ALL secrets
Implement demo auth for hackathons, but architect for production

Using Streamlit?

Session state is tricky with redirects - plan accordingly
Deploy early and often to catch cloud-specific issues
Keep it simple - Streamlit shines with straightforward UIs

🚀 What's Next?

If I continue this project:

✅ Activate full Auth0 OAuth 2.0 flow
✅ Add image generation (DALL-E) for outfit visualization
✅ Store user preferences (favorite cities, styles)
✅ Expand to other cultures (Korean hanbok, Indian saree AI agents)
✅ Weather forecasts (3-7 days) for trip planning

Tech Stack

Frontend: Streamlit
AI Agent: LangChain (ReAct pattern)
LLM: OpenAI GPT-4o-mini
Authentication: Auth0 (OAuth 2.0 PKCE)
Weather API: Open-Meteo
Deployment: Streamlit Cloud

Try It Yourself!

🌐 Live App: https://japan-outfit-ai.streamlit.app/

💻 Source Code: [https://github.com/leopaul29/japanese-fashion-ai]

📝 Login: Use any email/password (demo mode)

🎌 Try: Tokyo, Kyoto, Paris, New York, or your city!

Final Thoughts

This hackathon taught me that AI agents are only as good as their tools and constraints. Authentication isn't just about security - it's about creating personalized, trustworthy experiences. Auth0 makes it possible to focus on the AI magic while knowing the authentication layer is production-ready.

Special thanks to Auth0 for hosting this challenge and pushing developers to think about AI security from day one! 🙏

Built with ❤️ and a lot of yukata references 🎌

Have questions about the implementation? Drop a comment below!

Samurai Progress Dashboard: Gamifying Japanese Learning with KendoReact

leopaul29 — Mon, 29 Sep 2025 06:52:38 +0000

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 (ダッシュボード)

Missions Page (任務)

Profile Page

Shop (商店)

KendoReact Components Used

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

Grid (@progress/kendo-react-grid) - Mission list and shop items table with row selection and inline editing
TabStrip (@progress/kendo-react-layout) - Main navigation between Dashboard, Missions, Shop, Statistics, and Profile
Card/CardBody/CardHeader (@progress/kendo-react-layout) - Dashboard info cards and profile sections
Button (@progress/kendo-react-buttons) - Action buttons throughout the app
Chip/ChipList (@progress/kendo-react-buttons) - Badge display system
Switch (@progress/kendo-react-inputs) - Language toggle (EN/JP)
ProgressBar (@progress/kendo-react-progressbars) - XP progression visualization
Notification/NotificationGroup (@progress/kendo-react-notification) - Success messages for purchases and actions
DropDownList (@progress/kendo-react-dropdowns) - Language selector (alternate implementation)
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>

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();

Grid Customization

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

Bilingual Support

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

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