Brain-Games Quiz App
An interactive, highly performant, and animated quiz application with dynamic data fetching and intelligent search, designed for engaging user experiences.
Check it out
Roles: Frontend Developer
Client: Personal Project
ReactContext APIChakra UILottieOpenAPI (for categories)Tailwind CSSUndraw (Illustrations)
Overview
Built entirely on the frontend with React, this app uses the Context API for efficient state management and features engaging Lottie animations. It dynamically fetches questions from `opentdb.com` API and offers an intuitive auto-suggestion search across multiple quiz categories. Chakra UI provides a polished and responsive user interface, featuring a live scoreboard to foster competition, with a strong emphasis on seamless user flow and exceptional UI/UX.
Tech Stack
- React
- Context API
- Chakra UI
- Lottie
- OpenAPI (for categories)
- Tailwind CSS
- Undraw (Illustrations)
Features
- Dynamic Quiz Generation & Lottie AnimationsFetches quiz questions dynamically from `opentdb.com` API and integrates engaging Lottie animations for smooth transitions and an interactive experience.
- Intelligent Auto-Suggestion SearchImplemented an auto-suggestion search for diverse quiz categories, enhancing user discoverability and streamlining quiz selection.
- Efficient State Management & Live ScoreboardUses React's Context API to manage quiz state, user answers, and scores without prop drilling, featuring a live scoreboard for competition.
- Exceptional UI/UX with Undraw IllustrationsDesigned a smooth, easy user flow with a strong UI/UX priority using Chakra UI and integrated Undraw illustrations/SVGs for a polished and aesthetically pleasing feel.