Type Racer

Type Fast. Race Hard. Rule Reddit.

Comment

Built with ❤️ using Devvit Web, enhanced by Kiro AI

TypeRacer - Reddit Edition

Tagline: "Type Fast. Race Hard. Rule Reddit."

A competitive typing game that brings the Reddit community together through real-time typing challenges and global leaderboards.

Inspiration

We noticed that existing typing games lack the community engagement that makes Reddit special. TypeRacer was born from the idea that typing speed is a universal skill that transcends subreddit boundaries - whether you're in r/programming or r/gaming, everyone can relate to typing faster and more accurately. We wanted to create a game where users compete not just for personal bests, but for subreddit pride and Reddit-wide recognition.

What it does

TypeRacer is a typing speed game built specifically for Reddit with:

  • Three Difficulty Levels: Easy, Medium, and Hard challenges
  • Real-time Metrics: Live WPM tracking, accuracy percentage, and error counting
  • Interactive Splash Screen: Animated entry point with live typing demonstrations
  • Global Leaderboards: Daily, Weekly, and All-time rankings
  • Reddit Integration: Seamless authentication and subreddit deployment
  • Mobile-First Design: Optimized for both desktop and mobile users

How we built it

Technology Stack:

  • Frontend: React 19 + TypeScript + Tailwind CSS
  • Backend: Express.js + Redis for data persistence
  • Platform: Devvit Web with automatic Reddit authentication
  • Build: Vite for fast development and optimized production builds

Architecture:

src/
├── client/          # React frontend
├── server/          # Express backend  
└── shared/          # Type definitions

Key Formulas:

  • WPM: $WPM = \frac{(\text{characters typed} / 5)}{\text{time in minutes}}$
  • Accuracy: $Accuracy = \frac{\text{correct characters}}{\text{total characters}} \times 100$

Kiro Integration & Developer Experience

Kiro significantly enhanced our development workflow:

1. Intelligent Code Generation

  • Component scaffolding saved hours of boilerplate coding
  • Automated TypeScript interfaces for API responses
  • Quick test file generation for core game logic

2. Real-time Debugging

  • Performance analysis identified bottlenecks in typing detection
  • Intelligent error resolution for React state management
  • Code review suggestions and best practices

3. Creative Problem Solving

  • Adaptive difficulty algorithms
  • Anti-cheat keystroke timing analysis
  • Mobile optimization strategies

Developer Productivity Impact:

  • 50% faster component development
  • 30% reduction in debugging time
  • Seamless workflow integration

Challenges we ran into

1. Real-time Keystroke Tracking Implementing accurate keystroke tracking across devices and browsers required handling various keyboard layouts and managing React state without input lag. We solved this with a custom useTypingGame hook using debounced updates and useCallback optimization.

2. Mobile Responsiveness
Touch keyboards behave differently than physical ones, with limited screen space for text and metrics. We implemented a mobile-first design with larger touch targets and adaptive layouts.

3. Leaderboard Performance Supporting thousands of users required efficient Redis operations. We used sorted sets with time-based keys for fast score insertion and retrieval across multiple timeframes.

4. Platform Constraints Devvit Web's limitations (no external client API calls, specific build requirements) required designing a robust server API layer while leveraging platform capabilities.

5. Cross-Browser Compatibility Different keyboard event handling and CSS support across browsers required extensive testing and progressive enhancement with fallbacks.

Accomplishments that we're proud of

1. Smooth 60fps Animations Achieved buttery-smooth animations including floating particles, game state transitions, and real-time typing cursor with zero lag.

2. Sub-100ms Response Time Our typing detection system provides immediate visual feedback crucial for responsive gameplay.

3. Intuitive Design Zero learning curve - users immediately understand gameplay, difficulty selection, and leaderboard competition.

4. Full Accessibility Complete keyboard navigation, screen reader compatibility, and scalable text for visual impairments.

5. Mobile-First Approach Seamless mobile experience recognizing most Reddit users access via mobile apps.

6. Reddit-Native Integration Feels like a natural part of Reddit with consistent design language and seamless authentication.

7. Scalable Architecture Built to handle thousands of concurrent users with efficient Redis operations and optimized React rendering.

What we learned

1. React Performance Optimization Advanced techniques including strategic useMemo/useCallback usage, proper state management, and component composition patterns for real-time applications.

2. Redis for Gaming Efficient leaderboard operations using sorted sets, atomic operations for consistent updates, and time-based key strategies.

3. Mobile Web Gaming Touch event handling, responsive gaming interfaces, and performance optimization for mobile browsers within Reddit's ecosystem.

4. Platform-Constrained Development Building within Devvit Web constraints while maintaining functionality and leveraging platform-specific features for better integration.

5. Community-Driven Design Creating inclusive designs for all skill levels and competitive features that unite rather than divide communities.

6. AI-Enhanced Development How Kiro accelerates development without sacrificing quality, the importance of human oversight, and creative AI problem-solving applications.

What's next for TypeRacer

Short-term (30 Days)

  • Multiplayer Races: Real-time races between 2-10 players
  • Custom Text Challenges: User-submitted typing content
  • Subreddit Tournaments: Organized community competitions
  • Achievement System: Badges and milestone rewards

Medium-term (3 Months)

  • Seasonal Leagues: Quarterly competitions with special rewards
  • Team Battles: Subreddit vs. subreddit competitions
  • Progress Analytics: Historical performance tracking and weakness analysis
  • Reddit Integration: Flair updates and cross-subreddit leaderboards

Long-term Vision

  • Educational Features: Typing courses and certification system
  • Mobile App: Dedicated application with offline practice
  • AI Enhancement: Adaptive content generation and performance prediction
  • Community Programs: Content creator tools and educational partnerships

TypeRacer represents the beginning of combining competitive gaming with Reddit's community dynamics, bringing Redditors together through the universal challenge of typing faster and more accurately.

Built With

Share this project:

Updates