quizzme!

2026 · rebuilt

built with: react 19, tailwindcss 4, motion 13, vite 8

the deck. the first version was a practice run at fetching data in react: a form of dropdowns, one round, a score. the first rebuild asked what a quiz should actually feel like to play. the second gave it a look to match: a deck of trivia cards on warm paper, printed topic colours, the indigo and lilac from its icon, and buttons that sink into their own edge when you press them.

the wait. open trivia db supplies the community-contributed questions, and its api shaped most of it. it allows one question request every five seconds, so requests queue, and when yours has to wait, a line under the deal button counts it down instead of a spinner. a session token keeps questions from repeating until it runs out or expires after six hours of inactivity, and every topic shows how many questions it really has, so a round never asks for more than exist.

the deck box while dealing: open trivia db takes one request every 5 seconds. dealing in 4s, with a cancel link — the wait, said out loud under the deal button instead of a spinner.

the card. cards are dealt off a visible pile and thrown aside when you move on. answer as you go and a banner along the bottom turns green or red with the right answer in it, or hold every answer back until the end. the banner never changes height, so answering never moves the page.

the feedback banner three times: pick an answer, correct with a 3 in a row chip, and not quite, it was lesotho — one banner, three states, the same height in each.

the replay. the end of a round is a scorecard with the verdict stamped on, your best streak, a split by difficulty, every card to look back on, and a replay of just the ones you missed. the rest is the small stuff i care about. sounds made with the web audio api, sheets that drag to dismiss, a 404 asked as a question, and a landing that fits one screen without a pixel of layout shift.