DEV Community

Cover image for I Built a Free, Multilingual AI Education Platform — Here's How 🌍🤖
Ramesh Reddy Adutla
Ramesh Reddy Adutla

Posted on

I Built a Free, Multilingual AI Education Platform — Here's How 🌍🤖

#webdev #ai #opensource #nextjs

What if anyone in the world could learn AI — for free, in their own language?

That question kept nagging me.

I'm an engineering leader who's spent years building systems at scale. But when I looked at the AI education landscape, I saw the same pattern repeating: great content locked behind paywalls, taught exclusively in English, and assuming you already have a CS degree.

My mother speaks Telugu. My colleague's parents speak Hindi. A friend in Brussels works in Dutch. None of them could find a single, structured AI course in their own language that didn't cost hundreds of dollars.

So I built one.

AI Educademy is a free, open-source platform that teaches AI from absolute zero to production mastery — in 5 languages, with 10 progressive programs, powered by a modern Next.js stack.

🔗 Live: aieducademy.vercel.app
⭐ GitHub: github.com/ai-educademy/ai-platform

The Problem Nobody's Solving

Here's what I found when I surveyed AI education:

  • Fragmented — YouTube playlists, random blog posts, half-finished Udemy courses. No coherent path from "What is AI?" to "Deploy an ML pipeline."
  • English-only — 75% of the world doesn't speak English as a first language. If you're a curious teenager in Hyderabad or a career-changer in Lyon, your options are... limited.
  • Paywalled — The best structured courses cost $50–$500. That's a month's salary in some countries.
  • Assumes prerequisites — Most courses start with "Let's import TensorFlow" before explaining what a neural network actually is.

AI is going to reshape every industry. The people building it — and the people affected by it — shouldn't need a credit card and fluent English to understand it.

The Solution: AI Educademy 🌱→🌲

AI Educademy uses a nature growth metaphor. You start as a seed and grow into a forest:

🌱 AI Seeds        → "What is AI?" (no code, no maths)
🌿 AI Sprouts      → Foundations (data, algorithms, neural nets)
🌳 AI Branches     → Specialisations (ML, CV, NLP, GenAI)
🏕️ AI Canopy       → Production AI (MLOps, RAG, governance)
🌲 AI Forest       → Mastery (research, leadership, frontier AI)
Enter fullscreen mode Exit fullscreen mode

Plus a parallel craft-engineering track for building real AI products:

✏️ AI Sketch       → Design thinking for AI products
🪨 AI Chisel       → Engineering fundamentals
⚒️ AI Craft        → Building real AI systems
💎 AI Polish       → Production-grade refinement
🏆 AI Masterpiece  → Capstone portfolio projects
Enter fullscreen mode Exit fullscreen mode

10 programs. 2 tracks. 5 languages. 150+ MDX lessons. All free. All open source.

Every lesson is available in English 🇬🇧, French 🇫🇷, Dutch 🇳🇱, Hindi 🇮🇳, and Telugu 🇮🇳 — with a content fallback chain so missing translations gracefully degrade to English.

Architecture Deep Dive 🏗️

This is the part you're here for. Let me walk through the key technical decisions.

Next.js App Router + next-intl

The platform runs on Next.js with the App Router. Every route is locale-aware via next-intl:

src/app/[locale]/
├── page.tsx                              # Homepage
├── programs/[programSlug]/
│   └── lessons/[slug]/page.tsx           # Lesson viewer
├── dashboard/page.tsx                    # Progress tracking
├── playground/page.tsx                   # AI games
└── about/page.tsx
Enter fullscreen mode Exit fullscreen mode

The [locale] segment is handled by next-intl middleware, which detects the browser language, matches it against supported locales (en, fr, nl, hi, te), and routes accordingly. A LanguageSwitcher component lets users override at any time.

MDX Content System

Each lesson is an MDX file with rich frontmatter:

---
title: "What is AI? A Friendly Introduction"
description: "No jargon, no maths — just a simple explanation..."
order: 1
difficulty: "beginner"
duration: 10
icon: "🤖"
published: true
---

## Welcome! 👋

If you've ever heard people talk about "AI" and thought
_"What even is that?"_ — you're in exactly the right place.

<Illustration
  src="/images/lessons/what-is-ai.svg"
  alt="Traditional software follows rules. AI learns patterns."
  caption="The core difference: rules vs learning"
/>
Enter fullscreen mode Exit fullscreen mode

MDX gives us the best of both worlds: authors write in Markdown (low barrier), but we can embed React components like <Illustration>, <Quiz>, and <CodePlayground> directly in lesson content.

We use next-mdx-remote for rendering and gray-matter for frontmatter parsing at build time.

The Content Fallback Chain

This was a key design decision. Not every lesson has been translated into all 5 languages yet. So the content loader implements a fallback:

// Simplified from src/lib/lessons.ts
export function getLesson(program: string, slug: string, locale: string) {
  const localePath = `content/programs/${program}/lessons/${locale}/${slug}.mdx`;
  const enPath     = `content/programs/${program}/lessons/en/${slug}.mdx`;

  // Try locale-specific first, fall back to English
  const filePath = fs.existsSync(localePath) ? localePath : enPath;
  const raw = fs.readFileSync(filePath, "utf-8");
  const { data, content } = matter(raw);
  return { meta: data, content };
}
Enter fullscreen mode Exit fullscreen mode

This means contributors can translate one lesson at a time without breaking anything. The platform always works — it just gracefully degrades to English for untranslated content.

Git Submodules: The Secret Sauce

Here's what makes the architecture scale. Each of the 10 programs is its own GitHub repo, pulled into the platform via git submodules:

ai-platform/content/programs/
├── ai-seeds/          ← github.com/ai-educademy/ai-courses
├── ai-sprouts/        ← github.com/ai-educademy/ai-courses
├── ai-branches/       ← github.com/ai-educademy/ai-courses
├── ai-sketch/         ← github.com/ai-educademy/ai-courses
├── ai-chisel/         ← github.com/ai-educademy/ai-courses
├── ai-craft/          ← github.com/ai-educademy/ai-courses
├── ai-polish/         ← github.com/ai-educademy/ai-courses
├── ai-canopy/         ← github.com/ai-educademy/ai-courses
├── ai-forest/         ← github.com/ai-educademy/ai-courses
└── ai-masterpiece/    ← github.com/ai-educademy/ai-courses
Enter fullscreen mode Exit fullscreen mode

Why submodules over a monorepo?

  1. Independent versioning — Content authors can work on ai-seeds without touching platform code.
  2. Separate permissions — Translators get write access to content repos only.
  3. Auto-deploy — Each content repo has a GitHub Action that fires repository_dispatch to the platform repo, triggering a Vercel rebuild. Content changes go live in ~60 seconds.
  4. Clean separation — The platform is the shell; content is pluggable. Want to add a new program? Create a repo, add a submodule, register it in programs.json. Done.

Shared Design System

All UI components come from @ai-educademy/ai-ui-lib — a separate npm package with its own Storybook. The platform consumes it; the content repos don't need to know about it. Consistent design across everything.

PWA + Offline Support

The platform is a Progressive Web App powered by Serwist (a modern Workbox wrapper for Next.js). Users in areas with spotty internet can install it and access cached lessons offline. For an education platform targeting global learners, this isn't a nice-to-have — it's essential.

CI/CD Pipeline 

Push to main (or content repo dispatch)
    ↓
GitHub Actions CI
    ├── ESLint (strict TypeScript)
    ├── Next.js production build
    └── Playwright e2e tests (multi-browser)
    ↓
Vercel auto-deploy → aieducademy.vercel.app
Enter fullscreen mode Exit fullscreen mode

The Content Architecture

Here's how 150+ MDX files are organized across 10 programs × 5 locales:

content/programs/
└── ai-seeds/                    # Each program = one git repo
    ├── lessons/
    │   ├── en/                  # English (canonical source)
    │   │   ├── what-is-ai.mdx
    │   │   ├── how-machines-learn.mdx
    │   │   └── your-first-ai-model.mdx
    │   ├── fr/                  # 🇫🇷 French translations
    │   │   ├── what-is-ai.mdx
    │   │   ├── how-machines-learn.mdx
    │   │   └── your-first-ai-model.mdx
    │   ├── nl/                  # 🇳🇱 Dutch
    │   ├── hi/                  # 🇮🇳 Hindi
    │   └── te/                  # 🇮🇳 Telugu
    ├── assets/                  # Illustrations, diagrams
    └── program.json             # Program metadata
Enter fullscreen mode Exit fullscreen mode

The slug-based naming (what-is-ai.mdx) means the same slug resolves across all locales. The platform's programs.json registry ties everything together:

{
  "programs": [
    { "slug": "ai-seeds", "level": 1, "icon": "🌱", "track": "ai-learning" },
    { "slug": "ai-sprouts", "level": 2, "icon": "🌿", "track": "ai-learning" },
    { "slug": "ai-sketch", "level": 1, "icon": "✏️", "track": "craft-engineering" }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Adding a new program to the platform is literally: add one JSON entry, add one git submodule. The routing, i18n, and lesson rendering all work automatically.

Cool Features ✨

🎮 AI Playground — An interactive drawing recogniser where you sketch objects and a pre-trained model guesses what you drew. It's the "Hello World" of experiencing AI firsthand — no installation, no setup, just draw.

📊 Dashboard — Track progress across all programs. Completion percentages, learning streaks, and certificates for finished programs.

🌙 Dark / Light Mode — System preference detection with a manual toggle. Because we're developers and dark mode is non-negotiable.

🔐 Auth + Guest Mode — GitHub OAuth via NextAuth.js for persistent profiles, but you can also learn as a guest with localStorage-based progress. Zero friction to start.

🎨 Smooth Animations — Framer Motion powers page transitions and micro-interactions throughout the platform. It feels good to use.

Tech Decisions & Trade-offs

Every architecture has trade-offs. Here are mine, honestly:

MDX over a CMS

Why: Content lives in git. Version control, PR-based reviews, no vendor lock-in, and contributors use their existing GitHub workflow.
Trade-off: No WYSIWYG editor. For a developer-oriented open-source project, that's actually a feature, not a bug.

Git submodules over a monorepo

Why: Content and code have different lifecycles, different contributors, and different release cadences.
Trade-off: Submodules have a learning curve. git clone --recurse-submodules isn't intuitive for newcomers. But for independently versioned content plugged into a shell — they're the right tool.

localStorage for the MVP

Why: Zero backend. No database to manage, no server costs, no GDPR headaches. Users start learning in 2 seconds without signing up.
Trade-off: Progress doesn't sync across devices. That's the first thing I'll upgrade — likely with a lightweight backend or edge-based storage.

Vercel for deployment

Why: Generous free tier, edge functions work great with next-intl, and git-push-to-deploy is frictionless.
Trade-off: Vendor dependency. But the app is standard Next.js — porting to Docker or any Node.js host would take an afternoon.

What I Learned 📝

  1. i18n is hard. Multilingual content is really hard. The routing and message files were straightforward with next-intl. The hard part is creating quality translations at scale — culturally appropriate, not just machine-translated.

  2. Content architecture matters more than code architecture. I spent more time designing the MDX structure, frontmatter schema, and fallback chain than the React components. Get the content system right, and everything else follows.

  3. Git submodules have a bad reputation they partly deserve. But for this specific use case — pluggable content repositories with independent CI — they're genuinely the best tool.

  4. PWA support in Next.js has matured beautifully. Serwist made offline support almost trivial. For education platforms targeting users with unreliable internet, this is a game-changer.

  5. Open source is a multiplier. Within weeks, I had contributors offering translations in languages I hadn't even considered. The community effect is real — and humbling.

How You Can Help ⭐

If you've read this far, you probably care about making tech education accessible. Here's how to get involved:

🌍 Contribute a translation

Every lesson translated is another person who can learn AI in their language. Even one lesson helps. The MDX format is just Markdown — you don't need to be a developer.

⭐ Star the repo

Stars drive discoverability on GitHub. More stars → more contributors → more languages → more learners.

📢 Share it

Know someone learning AI? Someone who teaches? Someone who speaks French, Dutch, Hindi, or Telugu? Send them the link.

🛠️ Contribute code

The platform is Next.js + TypeScript + Tailwind. The design system has a Storybook. If you can build React components, you can improve AI Educademy.

🔗 Links:
🚀 Live platform aieducademy.vercel.app
⭐ GitHub github.com/ai-educademy/ai-platform
🎨 Storybook ai-educademy.github.io/ai-ui-lib
📦 npm @ai-educademy/ai-ui-lib

AI education shouldn't be a privilege. Let's make it a right.

Built with ❤️ by Ramesh Reddy Adutla — engineering leader, open-source advocate, and believer in education without borders.

Top comments (0)