Mandarin Language Learning App

Link to video

Discord and more

Overview

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.

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

Setup

Follow these steps to install and set up the project.

Clone the Repository

git clone https://https://github.com/Andreaswt/mandarin-language-learning-app
cd mandarin-language-learning-app

Prerequisites

• Node.js
• npm or pnpm
• Supabase CLI

Install Supabase CLI:

npm install supabase --save-dev

Environment Variables

Create a .env file in the root:

EXPO_PUBLIC_SUPABASE_URL=your_supabase_project_url
EXPO_PUBLIC_SUPABASE_KEY=your_supabase_anon_key

Supabase Setup

Login and link your project:

npx supabase login
npx supabase link --project-ref YOUR_PROJECT_REF

Apply database migrations:

npx supabase db push

Deploy Edge Functions:

npx supabase functions deploy chat-completion
npx supabase functions deploy transcribe-audio
npx supabase functions deploy scenario-generate
npx supabase functions deploy start-trial

Set required function secrets:

npx supabase secrets set OPENROUTER_API_KEY=your_openrouter_key
npx supabase secrets set SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

Auth Redirect Setup

Add your app redirect URL in Supabase Auth URL configuration:

convo://

Frontend

Install dependencies:

npm install

Run the app:

npm run start

Run on iOS simulator:

npm run ios

Run on Android emulator:

npm run android

Run lint:

npm run lint