Build a Language Learning Mobile App: Expo, Supabase, OpenRouter, React, TypeScript (2026)

Description

Source code: https://github.com/Andreaswt/mandarin-language-learning-app 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