factfrenzy254

Fast-paced trivia battles where Redditors race against 20-second timers in 5-round knowledge challenges with modern UI, real-time leaderboards, and speed-based scoring!

Comment

Inspiration

The inspiration for Fact Frenzy came from our love of competitive trivia and the unique opportunity to build something truly engaging within Reddit's ecosystem. We are fascinated by the challenge of creating a game that can bring communities together through shared knowledge while leveraging Reddit's native webview capabilities.

The core concept emerged from observing how Redditors naturally engage in trivia discussions across various subreddits - from r/AskReddit's "What's a fun fact you know?" threads to r/TodayILearned's daily knowledge sharing. We wanted to transform this passive consumption into an active, competitive experience that rewards both speed and accuracy.

The timing pressure was inspired by classic game shows like "Jeopardy!" and modern mobile games that create urgency through countdown mechanics. We aimed to capture that adrenaline rush while ensuring the game remained accessible and educational.

What it does

Fact Frenzy transforms Reddit into a competitive trivia battleground where users race against 20-second timers across 5 rounds of carefully curated questions. The game features:

  • Speed-based scoring system: 100 points for answers ≤10 seconds, 50 points ≤20 seconds, 1 participation point for wrong answers
  • Real-time leaderboards: Community rankings stored using Reddit's Redis integration
  • Modern neumorphic UI: Soft shadows, gradient backgrounds, and tactile button effects
  • Educational explanations: Every question includes detailed context to turn gameplay into learning
  • Responsive design: Optimized for both mobile and desktop Reddit users
  • Accessibility-first approach: WCAG 2.1 AA compliance with proper focus states and reduced motion support

The game automatically progresses through questions with smooth animations, celebrates correct answers with confetti effects, and provides achievement badges based on performance levels (Perfect 🏆, Excellent 🥇, Great 🥈, Good 🥉, Keep Trying 💪).

How we built it

Fact Frenzy leverages Reddit's Developer Platform with a modern tech stack designed for performance and user experience:

Frontend Architecture:

  • React 19 with TypeScript for type-safe development
  • Custom hooks (useGameState, usePageTransition) for centralized state management
  • Tailwind CSS with custom design system for consistent styling
  • Real-time timer system with 0.1-second precision using setInterval
  • Staggered entrance animations with configurable delays for smooth UX

Backend Integration:

  • Express.js API endpoints (/api/init, /api/start-game, /api/submit-answer)
  • Redis persistence for game sessions and leaderboards via Devvit
  • Session management with unique game IDs and Reddit user authentication
  • Random question selection from curated pool of 25+ questions

Development Workflow:

  • Kiro AI integration for content generation, testing, and optimization
  • Vite build system with hot reloading and bundle optimization
  • Concurrent development with separate client/server/watch processes
  • Performance monitoring with FPS tracking and animation analysis

The architecture follows a clean separation between client (src/client/), server (src/server/), and shared (src/shared/) modules, ensuring maintainability and scalability.

Challenges we ran into

Performance Optimization: One of our biggest challenges was maintaining smooth 60fps animations while handling real-time timer updates and complex state transitions. We solved this by implementing React.memo optimizations, CSS transforms with hardware acceleration, and efficient re-rendering strategies.

Cross-Platform Compatibility: Ensuring the game worked seamlessly across Reddit's mobile app, mobile web, and desktop required extensive testing. We implemented touch-friendly 44px+ targets, responsive breakpoints, and adaptive layouts.

Timer Precision: Creating a fair scoring system based on response time required careful consideration of network latency and browser performance variations. We implemented client-side timing with server validation to ensure accuracy.

State Management Complexity: Managing game state across multiple rounds, timer states, answer submissions, and leaderboard updates required a sophisticated state machine. Our custom useGameState hook handles all transitions with proper cleanup and error boundaries.

Accessibility Compliance: Meeting WCAG 2.1 AA standards while maintaining the modern aesthetic was challenging. We implemented proper focus management, reduced motion support, and screen reader compatibility without compromising the visual design.

Accomplishments that we're proud of

Modern UI/UX Design: We're particularly proud of creating a cohesive neumorphic design system that feels premium and engaging. The soft shadows, gradient backgrounds, and smooth animations create a tactile experience that elevates the gameplay using Kiro's AI.

Performance Excellence: Achieving consistent 60fps animations with complex state transitions and real-time updates demonstrates our commitment to technical excellence. The game feels responsive and polished across all devices.

Educational Value: Every question includes detailed explanations that transform gameplay into learning opportunities. Players don't just compete - they expand their knowledge base with fascinating facts.

Community Integration: The persistent leaderboards create genuine community engagement within subreddits. Players can compete with their peers and track their improvement over time.

Accessibility Leadership: Implementing comprehensive accessibility features sets a standard for inclusive game design. The game is playable by users with various abilities and preferences.

Technical Innovation: The combination of React hooks, TypeScript, and Reddit's platform creates a robust, scalable foundation for future enhancements.

What we learned

Platform-Specific Development: Building for Reddit's webview environment taught us the importance of understanding platform constraints and opportunities. The seamless integration with Reddit's authentication and data persistence opened new possibilities for community-driven experiences.

Performance-First Design: We learned that modern UI doesn't have to sacrifice performance. By implementing efficient rendering strategies and hardware-accelerated animations, we created a visually stunning experience that runs smoothly on all devices.

User Experience Psychology: The psychology of competitive gaming became clearer through development. The 20-second timer creates urgency without panic, while the speed-based scoring rewards quick thinking without punishing careful consideration.

Accessibility Impact: Implementing accessibility features from the start proved more effective than retrofitting. The inclusive design approach enhanced the experience for all users, not just those with specific needs.

Community Dynamics: Understanding how Reddit communities engage with content helped us design features that encourage participation and social interaction. The leaderboard system creates friendly competition that strengthens community bonds.

AI-Assisted Development: Kiro's integration demonstrated the power of AI in content generation, testing, and optimization. The AI-assisted workflow accelerated development while maintaining quality standards.

What's next for factfrenzy254

Enhanced Gameplay Features:

  • Power-ups system: Earn hints like "50/50" or "Add 5 seconds" through performance achievements
  • Daily streaks: Maintain consecutive playing streaks for bonus points and special rewards
  • Achievement badges: "Answered 100 facts!", "5x Perfect Rounds!", "Speed Demon" for consistent fast answers
  • Tournament mode: Weekly community competitions with bracket-style elimination

Community-Driven Content:

  • User-submitted questions: Allow subreddit communities to submit trivia questions (moderator-approved)
  • Category-specific packs: Science, History, Geography, Pop Culture themed question sets
  • Difficulty scaling: Adaptive difficulty based on player performance and preferences
  • Multiplayer modes: Real-time head-to-head competitions between users

Technical Enhancements:

  • Analytics dashboard: Detailed performance metrics and learning progress tracking
  • Offline mode: Cache questions for play without internet connection
  • Voice integration: Answer questions using voice commands for accessibility
  • Progressive Web App: Enhanced mobile experience with app-like functionality

Platform Expansion:

  • Cross-subreddit tournaments: Compete across different communities
  • Integration with Reddit's award system: Use Reddit coins for premium features
  • API for third-party developers: Allow other apps to integrate Fact Frenzy questions
  • Educational partnerships: Collaborate with educational institutions for curriculum-aligned content

The foundation we've built with modern React architecture, TypeScript type safety, and Reddit's robust platform provides a solid base for these ambitious future developments. We're excited to continue evolving Fact Frenzy into the ultimate community trivia experience!

Share this project:

Updates