One component per question type
Each Reading question type is its own component behind one typed renderer. Test content and scoring are kept separate from the screens.
IELTS Mock Test
A computer-delivered IELTS practice exam for an education platform: Listening, Reading, Writing and Speaking in an interface that feels like the real test day.
- Type
- Exam practice platform
- Company
- AlgoVerse LTD, client project
- Role
- Frontend developer
- Stack
- React, TypeScript, Vite, React Router, Tailwind CSS
Private client project
The brief
Candidates practise best on something that looks and behaves like the computer-delivered exam. The client needed the full mock-test frontend: choosing a test, checking details, all four modules, and results.
The frontend was built as a standalone package with a clear place to connect the API.
What I built
- A test catalogue and a setup flow with candidate details, system checks and exam instructions.
- Listening with a timer, audio, answers, notes, review flags, autosave and submit.
- Reading with the passage and questions side by side, all 20 question types, highlights, notes and per-question review flags.
- Writing and Speaking screens, a subscription page and results with score review.
Key decisions
A clear line for the API
Pages own timers, drafts, navigation and submission; question components only display and collect answers. That leaves one clear boundary where the API connects.
Small details candidates notice
Review flags sit next to the question they mark, a highlight opens its note, matching grids can be deselected, and scrollbars match the exam reference.