Tao Ch'an Mandarin: EdTech Learning Platform

From concept to production: How my need to guide my Mandarin students at Tao Ch’an, where I volunteer, led me to build a study platform with complex linguistic syntax, strict request controls, rock-solid security, and performance optimizations, combining foundational programming knowledge with AI-assisted software engineering.

📌 Overview & Context

• My Role: Product owner, software architect, and full-stack developer (AI-Assisted)
• Context: EdTech / Mandarin Language Education (Tao Ch’an)
• Scope: Complete Web Application Ecosystem (LMS + SRS + Lexicon + Spoken Audio Assessment)
• 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 Pedagogical & Technical Challenge

As a Mandarin teacher, I experienced the severe limitations of generic educational platforms every day. Teaching the Chinese language to Western students presents unique pedagogical and cognitive hurdles that standard learning management systems cannot resolve:

• Tonal Color Coding for Pinyin: Mandarin is a tonal language (4 primary tones + neutral tone). Without distinct visual tone-to-color mapping, auditory-visual phonetic acquisition is compromised.
• Pronunciation Assessment & Spoken Practice: Students must record and submit voice recordings directly inside drills and quizzes to receive personalized phonological feedback.
• Character Forgetting Curve: Chinese characters (Hanzi) demand a mathematically rigorous Spaced Repetition System (SRS) based on long-term memory retrieval models, making passive rote memorization ineffective.
• Lack of Interactive Conversational Drills: Absence of safe, realistic environments for practicing dialogue in real-world everyday contexts.

To overcome these barriers, I set out to architect and build the Tao Ch’an Mandarin portal, a dedicated solution engineered to support the entire learning lifecycle.

⚙️ Tech Stack & System Architecture

The system architecture was engineered to enforce strict typing, Row Level Security (RLS), and real-time response rates:

🚀 Key Features & Engineering Highlights

[ Student / React Interface ]
       │
       ├──> [ FSRS Engine & Pinyin Lexicon ] ──> TanStack Query Cache
       ├──> [ WebM Audio (MediaRecorder) ] ────> Supabase Storage (Private Bucket)
       └──> [ Server Actions / Next.js ] ──────> PostgreSQL + Supabase Auth & RLS

1. 🧠 Spaced Repetition Engine (SRS) with FSRS

• 4th Generation FSRS Algorithm: Leveraging modern FSRS (ts-fsrs) mathematical models, dynamically scheduling card review intervals based on individualized memory stability and retrieval difficulty.
• Real-Time Academic Telemetry: Interactive dashboard displaying estimated retention rate, recall probability, daily study streaks, and visual consistency heatmaps.
• Batch Synchronization: Efficient bulk processing of reviewed cards, minimizing overhead and round-trips to the PostgreSQL database.

SRS Flashcards dashboard featuring FSRS algorithm retention metrics and review scheduler.

Flashcard study interface: Hanzi ideogram, Pinyin tone notation, native audio playback, and FSRS rating buttons.

2. 📖 Intelligent Mandarin Lexicon

• Dynamic Tonal Color Coding: Algorithmic parser mapping each syllable to its tone (1st, 2nd, 3rd, 4th, or neutral), applying high-contrast semantic HSL styles.
• Fuzzy Search & Infinite Scroll: Instant lookup across Chinese ideograms (Hanzi), romanized Pinyin, and Portuguese/English translations.
• Pedagogical Enrichment: Integrated native audio pronunciations, etymological breakdowns, and contextual example sentences with one-click SRS deck imports.

Intelligent lexicon: Hanzi/Pinyin search, dynamic tonal coloring, and 1-click addition to SRS decks.

3. 🎙️ Pronunciation Assessment & Quiz Engine

• Non-Blocking Audio Capture: Native recording via the browser MediaRecorder API in WebM format, with strict lifecycle management of microphone media streams and explicit track disposal to prevent hardware memory leaks on mobile devices.
• Polymorphic Question Schema: Flexible architecture supporting multiple-choice, character-to-pinyin matching, audio comprehension listening tests, and spoken voice submissions.
• Secure Supabase Storage: Sanitized file naming, unique student-scoped storage paths, and restricted bucket access permissions allowing playback only by the student and the instructor.

Assessment engine with live audio capture and spoken pronunciation submission.

4. 💬 WhatsApp-Style Dialogue Simulator

• Contextual Immersion: Modern conversational chat interface designed for practical dialogue drills in real-world settings (ordering food, airport navigation, business meetings).
• Turn State Machine: Dynamic management of conversational turns, realistic typing indicators, read receipts, and integrated inline audio playback components.

Modern chat-style dialogue simulator for conversational immersion in real-world scenarios.

5. 🎓 Student Dashboard & Teacher CMS

• Optimized User Interface: Animated 3D lesson stack for upcoming assignments, unified progress timelines, and distraction-free learning views.
• Centralized Pedagogical Administration: Comprehensive instructor panel to manage cohorts, publish structured lesson modules, and review student audio submissions.

Interactive lesson view with structured multimedia content.

Publishing hub for cultural immersion and linguistic deep dives.

🤖 The AI-Assisted Engineering Journey

Coming from a marketing and data background prior to building this system, I transformed modern Artificial Intelligence models into co-piloting partners for system architecture and development.

Operating as Product Owner, requirements architect, and production QA tester, I directed the full engineering lifecycle:

• Architecture & Data Security: Designed relational database schemas in PostgreSQL and oversaw the formulation of strict Row Level Security (RLS) policies to guarantee complete multi-tenant student data isolation.
• Complex Bottleneck Resolution: Diagnosed and resolved subtle production issues including mobile Safari MediaRecorder memory leaks, React Query cache invalidation race conditions, and Next.js server component rendering performance.
• Software Craftsmanship: Applied Clean Code principles, modularized React component boundaries, enforced defensive API boundaries, and configured automated deployment pipelines.

AI accelerated code generation, but product vision, pedagogical empathy, architectural curation, and rigorous production verification were the result of disciplined hands-on engineering.

📈 Impact & Core Takeaways

• Active Production Deployment: The platform serves as the daily study environment for active Mandarin students, proving its stability, security, and educational value.
• Full-Stack Fluency: Comprehensive mastery across the modern web stack (App Router, relational database modeling, auth tokens, media storage, and telemetry).
• EdTech Innovation: Practical evidence that complex pedagogical requirements can be translated into clean, elegant, and high-performance software.