BrainyBlitz

• 

  Main page

• 

  Quiz screen

• 

  Results

Inspiration

The inspiration for BrainyBlitz came from my desire to create a clean, modern, and endlessly replayable quiz experience. I found that many trivia apps feel cluttered or rely on a static set of questions that quickly become repetitive. I wanted to build something that was not only fun and challenging but also felt fresh every single time you played. My goal was to create a simple, accessible web app that anyone could open and enjoy, whether they have five minutes or an hour to spare.

What it does

BrainyBlitz is a dynamic, timed quiz application that tests users' knowledge across eight different categories. A user can select a topic, choose a difficulty level (Easy, Medium, or Hard), and then answer ten randomly generated questions, each with a 15-second timer. After the quiz, the app displays their final score and gives them the option to review their answers, providing a valuable learning experience.

How I built it

I built BrainyBlitz using a stack of core web technologies to keep it lightweight, fast, and accessible.

• HTML5 provides the structure of the application.

• CSS3 and Tailwind CSS were used to create a clean, modern, and fully responsive design that works seamlessly on both mobile and desktop.

• JavaScript powers all of the application's logic, from handling user interactions to managing the quiz state.

• The Open Trivia Database (OpenTDB) API is used to fetch a fresh set of questions in real-time for every quiz, ensuring endless replayability.

Challenges I ran into

One of the first challenges I ran into was ensuring a consistent and polished user experience across all devices. I spent time refining the responsive design using Tailwind CSS to make sure the category grid and quiz layout adapted perfectly from a small mobile screen to a large desktop monitor. Another challenge was integrating the API and handling potential errors, like when the API couldn't find questions for a specific category and difficulty. Finally, I ran into a tricky deployment issue with GitHub Pages where a failed build got stuck in the queue, which required me to debug the deployment process itself.

Accomplishments that I'm proud of

I'm incredibly proud of creating a fully functional and polished web application from scratch on my own. A major accomplishment was successfully integrating the Open Trivia Database API, which transformed the project from a simple quiz into a dynamic and endlessly engaging experience. I'm also proud of the clean, intuitive user interface and the small details that enhance the user experience, like the custom-styled dropdown, the loading spinner, and the celebratory confetti for a perfect score.

What I learned

This project was a fantastic learning experience. I gained valuable hands-on experience with fetching and handling data from a third-party API in real-time. I also deepened my understanding of responsive web design and the power of utility-first CSS frameworks like Tailwind. Finally, I learned the importance of a structured development process, from initial ideation and feature implementation to debugging deployment issues and preparing a project for a public launch.

What's next for BrainyBlitz

The foundation of BrainyBlitz is solid, but there are many exciting features I'd love to add in the future. The next logical step would be to implement a high score system using local storage to allow users to track their personal bests in each category. I could also expand the app by adding more categories, introducing different question formats (like true/false), or even adding a multiplayer mode where friends can challenge each other.

Built With

• css3
• html5
• javascript
• opentdb