BACK
🇨🇳

Shuo Hanyu

说汉语

AI-POWERED CHINESE LEARNING PLATFORM

A comprehensive full-stack Chinese learning application built with Next.js 15, TypeScript, and OpenAI Realtime API. Designed for beginners learning HSK1 and HSK2 vocabulary through interactive flashcards, AI conversation practice, typing drills, and timed assessments with real-time speech-to-speech translation.

53
Sign-ups
150+
Vocabulary
15
Languages
Voice
AI Real-time
RAG
Vector AI
HSK
Levels 1-2

The Challenge

Learning Chinese is notoriously difficult for beginners. Traditional methods like textbooks and classroom instruction lack interactive practice, immediate feedback, and real-time conversation opportunities.

Beginners struggle with pronunciation, character recognition, and conversational confidence. Existing language apps offer limited AI conversation features, lack HSK-focused curriculum, or don't support real-time voice-to-voice translation.

There was a clear need for an AI-powered platform that combines structured HSK vocabulary learning with natural conversation practice and multi-modal learning approaches.

The Solution

Shuo Hanyu is a comprehensive AI-powered learning platform that integrates OpenAI's cutting-edge Realtime API for natural voice-to-voice conversation practice in 15 languages.

The platform combines interactive flashcards with spaced repetition, typing practice with live AI feedback, a complete HSK dictionary, and timed assessments—all designed specifically for HSK1 and HSK2 learners.

Using vector embeddings and RAG technology, the application delivers contextual, AI-generated learning content while tracking user progress across all modules for a personalized learning journey.

Tech Stack

Frontend

Next.js 16.0.10 (App Router)
React 19
TypeScript
Tailwind CSS 4
Radix UI Components
React Hook Form + Zod

AI & Backend

OpenAI GPT-4
OpenAI Realtime API
Vector Embeddings (RAG)
Supabase (PostgreSQL)
Next.js API Routes
LangChain

Data & Analytics

Python (pandas, pyarrow)
Parquet Files
Amplitude Analytics
Google OAuth (Supabase)
React Context API
Speech Synthesis API

Key Features

🎴

Interactive Flashcard System

HSK1 and HSK2 vocabulary flashcards with AI-generated content from vector embeddings and spaced repetition learning.

  • 150+ HSK1–HSK2 vocabulary cards with characters, pinyin, and clear English meanings.
  • AI-generated contextual examples from vector embeddings to reinforce usage.
  • Spaced repetition with progress tracking and automatic audio pronunciation.
🎙️

AI-Powered Real-Time Conversation Practice

Revolutionary voice-to-voice translation using OpenAI Realtime API with support for 15 languages and natural conversation flow.

  • Real-time voice-to-voice conversation using OpenAI Realtime API for natural practice.
  • Support for 15 languages with instant transcription and translation feedback.
  • Quick language pair swapping (e.g., Chinese↔English) for flexible practice.
⌨️

Typing Practice with Live Translation

Translation drills with real-time AI suggestions and adaptive difficulty for improving written Chinese proficiency.

  • Bi-directional Chinese↔English translation drills to practice written proficiency.
  • Live AI suggestions and corrections while typing to reinforce grammar.
  • Session-level accuracy and difficulty adjustment based on performance.
📚

HSK Dictionary & Vocabulary Reference

Complete HSK1-HSK2 vocabulary database with searchable word list and audio pronunciation.

  • Searchable HSK1–HSK2 dictionary with characters, pinyin, and English definitions.
  • Audio pronunciation for each word to support listening practice.
  • Tight integration with flashcards and assessments so vocabulary stays consistent.
⏱️

Timed Skill Assessments

Challenge your vocabulary knowledge with timed quizzes and instant performance feedback.

  • Timed quizzes that test HSK vocabulary recall under pressure.
  • Mix of multiple-choice and translation questions with instant scoring.
  • Simple performance summary showing strengths and focus areas.
📊

User Progress Tracking & Analytics

Comprehensive progress tracking with persistent data and analytics insights powered by Amplitude.

  • Persistent progress across flashcards, typing, and conversation modules.
  • Continue Learning entry point plus simple study time tracking.
  • Amplitude analytics to understand engagement and guide future improvements.

AI Integration Highlights

🎙️

OpenAI Realtime API

Cutting-edge voice-to-voice translation with real-time speech streaming. Natural conversation flow with ultra-low latency for immersive language practice.

🧠

Vector Embeddings & RAG

Vector embeddings stored in Parquet files enable semantic search and AI-generated contextual flashcards. LangChain integration for enhanced contextual responses.

🤖

GPT-4 Powered Learning

OpenAI GPT-4 provides intelligent translation feedback, live corrections, and adaptive suggestions throughout all learning modules.

System Architecture

Frontend Architecture

Built with Next.js 16 App Router and React 19 for optimal performance. TypeScript ensures type safety across the codebase. Tailwind CSS 4 provides utility-first styling with stone/neutral theme. Radix UI components for accessibility.

AI Integration Layer

OpenAI Realtime API handles voice-to-voice translation with WebSocket connections. GPT-4 powers translation feedback and corrections. Vector embeddings (via Python/pandas) enable RAG-based learning. LangChain orchestrates AI responses.

Backend & Data

Supabase provides PostgreSQL database and authentication. Next.js API Routes handle AI integrations and translations. React Context API manages user state and progress. Amplitude tracks engagement analytics.

Technical Challenges

Real-Time Voice Streaming

Implementing OpenAI Realtime API required handling WebSocket connections, audio streaming, and managing state for bidirectional voice communication. Solved with careful connection management and error recovery.

Multi-Module Progress Tracking

Managing user progress across flashcards, typing practice, conversation, and assessments required careful state design. Used React Context with Supabase persistence for seamless experience.

Vector Embedding Generation

Processing HSK vocabulary into vector embeddings for RAG required Python pipeline with pandas and pyarrow. Stored in Parquet format for efficient semantic search and AI flashcard generation.

Performance Optimization

Optimizing for React 19 and Next.js 16 while handling AI API calls, audio streaming, and real-time updates. Used code splitting, lazy loading, and efficient caching strategies.

Key Learnings

🎙️ Cutting-Edge AI Integration

Working with OpenAI's brand-new Realtime API provided invaluable experience in real-time voice streaming, WebSocket management, and building natural conversation interfaces.

🧠 RAG & Vector Embeddings

Implementing vector embeddings for semantic search taught me how to build intelligent, context-aware AI features. The RAG approach dramatically improved flashcard relevance.

📱 Mobile-First Learning Platform

Building for learners on-the-go required careful UX design for mobile devices. Voice features work seamlessly on phones with optimized audio handling.

🌐 Multi-Language Architecture

Supporting 15 languages required thoughtful architecture for language pairs, translation pipelines, and UI internationalization. Built scalable patterns for future expansion.

📊 Analytics-Driven Development

Amplitude integration revealed user behavior patterns that guided feature prioritization. Data showed conversation practice was most engaging, informing product roadmap.

Next.js 16 + React 19 Power

Latest Next.js and React versions enabled incredible performance with App Router, Server Components, and optimized rendering. Perfect for AI-heavy applications.

Start Learning Chinese Today

说汉语

Experience AI-powered language learning with real-time conversation practice