French Learning App

A modern, interactive web application for learning French vocabulary built with Next.js 16 and React 19. The app allows students to organize their studies with custom modules and lessons, add French words and phrases with automatic English translations, and practice vocabulary with an intuitive toggle-based learning interface.

The application addresses two critical challenges for French language learners that disrupt the learning flow and create frustration.

Pronunciation Lookup Friction

Previously, students had to manually look up the correct pronunciation for each French word or sentence they encountered—a time-consuming process that interrupted their learning flow.

This constant interruption made it difficult to maintain focus and build vocabulary efficiently.

Data Loss from Session Clearing

Students using shared or school-managed devices faced critical data loss when browser sessions were cleared. Traditional web applications relying on browser-based storage (localStorage, sessionStorage, or cookies) lose all user data when browsers are closed, devices are restarted, browser cache is cleared, or users switch between devices.

Students would lose hours of vocabulary work, progress, and learning modules every time their session was cleared—a frustrating experience that disrupted their learning flow.

profile Image

Project Stack

  • Next.js 16 (App Router)
  • React 19
  • Vercel KV (Redis)
  • Google Cloud Translation API
  • Browser Text-to-Speech API
  • Tailwind CSS v4
  • Radix UI
  • react-hook-form
  • Sonner
  • Vercel
  • ESLint
  • Babel Plugin React Compiler
Visit Site
Project Image 1