· Lucas Resende · portfolio  · 2 min read

Tao Ch'an Mandarin: EdTech Learning Platform

Full-fledged Chinese learning ecosystem built with Next.js, Supabase, FSRS spaced repetition, and AI-native engineering.

Full-fledged Chinese learning ecosystem built with Next.js, Supabase, FSRS spaced repetition, and AI-native engineering.

From concept to production: How my experience teaching Mandarin as a volunteer at Tao Ch’an inspired me to architect and build a full-stack learning platform, leveraging strong software engineering foundations and modern AI-assisted workflows.

📌 Overview & Context

  • My Role: Product owner, software architect, and full-stack developer (AI-assisted workflow)
  • Context: EdTech / Mandarin Language Education (Tao Ch’an)
  • Scope: Full-fledged Web Application Ecosystem (LMS + SRS + Lexicon + Audio Pronunciation Assessments)
  • Tech Stack & Tools: Next.js (App Router), TypeScript, React 19, Supabase (PostgreSQL, Row-Level Security, Storage, Auth), FSRS (ts-fsrs), TanStack Query/Table, Tailwind CSS, Framer Motion, Tiptap, PostHog.

🛠️ The Challenge

Teaching Mandarin Chinese presents unique cognitive and pedagogical hurdles that standard Learning Management Systems (LMS) cannot handle:

  • Tonal Color Coding for Pinyin: Mandarin is a tonal language (4 primary tones + neutral). Without distinct visual tone-to-color mapping, auditory-visual phonetic mapping is degraded.
  • Audio Pronunciation Feedback: Students need to record and submit spoken audio directly within quizzes to receive granular phonological feedback.
  • Character Forgetting Curve: Chinese ideograms (Hanzi) demand a mathematically rigorous Spaced Repetition System (SRS) based on long-term memory retrieval models.
  • Contextual Dialogue Simulation: Traditional textbooks lack safe, interactive conversational drills tailored to modern business and daily life scenarios.

🚀 Architectural Highlights

  1. State-of-the-Art Spaced Repetition (FSRS): Implemented the Free Spaced Repetition Scheduler (ts-fsrs), outperforming legacy SM-2 algorithms with personalized retention modeling based on student recall difficulty.
  2. PostgreSQL & Row-Level Security (RLS): Strict multi-tenant security policies in Supabase ensuring complete isolation of student records, quiz grades, audio uploads, and teacher feedback.
  3. Optimistic UI & Cache Strategy: TanStack Query combined with React Server Components ensures sub-100ms response times on flashcard review decks.
  4. Rich Text & Interactive Character Decomposition: Custom Tiptap editor extension displaying stroke orders, radical breakdowns, and synchronized audio clips.

📈 Impact & Continuous Evolution

  • Active Production Use: Directly utilized by enrolled students at Tao Ch’an, streamlining homework submissions, audio evaluations, and character reviews.
  • Validated Retention: Measurable increase in vocabulary retention rates compared to passive physical flashcard methods.
  • Scalable Foundation: Prepared for future mobile-wrapper deployment and offline caching.
Share:
Back to Portfolio