ChatLang — an AI-powered language learning chat app built with TanStack Start
ChatLang — is an AI-powered conversational language learning app built as a modern SPA. The core experience is simple: type anything and get instant translations, explanations, and learning content between any two languages from 50+ supported languages.
Unlike traditional language apps with rigid lesson structures, ChatLang uses AI to dynamically respond to whatever the user needs. Type a word, sentence, or question — and get contextual translations with grammar breakdowns, word-by-word tables, and links to deeper learning content. The AI automatically detects intent and routes between translation mode, dictionary lookups, vocabulary lists, quizzes, and cultural content.
The app features multiple learning modes:
Auto mode — intelligent routing between translation, lessons, and quizzes
Dictionary — detailed word lookups with examples and usage
Lessons — AI-generated grammar and topic lessons
Vocabulary — themed word lists with translations
Quizzes — interactive language quizzes
Content Writer — cultural content and stories
For this project I decided to try out the TanStack Start stack — TanStack's new full-stack React framework. It combines TanStack Router for file-based routing with TanStack Query for data fetching, all powered by Vite 7. The DX is excellent, and the type-safe routing is a joy to work with.
The tech stack includes:
TanStack Start (Router + Query + Vite)
React 19 for the UI
Zustand for state management (conversations, streaming, themes)
Tailwind CSS v4 with the typography plugin
OpenAI SDK with GPT-4o and Grok-4 models
GPT-4o-mini-tts for text-to-speech
GPT-4o-transcribe for speech-to-text
react-markdown for rendering AI responses
Netlify for deployment
The streaming architecture is particularly interesting — responses stream in real-time using OpenAI's streaming API, with Zustand stores managing the draft state per conversation. The markdown renderer supports custom link types that trigger in-app actions like starting lessons or quizzes.
This is a pure client-side SPA with no backend — all AI calls happen directly from the browser using API keys. This keeps the architecture dead simple while still delivering a powerful learning experience.
