Mind Maze

Overview

Mind Maze is an interactive trivia game that combines fun, competition, and learning into a single web experience. Built entirely with React, it takes full advantage of functional components and React Hooks to deliver a dynamic and smooth gameplay loop. Players answer questions across multiple categories and difficulties, powered by the Trivia API, while enjoying features like timers, scoring, and special "joker" lifelines.

The app also integrates custom sound effects using Howler.js to enhance feedback when answering questions—correct, wrong, and decision moments each come alive with tailored audio cues. Mind Maze is fully responsive, ensuring a seamless experience on both desktop and mobile devices, and was designed to be intuitive, engaging, and replayable for users of all ages.

Mind Maze Cover Page

Tech Stack & Features

🎮 Gameplay Features

Category Highlights
Scoring +100 points for correct answers, -50 points for incorrect ones
Timer 30-second countdown with optional +30 sec joker
Jokers 50/50 (eliminate 2 wrong answers), Double Answer, Extra Time
Sounds Correct/wrong/decision effects, ticking background for countdown
UI & Accessibility Fully responsive, mobile-first design

🛠 Tech Stack

Category Highlights
Frontend React, React Hooks (useState, useEffect, useContext), Components
APIs Trivia API for real-time questions
Sound Howler.js for audio feedback
Styling Custom CSS3, responsive mobile-first design
Deployment Vercel hosting for fast, seamless deployment

Pictures

Mind Maze Screenshot