Projects

Quiz App

2022·1 min read

React
TypeScript
Tailwind CSS
CRA
Express
LinkGitHub

A small full-stack quiz app for drilling English parts of speech. The React client fetches a shuffled word list from an Express API, gives you 30 seconds per word to pick the right category, then asks the server where your final score ranks against everyone else's.

A timed quiz that asks one question: noun, verb, adjective, or adverb?

🚀 Try it live →

A small full-stack quiz app for drilling English parts of speech. The React client fetches a shuffled word list from an Express API, gives you 30 seconds per word to pick the right category, then asks the server where your final score ranks against everyone else's.

✨ Features

  • ⏱️ 30-second per-word countdown with auto-advance when time runs out
  • 🎲 Server-side shuffling that guarantees at least one of each part of speech per round
  • 📊 Live progress bar and a percentile rank computed against past scores
  • 🔔 Toast feedback on submit via react-toastify
  • 🧭 Three-step flow (Landing → Quiz → Results) driven by a single AppContext
  • 🎨 Responsive Tailwind UI with Headless UI radio options

🛠️ Tech Stack

Layer Technology
Client React 18, TypeScript, Tailwind CSS, Headless UI, React Icons, Axios, React Toastify
Build Create React App (react-scripts)
Server Node.js, Express 4, TypeScript, ts-node, Nodemon
Data Local TestData.json (word list + score history)

🙌 Credits

Built by Mohamed Gado.

More projects

  • Desktop Image Resizer App2022 · Electron
  • Full-Stack Movie App2022 · Spring Boot
  • Old Portfolio2022 · React
All projects