Le Petit Cours
A free, open French course written for Spanish speakers — a PWA that installs to your home
screen, works offline, and explains French in French or in Spanish, as the reader prefers. Also, for readers who already speak French
at home, a track that teaches them to write it.
Live at lepetitcours.vercel.app, deployed from main.
🚧 Being rewritten
Restarted on Next.js on 2026-09-05. The design system, the app shell, navigation, search,
accounts and progress are written; twelve of the sixteen chapters carry lessons —
src/data/navigation.ts is where to count them. Offline caching is
not installed yet.
What it is
Most French courses are written for English speakers. This one is written for hispanophones —
which shapes what gets explained more than the language it is written in. From A2 up, everything
is explained in French simple enough to read at the level being taught; an A1 page explains in
Spanish and teaches in French, because a beginner cannot use a rule stated in a language they do
not have yet. False friends (robe, sol, carte) are defined where they appear, the mistakes
Spanish pulls a reader towards are printed wrong-then-right, and the drills assume a Spanish
keyboard — œ and ç cannot be typed on one — so they prefer clicking to typing.
It serves two kinds of reader:
- The learner — a Spanish speaker starting French from zero.
- The heritage speaker — someone with French family who grew up in Spain, speaks French
fluently at home, and never went to a French school. They need to learn to write it —
accents, agreement, homophones, the spelling of forms they already say correctly.
They are not two levels of one thing: a heritage speaker can speak like a C1 and write like an A2.
One library of lessons serves both, ordered differently for each.
Levels follow the European framework (CEFR). The course goes A1 → B2; A2 was written first,
and A1 and B1 are being written beside it. Each page is written at one level, and signed-in
learners choose which levels are listed; a literary work is one page whose text and questions
follow the learner's level, with the Spanish under each line at A1. A level counts as complete
when it covers the published DELF exam syllabus for that level.
Chapters cover grammar, spelling, conjugation, pronunciation, vocabulary, translation, reading,
literature, culture, role-plays, dictations, graded exercises, replayable games, and delf — whole practice
exam papers, written for this course rather than copied from a real one.
Accounts. Everything is free and public — no account is needed to read a lesson or play a
drill. An account only exists so your ticked lessons follow you across devices, and it holds
nothing but a username, an address nobody can send mail to, your ticks and your settings.
docs/scope.md has the full picture, including what this project deliberately is
not.
Stack
- Next.js 16 (App Router) · React 19 · TypeScript · React Compiler
- Plain CSS — design tokens in
src/app/globals.css, component styles in CSS Modules. Both
themes live in one light-dark() value per token.
- Spectral and Inter: the serif sets the French being taught, the sans the explanation.
- Vercel for hosting · Supabase for sign-in and progress sync, against the schema in
supabase/migrations/
- Serwist for the service worker and offline precaching (not yet installed)
Running it
git clone https://github.com/kevjrmy/le-petit-cours.git
cd le-petit-cours
npm install
npm run dev # http://localhost:3000
npm run build # must pass before a change is done
npm run lint
Three scripts, all dependency-free; the first two need Node 22+ and google-chrome on PATH:
node scripts/shot.mjs http://localhost:3000/ shot.png --full --dark # themed screenshots
node scripts/make-icons.mjs # every icon, from one SVG
node scripts/contrast.mjs # colour tokens against WCAG AA
Two environment variables — NEXT_PUBLIC_SUPABASE_URL and
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY. They are not secrets, and the app runs without them:
the shell renders signed out and every lesson still works, because every lesson is public and
static.
A third, FRONTEND_PASSWORD, is a secret and must never be committed. It guards /atelier, a scratch
chapter used for a class in progress, when its lock is on (it is lifted for now); with the lock on
and no password set, that chapter is closed to everyone and every other page works.
How it is put together
src/data/navigation.ts is the single source of truth for chapters, lessons, order and
cross-links. Nothing auto-discovers pages, so a lesson missing from it is linked from nothing.- Routes come from the filesystem:
src/app/{chapitre}/{lecon}/page.tsx. Chapter landing pages
are one generated route, src/app/[chapitre]/page.tsx.
- Lessons are Server Components that prerender to static HTML. Interactivity (drills, the
account menu) lives in small client components, and the session is never read in a layout, so
every lesson stays static and can work offline.
- Progress is ticked by hand and keyed by a permanent lesson id. It is stored locally in
IndexedDB and synced to Supabase; the local copy is always what the page reads.
- Signed out, everything is listed; signed in, the learner chooses which levels are, and may
follow a parcours, whose next lesson is « La suite ». A filter never blocks access: a lesson at
another level still opens from a link.
The rules behind each of these, and the traps they guard against, are in AGENTS.md.
Contributing
Contributions are welcome, and corrections to the French are the most valuable thing you can
send — this is teaching material, so an error in it teaches the error. You do not
need to write code to help.
Start with CONTRIBUTING.md. If you are writing lessons or drills, read
AGENTS.md too — it carries the rules and the traps that previous bugs have paid
for.
Documentation
The deployed site also carries /design, an unlisted specimen of every shared visual pattern, for
checking a design change in both themes.
Licence
Two licences, because the code and the teaching material want different things:
- Code (
src/, configuration, tooling) — MIT.
- Course content (lessons, exercises, vocabulary, translations) —
CC BY-SA 4.0. Reuse and adapt with credit, keeping derivatives under the
same licence.
Some included material is under neither and is not ours to relicense — quoted song lyrics
still in copyright, literary text whose public domain status is jurisdictional, and photographs
under their own individual free licences. Read the "Third-party material" section of
LICENSE-CONTENT before reusing anything.
