Shoaib Nigam Shaik

Posted on Aug 15

Building QuickFrench: A Modern IGCSE Vocabulary Trainer w/ Offline-First Architecture

I believe that to grow as a developer, we ought to build tooling that solves problems we face. So when I looked at the document for the IGCSE Vocab students are expected to know, a motivation to solve this issue kindled in me, and hence was born QuickFrench, a web app that covers all the essential vocabulary that an IGCSE student needs to know! After getting good feedback from my classmates for the prototype, QuickFrench evolved into a full-fledged vocabulary trainer with a polished UI/UX, an extensive range of topics, and way more.

Try it out for yourself at https://quickfrench.vercel.app - it doesn't cost a cent! No ads, no premium subscriptions (at least for now).

Tech Stack Choices

Next.js 15 + React 19 + Typescript + Tailwind

It has become pretty much a go-to core stack for building websites because of its awesome DX.

Turso

I wanted something dirt-cheap for a DB so I chose Turso. It has an incredibly generous free tier, and extremely low latency due to its edge deployments. It is also based on SQLite, which I'm familiar with and does not over-complicate stuff for apps such as this.

IndexedDB w/ Dexie

I hadn't really thought about other caching options much, to tell the truth, but it seems to have been the right choice, as can store structured data. I used Dexie as a wrapper around IndexedDB, as I've heard it makes things less hectic with IndexedDB.

Keyboard-First UX

For power users, QuickFrench has a keyboard-first UX:

useEffect(() => {
  const handleKeyPress = (event: KeyboardEvent) => {
    if (quizMode === 'multiple-choice') {
      if (['1', '2', '3', '4'].includes(event.key)) {
        selectAnswer(parseInt(event.key) - 1);
      }
    } else if (quizMode === 'typing') {
      if (event.key === 'Enter') {
        submitTypedAnswer();
      }
    }

    if (event.key === 'r' || event.key === 'R') {
      restartQuiz();
    }
  };

  document.addEventListener('keydown', handleKeyPress);
  return () => document.removeEventListener('keydown', handleKeyPress);
}, [quizMode]);

Deployment & Scaling

The database is deployed on Turso Cloud, and the website itself is deployed on Vercel, and the API routes use Vercel's edge functions.

Stuff Learnt

Shuffling

I've learnt that sort(() => Math.random() - 0.5) is terrible because it creates biased results (some permutations are more likely) and has O(n log n) complexity. I've instead switched to the Fischer-Yates shuffle which is O(n), and looks something like this:

function shuffle(array) {
  const shuffled = [...array]; // Don't mutate original

  for (let i = shuffled.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[i], shuffled[j]];
  }

  return shuffled;
}

Caching

I've implemented caching for the DB so that I wouldn't exhaust the rate limits for my Turso DB, and it also feels quite zappy to use as local queries are much faster to execute.

Web Speech API

I've learnt that there exists a simple Web Speech API that is essentially a TTS service. I didn't believe it at first, as I spent a considerably amount of time scouring for TTS services. But I've realized this could be a great option to help improve pronunciation, when integrated with QuickFrench.

What's Next

Currently exploring:

Spaced repetition algorithms: Intelligently surface vocabulary based on retention curves
Progress analytics: Insights into learning patterns

Try It Out

QuickFrench is live at quickfrench.vercel.app and the source code is available on GitHub.

Let me know what you think below, and if you enjoyed it, please give this an upvote and checkout QuickFrench - it's completely free!

If you're building EdTech projects, I'd love to hear about your technical challenges and solutions!

nextjs #react #typescript #edtech #webdev #offline #indexeddb #turso #education #language-learning

DEV Community