Technical overviewContent-driven product engineering

Le français en pratique

A modular learning application where curriculum can grow independently of interface code.

Role: Solo developer across product structure, React, content modelling, local progress, responsive navigation, and accessibility
Evidence status: Production build and 10 content, routing, and accessibility tests verified; deployment remains private
Verified: 2026-07-23

Purpose and scope

Le français en pratique is a mobile-first learning application for daily practice from CEFR level A1 through C2. It combines level-filtered quizzes, structured long-form lessons, and browser-local progress while keeping curriculum and interface copy outside the React components.

What it is used for

Practise grammar, vocabulary, and context questions at a selected CEFR level.
Study structured lessons with examples, mistakes, glossaries, and guided exercises.
Track attempts, best score, and daily streak on one device without creating an account.

Architecture

Content model

quizzes.fr.json

Quiz bank

18 level-tagged grammar, vocabulary, and context questions

lessons.fr.json

Lesson library

Eight structured lessons with examples and practice

site.fr.json

Interface copy

Navigation, labels, levels, and topic metadata

Imported as typed content

Application routes

Shared layout

Responsive app shell

Desktop navigation and safe-area mobile tabs

Interactive route

Quiz runner

Level filtering, answer state, and feedback

Content routes

Lesson routes

Library filters and detailed lesson pages

Records completion

Client state

TypeScript state

Progress model

Attempts, best score, streak, and last completion

Local persistence

Browser localStorage

Persists progress on the current device without an account

Output view

Progress dashboard

Reads and presents the saved learning history

Built and served by

Delivery

Build system

Vinext build

Transforms Next-style routes into Cloudflare-compatible ESM

Hosting

OpenAI Sites

Hosts the current private deployment

Text equivalent: Three JSON content stores feed the React route layer without embedding curriculum in components. Dashboard, quiz, lesson, and progress routes share the responsive application shell. Quiz completions update a local progress model in browser storage, while Vinext builds the route tree into Cloudflare-compatible ESM for Sites delivery.

Engineering decisions

Content outside components

Quiz, lesson, and interface data live in dedicated JSON files so curriculum updates do not require editing rendering code.

Local-first progress

The initial product records useful learning history without requiring accounts, credentials, or a backend.

Navigation follows the device

Desktop links become a fixed, safe-area-aware bottom tab bar on mobile while preserving route and focus semantics.

Verification evidence

All 10 automated tests passed for CEFR coverage, content structure, routes, navigation, and accessibility safeguards.
The question bank contains 18 questions covering grammar, vocabulary, and context at every level from A1 through C2.
Eight detailed lessons include explanatory sections, key points, examples, common mistakes, glossaries, and guided practice.
The interface was browser-tested at 1280-pixel desktop and 390-pixel mobile widths without console errors or horizontal overflow.

verified-2026-07-23

$ npm test
10/10 content, route, and accessibility tests passed
18 questions · A1-C2 · 8 lessons
desktop 1280px · mobile 390px
✓ production build and responsive QA verified

Limitations

Progress is device-local and does not synchronize across browsers or devices.
The deployment remains private while the curriculum is expanded and reviewed.
Authentication, privacy and consent pages, and advertising configuration must be completed before a public monetized launch.

Next step

Discuss the engineering behind this work.

Email me Download résuméRepository remains private