QuizBuzz

• 

  Choose a topic for the quiz

• 

  Choose a mode solo or social mode

• 

  Fun punnishment

• 

  answer a question

Inspiration

During an impromptu night out, we didn't have access to traditional quiz cards, and honestly, they feel overplayed and boring anyway. Everyone was stuck on their phones instead of engaging with each other. I thought: "What if we could create something fresh that makes wrong answers the highlight instead of the buzzkill?" I wanted to design a digital solution that captures the spontaneous energy of impromptu hangouts while making quiz games actually entertaining. The idea of turning failures into hilarious moments - like making someone sing opera or do jumping jacks - felt like the perfect way to create genuine laughter and connection.

What it does

QuizBuzz is an interactive quiz game with two modes: Social Mode for parties where players shout answers and get fun punishments for wrong ones, and Solo Mode with multiple choice questions for individual learning. It features diverse subjects from American History to Brain Rot TikTok, countdown timers that build tension, and hilarious challenges like "sing Happy Birthday in opera voice" that turn failures into entertainment.

How we built it

Built with React and Tailwind CSS, featuring a modular data structure for easy database integration. Implemented custom timer logic with useEffect hooks, particle animation systems for visual appeal, and responsive design patterns. Used glassmorphism effects, vibrant gradients, and micro-animations to create a premium mobile game aesthetic. The architecture supports dual game modes with conditional rendering and smooth state transitions.

Challenges we ran into

Managing complex interconnected states without Redux was challenging - coordinating timers, screen transitions, and game flow required careful hook orchestration. Timer synchronization between countdown, answer reveals, and punishment displays needed precise useEffect coordination. Particle animations initially caused mobile performance issues, solved by limiting particle count and optimizing CSS transforms.

Accomplishments that we're proud of

Created a quiz experience that makes wrong answers more entertaining than right ones. Successfully balanced competitive gaming with inclusive social fun. Built a modern, premium-feeling interface that rivals mobile games. Implemented smooth dual-mode functionality that works equally well for parties and solo learning. Designed a scalable data structure ready for AI integration and real databases.

What we learned

This project pushed me to think beyond traditional UX patterns and consider emotional design:

Gamification Psychology: How to make "losing" feel rewarding through creative punishments Social Dynamics: Balancing competitive elements with inclusive fun Modern Web Aesthetics: Implementing glassmorphism, particle animations, and gradient-heavy designs that feel premium State Management: Complex timer logic, screen transitions, and game flow coordination Responsive Design: Creating interfaces that work equally well on phones and large screens for party settings

The biggest learning was that engagement isn't just about getting answers right - it's about creating moments of shared experience.

What's next for QuizBuzz

AI integration for dynamic question generation based on current events and user preferences. Real-time multiplayer with WebSocket support for remote party play. Custom punishment creator letting users add their own challenges. Voice recognition for hands-free social gameplay. Achievement system with badges and streaks to increase engagement.

Built With

• bolt.new
• netlify
• react
• tailwindcss
• typescript