DEV Community

Azamat Sadykbek
Azamat Sadykbek

Posted on

How I Built a Multilingual Language Learning Platform with React, Vite & Firebase (akcent.online)

How I Built a Multilingual Language Learning Platform with React, Vite & Firebase

After months of development, I launched Akcent Academy —
a full-featured online language learning platform supporting English, Russian, Chinese,
Arabic, and Turkish.

The Stack

  • React + Vite — blazing-fast HMR and build times
  • Firebase — auth (Google/Apple OAuth + OTP), Firestore, Storage
  • Tailwind CSS + Radix UI — accessible, responsive UI
  • @dnd-kit — drag-and-drop course builder for teachers
  • ffmpeg.wasm — in-browser audio/video processing (no server needed!)
  • PWA support — offline-capable with service workers

What the Platform Does

Students can:

  • Enroll in structured language courses (video + exercises)
  • Practice dictation with AI-assisted feedback
  • Track progress across lessons
  • Learn on mobile with a native-like PWA experience

Teachers (constructors) get:

  • A full drag-and-drop course builder with block-based lesson editor
  • Film/situation-based lesson formats
  • Real-time comment threads with students
  • Analytics dashboard

Interesting Technical Challenges

1. In-browser audio compression with ffmpeg.wasm

Rather than uploading raw .wav files, I compress audio to .mp3 entirely
in the browser using WebAssembly. This cut upload sizes by ~85%.

2. PWA Offline Mode

Built a custom offline.html + splash.html with service worker caching
so students can review completed lessons without internet.

3. DnD Course Builder

Used @dnd-kit/sortable to build a flexible drag-and-drop lesson block system
where teachers can reorder, nest, and configure blocks visually.

SEO Challenges with a React SPA

One of the hardest parts: React SPAs are tough for SEO. My approach:

  • Static <meta> tags with OG/Twitter cards in index.html
  • sitemap.xml served from /public
  • robots.txt with proper crawl rules
  • Canonical URLs per route

Still planning to add SSR with Vite SSR or migrate critical pages to Next.js.

Try It

https://akcent.online

Available in Russian and other languages. Feedback welcome!

Tags: #react #vite #firebase #webdev #javascript #pwa #education #languagelearning

Top comments (0)