Urdustani — Interactive Urdu Learning & Audio EdTech Platform
Progressive web application (PWA) designed for diaspora families to learn Urdu through interactive audio phrase lessons, Roman Urdu toggles, adaptive quizzes, daily streaks, and custom Nastaliq typography.
Culture & Media
Audio Lesson Engine • Daily Streak Tracker • PWA Web App
Next.js + TypeScript
Client NDA
Project Overview & Scope
Urdustani (UrduRoots) is a progressive web application (PWA) engineered to make learning Urdu intuitive, culturally engaging, and accessible for diaspora families worldwide (kids, teens, and adults). Built with full client ownership on Next.js and Supabase/PostgreSQL, the app features an audio-first lesson player with bidirectional Nastaliq typography, optional Roman Urdu phonetics toggles, adaptive 5-question quizzes, gamified daily streaks with XP points, and an administrative CMS for curriculum management.
The Engineering Challenge
Delivering zero-layout-shift RTL Nastaliq typography subsetting across mobile devices, synchronizing audio playback with sentence-by-sentence phonetic Roman Urdu transliteration, architecting a timezone-resilient client-side daily streak algorithm, and building an admin dashboard for creating lessons, phrase audio links, and quiz question banks.
The Architecture Solution
Engineered a responsive Next.js and TypeScript frontend optimized for PWA mobile-first usage. Integrated Web Audio APIs for instant playback, developed a modular quiz state engine with real-time scoring, and structured a PostgreSQL/Supabase database schema with Prisma ORM to persist user progress, streaks, and XP points.
Key Architectural Insights & Results
- Interactive Audio & Typography Sync: Optimized font subsetting and audio CDN streaming for sub-100ms playback and crisp Nastaliq rendering.
- Gamified Streak Algorithm: Implemented timezone-resilient daily streak and XP tracking to maximize long-term student engagement.
- Adaptive Multi-Level Onboarding: Designed tailored learning paths (Beginner, Comprehension, Confident) to personalize curriculum delivery.
- Progressive Web App (PWA): Delivered a cross-platform mobile app experience directly through the browser without app store friction.