Atelier — French Learning Platform

Full Stack · Solo Build
Next.js 16 React 19 TypeScript MongoDB Zustand JWT
Project Overview
Atelier is a CEFR-graded online French learning platform delivering structured instruction from beginner (A1) through upper-intermediate (B2). It pairs a curated curriculum of 240 lessons across 48 modules with a flexible exercise engine, real-time progress tracking, and a multi-plan subscription system. Live at french.chrisverse.uk.
My Contributions
Designed and built every layer solo — frontend, backend, auth, payments, and infrastructure. Architected the curriculum data model, the exercise framework supporting 20+ activity types, custom JWT auth with refresh-token rotation, cross-device state sync via Zustand, multi-plan subscriptions, and a fully bilingual FR/EN UI. From schema to deployment, no team, no boilerplate.
A1 · A2 · B1 · B2
Atelier
240 lessons · 48 modules · 4 tracks
Visit french.chrisverse.uk →
240
Lessons
48
Modules
20+
Exercise types
4
CEFR tracks
I started Atelier in January 2026 with one goal: build the French learning platform I wished existed when I started studying. Most options on the market either gamify the language into oblivion or bury learners under unstructured content. Atelier sits in between — real CEFR scaffolding from A1 through B2, with a learning loop that rewards consistency without infantilising the learner.

The frontend is a Next.js 16 App Router project running React 19 with full server components and streaming. State for the lesson-runner sits in Zustand stores that hydrate from MongoDB on auth and persist progress optimistically — users can switch devices mid-lesson and pick up exactly where they left off. The exercise framework is extensible: drag-and-drop ordering, conjugation drills, gap-fill, dictation, multiple-choice, free-response with grading rubrics, listening comprehension, and translation pairs all share a common interface but render their own UI.

The backend lives in Next.js Route Handlers with MongoDB as the primary store. Authentication is custom JWT with refresh-token rotation — no third-party auth provider — with secure HTTP-only cookies and replay protection. The subscription layer supports monthly, annual, and lifetime plans with prorated upgrades, gated content access, and webhook-driven entitlement updates.

The whole UI is bilingual FR/EN via a translation layer that swaps at the route level. Performance budgets are tight: every lesson page hits LCP under 1.5s on mid-tier mobile, and the lesson-runner ships under 80kb gzipped.
Atelier
Full Stack · Solo
JAN 2026 — PRESENT
Visit live site →

What's under the hood.

Curriculum engine
CEFR-graded progression
240 lessons grouped into 48 modules across A1, A2, B1, and B2 tracks. Each module unlocks sequentially based on completion thresholds, with diagnostic placement for returning learners.
Exercise framework
20+ activity types
Drag-and-drop ordering, conjugation drills, dictation, gap-fill, free-response with grading rubrics, listening comprehension, and bilingual translation pairs — all sharing one extensible interface.
Authentication
Custom JWT auth
Refresh-token rotation, HTTP-only cookies, replay protection. No third-party auth provider — full control over sessions, account recovery, and entitlement gating.
State sync
Cross-device progress
Zustand stores hydrate from MongoDB on auth and persist optimistically. Switch devices mid-lesson and pick up exactly where you left off — no lost streaks.
Monetisation
Multi-plan subscriptions
Monthly, annual, and lifetime plans with prorated upgrades, gated content access, and webhook-driven entitlement updates. Built lean to keep margins viable from day one.
Localisation
Bilingual FR / EN UI
Every label, error, and CTA flips between French and English at the route level. Learners can immerse themselves in a French-only interface or fall back to English while they're getting started.