CodeNative — Learn to Code in Your Native Language

AI-powered code learning for the 80% of developers who don't speak English natively. Line-by-line explanations, cultural stories, and visual GitHub tours in 20+ languages.

Comment

Inspiration

I have a younger brother. He's 15 and obsessed with programming — the kind of obsessed where he watches YouTube tutorials until 2am, takes notes in a notebook, and asks me a hundred questions about Python every weekend.

There's just one problem. He doesn't speak English well.

I watched him try to follow a freeCodeCamp tutorial last winter. He paused the video every 20 seconds to translate words. He copy-pasted error messages into Google Translate. After an hour he closed his laptop and said, "akam, men buni tushunmayapman, balki men buni qila olmasman" — "brother, I don't understand this, maybe I just can't do this."

That sentence didn't leave my head. He can do it. His brain works. He has the patience, the curiosity, the late-night discipline. The only thing standing between him and a software career is a language he was never taught well.

And he is not alone. More than 80% of people learning to code right now do not speak English natively. In Central Asia, in South Asia, in the Middle East, in Latin America — millions of kids open VS Code and immediately hit a wall that has nothing to do with logic or algorithms. It's a wall built from undefined is not a function and Stack Overflow answers no one translated.

I built CodeNative for my brother first. And then for every kid like him.

What it does

CodeNative is an AI-powered code learning platform that works in 20+ native languages — Uzbek, Kazakh, Kyrgyz, Tajik, Turkmen, Russian, Turkish, Azerbaijani, Arabic, Hindi, Chinese, Japanese, Korean, Indonesian, Spanish, Portuguese, French, German, Italian, and English.

There are four core features:

1. Code Explainer. Paste any code into a Monaco editor. Get a line-by-line explanation in your language, with three difficulty modes (Beginner / Intermediate / Advanced). Click any line to highlight its explanation. Every technical term gets a clear definition in your own tongue.

2. Story Mode (CodeStory). This is the part I'm most proud of. Abstract programming concepts get turned into culturally rooted stories. For an Uzbek learner, recursion becomes a matryoshka — a doll inside a doll inside a doll. For an Arabic learner, async/await becomes the coordination of prayer times across a mosque. For a Hindi learner, OOP becomes the character roles of the Mahabharata. The AI picks a cultural anchor from your background and weaves a 250-word story that maps directly onto the code concept. There's also text-to-speech so you can hear the story in your language.

3. RepoGuide. Paste any public GitHub repo URL. You get a D3.js interactive visual tree where folders are color-coded by purpose (config / source / docs / tests), node size reflects AI-judged importance, and clicking any file opens a guided modal in your native language. A "Start Here" recommendation tells you the optimal learning path through the codebase — the one file a newcomer should read first.

4. Daily Learning. A spaced-repetition flashcard system with two modes: flip cards and multiple choice. Code snippets get proper syntax highlighting. Your streak builds every day you study. The cards adapt based on concepts you've recently explored.

You can also share any story as a beautifully designed OG card to Twitter / Telegram / WhatsApp — your friends see the card unfurl in their chat and feel curious.

How I built it

Solo, in 16 days, on a $25 budget.

The stack:

  • Next.js 14 (App Router) + TypeScript in strict mode — no any allowed anywhere in the codebase
  • Tailwind CSS with a custom design system: deep navy #0A0E27, warm gold #F5B700, glass morphism, three typefaces (Inter, JetBrains Mono, Plus Jakarta Sans)
  • Anthropic Claude as the brain — Claude Sonnet 4.6 for explanations and stories (where quality matters), Claude Haiku 4.5 for flashcards (where cost matters)
  • Monaco Editor for the code input
  • D3.js for the interactive repo visualization
  • Framer Motion for every animation — springs only, never linear easing
  • Octokit for the GitHub API
  • Zustand with persist middleware for client state and streak tracking
  • react-syntax-highlighter + Prism for colored code in flashcards
  • next/og edge runtime for the dynamic OG share cards (1200×630 PNGs generated on the fly)
  • Deployed on Vercel with auto-deploy from main

The trickiest engineering piece was the prompt design. Getting Claude to stay entirely in the target language while keeping code identifiers in their original form, then return strict JSON with the right schema — every language needed careful tuning. I wrote separate cultural-hints arrays for each language so the AI has anchors to pick from when generating analogies.

Challenges I ran into

1. Cultural authenticity at scale. It's easy to ask an AI for "an Uzbek story." It's much harder to get a story that doesn't feel like a tourist brochure. I had to inject specific cultural anchors per language — qaynona-kelin hierarchy, matryoshka, Bukhara trading, choyxona conversations — so the analogies feel like something your grandmother would tell you, not a generic AI hallucination.

2. Mobile experience. My first build was beautiful on a 27" monitor and unusable on a phone. The Code Explainer's side-by-side layout broke completely. I rebuilt mobile from scratch — tabs instead of split-screen, a sticky bottom dock nav with active-route pill animations, font scaling, container padding tuned for thumb reach.

3. The flashcard UX. The first version showed code as plain monospace text in the question. It looked dead. I added proper syntax highlighting via Prism, then added a Multiple Choice mode alongside the flip cards because some learners absorb better through recognition than recall. The MCQ explanation appears with color-coded feedback (emerald for correct, red for wrong) and the next card auto-advances.

4. Edge runtime gotchas with dynamic OG. Getting next/og to generate beautiful 1200×630 PNG cards with gradients and ambient glows took several iterations — Satori (the SVG renderer behind it) doesn't support every CSS property, so I had to build the look entirely with linear-gradient, radial-gradient, and box-shadow.

5. Working solo on a 16-day deadline. Probably the biggest challenge. There was no one to bounce ideas off. Every architectural decision was mine to live with. I had to be brutal about scope — I deferred auth and Supabase to a post-hackathon iteration so I could ship four real, polished features instead of six half-done ones.

Accomplishments I'm proud of

  • The Story Mode actually works. A real Uzbek-speaking friend tested it on recursion and laughed out loud at the matryoshka analogy — that was the moment I knew this was real.
  • Every feature ships in 20 languages today, not "coming soon."
  • The design genuinely doesn't look AI-generated. Glass morphism, gold ambient orbs, springs everywhere, custom logo, responsive mobile dock.
  • The codebase is strict TypeScript with zero anys. Every API response is typed. Every component has proper props.
  • 100% open source on GitHub. Anyone can fork it and add their own language.

What I learned

  • Prompt engineering is real engineering. A 200-line system prompt isn't a hack, it's the actual program logic for an AI feature.
  • Cultural design beats translated design. A Hindi UI translated from English is not the same as a UI conceived in Hindi. Even small things like RTL flag handling for Arabic, or showing the native language name (Oʻzbekcha) instead of the English one ("Uzbek"), change how the app feels.
  • Ship the spike, then polish. I built every feature to "barely works" first, then went back and polished the one with the biggest payoff (Story Mode). Trying to polish in order would have left me with half a landing page on Day 16.
  • Mobile is not "responsive desktop." Mobile is its own product. I should have designed mobile-first from Day 1.

What's next

  • Voice mode — ask questions about code via mic, hear answers spoken back (Web Speech API)
  • In-browser code playground — Pyodide for Python, V8 sandbox for JavaScript, so learners can actually run the code they just understood
  • Achievement dashboard — badges, streaks, weekly Recharts grafiks, polyglot tracking
  • PWA + offline mode — so a kid on patchy rural internet can still keep their streak
  • Supabase auth — Google + GitHub OAuth, sync progress across devices
  • Community library — top user-shared explanations, sorted by language

If this helps even one kid stop saying "men buni qila olmasman", it was worth every late night.

Built With

  • ai
  • anthropic
  • claude
  • d3.js
  • edge-functions
  • framer-motion
  • github-api
  • monaco-editor
  • nextjs
  • nextjs-og
  • octokit
  • prism
  • radix-ui
  • react
  • react-syntax-highlighter
  • recharts
  • shadcn-ui
  • tailwindcss
  • typescript
  • vercel
  • zustand
Share this project:

Updates