BrainBolt

• 

  Points are always saved, which makes the pilots happy.

• 

  responsive design

• 

  How many points did he get in each?

Inspiration

As a student passionate about both learning and coding, I noticed that traditional quiz apps often lack engagement and don't allow real-time competition. I wanted to build something that made learning exciting, competitive, and social—something I myself would love to use. That’s how BrainBolt was born: a real-time quiz battle platform for students like me.

What it does

BrainBolt is a real-time quiz platform where users can:

Practice solo quizzes by subject and difficulty level (Beginner, Intermediate, Advanced)

Compete 1vs1 or in group battles

Earn XP, use hints (which cost XP), and appear on leaderboards

Learn key subjects like Math, Biology, Physics, History, and more

It’s designed to be educational, fast-paced, and gamified.

How we built it

We built BrainBolt using:

React + TypeScript + Vite for the front-end

Framer Motion for beautiful UI animations

Ant Design for modern UI components

React Router for navigation

LocalStorage for saving XP, progress, and questions locally

All data like questions and XP are managed on the client side for now, making it lightweight and easy to test.

Challenges we ran into

Designing a quiz system that supports multiple subjects and three difficulty levels

Managing real-time-like transitions and XP logic using only LocalStorage

Keeping the UI clean and responsive while making it fun and interactive

Deciding how hints should work and how XP should be deducted fairly

Accomplishments that we're proud of

Implemented a full XP and leaderboard system using just the frontend

Designed multiple subject categories with clean UI and animated transitions

Made the quiz experience competitive and educational at the same time

Added a unique Hint System where pressing a lightbulb reveals the correct answer (but costs XP)

What we learned

How to create an engaging user experience using animations and micro-interactions

Structuring and managing data efficiently with localStorage

Building responsive UI components using Ant Design

The importance of good UX in learning-focused apps

What's next for BrainBolt

Add multiplayer features with backend support (e.g., Firebase or Supabase)

Introduce user authentication and profile saving

Add a timer and more advanced question types (e.g., fill in the blanks, drag-and-drop)

Launch BrainBolt as a full educational game platform for students worldwide

Built With

• ant-design
• react
• tailwindcss
• typescript