Frontend Arena
- Product Design
- Web App Development
- Design System
- Performance
- Self-initiated
- Visit live site ↗
A quiz platform where aspiring frontend developers test what they know and watch it improve.
Aspiring frontend developers in Ghana learn from scattered tutorials with no way to test what stuck. Without a measure of progress, confidence collapses in the technical interview — the one place it has to hold.
Sole designer and frontend engineer. Nine weeks, nights and weekends.
- Question engine and scoring model
- Supabase schema, auth and row-level security
- Real-time answer feedback
- Progress dashboard and streaks
- Offline-tolerant quiz state
- Keyboard-first, screen-reader tested
Approach
The first version was a form. You picked an answer, pressed submit, waited, and a page reloaded to tell you whether you were right. It worked, and nobody used it twice.
What was missing was the feeling of a conversation. So the second version answers instantly: the option you pick resolves in place, the explanation slides in underneath it, and the next question is already prefetched. Nothing waits on the network that does not have to.
That decision drove the architecture. A quiz session is fetched as one payload, scored on the client, and reconciled with Supabase in the background. If the connection drops mid-session — which, on a Ghanaian mobile network, it will — the quiz keeps working and syncs when it returns.
Building it
Every question carries an explanation, so the content weight is real. Rather than ship it all, questions stream in batches of ten and images are AVIF with a WebP fallback.
Keyboard navigation was not a late addition. Options are radio inputs, 1–4 select, Enter confirms, and the focus ring is the same one used everywhere on this site.
Want to talk about the work?
Tell me what you have in mind and what it has to do. I answer within a day, and I will say plainly if I am not the right person for it.