Build a Language Learning Mobile App: Expo, Supabase, OpenRouter, React, TypeScript (2026)
Source code: https://github.com/Andreaswt/mandarin...
Discord & More: https://andreastrolle.com
Hi 🤙 In this project, you'll build a mobile-first AI language learning app focused on spoken Mandarin. The app combines structured lessons, listening/speaking drills, and real-time roleplay conversations powered by LLMs. Users can sign in with magic links, complete onboarding, practise across a curriculum, track speaking/listening minutes, and unlock premium features like custom AI-generated scenarios.
We'll use technologies such as Expo (React Native), TypeScript, Expo Router, Supabase Auth + Postgres + Edge Functions, OpenRouter, Expo AV/Speech, and more.
This is part 1 of the tutorial.
Features:
📱 Cross-platform iOS/Android app with Expo + Expo Router
🔐 Passwordless authentication with Supabase magic links
🧭 Personalized onboarding flow (level, motivation, interests)
📚 Structured Mandarin curriculum (12 chapters, 86 lessons)
🎧 Listening + speaking practice modes with progress tracking
🎙️ Voice recording and AI transcription for pronunciation practice
💬 Real-time AI roleplay conversations with scenario goals/tasks
✨ Custom scenario generation
📈 Speaking/listening stats and lesson completion tracking
💳 In-app paywall flow
📖 Chapters
0:00 Demo
5:12 Theory
43:58 Emulator setups (android and iOS)
58:58 Assets import
01:08:15 Supabase setup
01:24:17 Auth page
03:26:40 Onboarding
04:14:49 Paywall
05:16:15 Lessons page
06:33:23 Flashcards
07:39:39 Lesson content
08:38:41 Part 2 message