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

Azamat Sadykbek — Tue, 26 May 2026 11:48:08 +0000

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

I built a free image compression API — no signup, just curl

Azamat Sadykbek — Mon, 25 May 2026 22:24:48 +0000

I got tired of paying for image compression services or jumping through OAuth hoops just to resize a JPEG. So I built Beta Compressor — a free REST API that compresses JPEG, PNG, WebP, and AVIF images in one POST request.

No credit card. No OAuth. You can try it right now without even creating an account.

Free API key — 1000 req/month
Sign up at compressor.baidibek.kz, create an API key in the dashboard, and you get 1000 requests/month for free.

curl -X POST https://api.compressor.baidibek.kz/compress \
-H "X-API-Key: YOUR_KEY" \
-F "image=@photo.jpg" \
-F "quality=80" \
-F "format=webp" \
-F "width=1280" \
-o compressed.webp

DEV Community: Azamat Sadykbek