IELTS Band Builder — a free IELTS study guide

Project type: Free IELTS study guide · React and TypeScript Live site: shakoorattari.com/ielts Source code: github.com/shakoorattari/ielts

Collocations are words that naturally go together, like “a rigid curriculum”, and they are a common focus when preparing for the IELTS Writing and Speaking tests. A long list is hard to memorise, so I built a free IELTS study guide that turns 1000 of them into daily practice, with model essays to learn from.

It is my own project, not client work. It runs entirely in the browser with no backend and no accounts, and it is live at shakoorattari.com/ielts.

Dashboard of the IELTS Band Builder app in its dark theme: counts of mastered, in-review, learning and not-started collocations, shortcuts to Flashcards, Fill the Blank, Quick Quiz and Writing Practice, and a Model essays card
The dashboard of the app, captured from the live site with no progress saved yet.

The goal

Make collocations stick: practise each one in several different ways, and let a spaced-repetition schedule bring back the ones that are hard to remember.

What I built

  • Spaced-repetition flashcards

    An SM-2 style scheduler: grade each card Again, Hard, Good or Easy and the next review moves accordingly, so due cards resurface automatically. A round that is interrupted resumes where it stopped.

  • Several ways to practise the same phrase

    Fill-the-blank drills with typo-tolerant answer matching, a multiple-choice meaning quiz, and writing practice by topic with autosaved drafts. Every mode feeds the same record for each collocation.

  • Model essays and a phrase bank

    A library of 202 Task 2 essays, filterable by essay type and topic, with the key phrases highlighted and explained, plus an A–Z searchable phrase bank. The essay text is loaded only when it is opened, which keeps the first load small.

  • No accounts, no backend

    Progress is stored in the browser. Optional sync between devices uses a private GitHub Gist that belongs to the learner, with a merge that never loses work from either device.

  • Readable on any screen

    Light, sepia, mint, dark and true-black themes (or automatic, following the device), a navigation menu that adapts to phones, and text colours checked for contrast in every theme.

  • Built to be found

    A single-page app is easy to build and easy to make invisible, so the build includes a text description that crawlers can read without running JavaScript, structured data, a sitemap, and a check in the deployment pipeline that fails the build if any of it breaks.

Scope and limits

The model essays are © Hardev Sir’s IELTS Institute, Bathinda, and are credited in the app. This is an independent study tool, not affiliated with or endorsed by the organisations that own the IELTS test.

Technologies

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • React Router
  • GitHub Actions
  • GitHub Pages

Related