recarepyT: The Chaos Typing Championship

"Type Backwards. Fail Spectacularly. Win Everything." A chaotic twist on typing games where typos earn chaos points, and the worst typist with the most style wins.

Comment

Inspiration

I wanted to flip the rules of traditional typing games by rewarding imperfection instead of punishing mistakes. Typing words backwards—where typos earn "chaos points"—felt like a fun, chaotic twist that would challenge players and celebrate creativity over perfection.

What it does

recarepyT is a multiplayer typing game where players race to type words backwards as fast as possible. Typos earn bonus "chaos points," and the player with the most chaos points wins. It features real-time multiplayer races, solo practice mode, global leaderboards, and celebratory animations for added fun.

How we built it

The project was built using:

  • React + TypeScript: For the frontend with type-safe code.
  • Tailwind CSS: For sleek, responsive styling.
  • Supabase: For authentication, database management, and real-time multiplayer functionality.
  • Framer Motion + Canvas Confetti: For animations and celebratory effects.
  • Supabase Realtime API: To enable live updates during races.

Game logic includes dynamic word progression (easy to hard), typo detection, and a scoring system combining WPM, accuracy, and chaos points.

Challenges we ran into

  1. Real-Time Synchronization: Ensuring smooth multiplayer gameplay required careful handling of Supabase Realtime subscriptions and debouncing input events.
  2. Game Logic Complexity: Reversing words dynamically while detecting typos introduced edge cases that needed thorough testing.
  3. Performance Optimization: Animations and real-time updates had to remain performant, especially on lower-end devices.
  4. Design Balance: Striking the right balance between chaos and clarity was tricky but essential for a fun user experience.

Accomplishments that we're proud of

  • Successfully implemented real-time multiplayer functionality with Supabase Realtime.
  • Created a unique scoring system that rewards typos, flipping the traditional typing game paradigm.
  • Designed a visually engaging experience with animations, confetti, and a dark-themed retro aesthetic.
  • Built a responsive app that works seamlessly across mobile, tablet, and desktop.

What we learned

  • How to use Supabase Realtime for live multiplayer updates.
  • The importance of responsive design and touch-friendly interfaces for cross-device compatibility.
  • Techniques for adding engaging animations and visual feedback using Framer Motion and Canvas Confetti.
  • Structuring a scalable database schema and handling edge cases in game logic.

What's next for recarepyT: The Chaos Typing Championship

  • Power-Ups: Add chaotic power-ups like randomizing letters or slowing down opponents.
  • Custom Rooms: Allow users to create private rooms with custom settings.
  • Daily Challenges: Introduce daily challenges with unique word sets and leaderboard resets.
  • Mobile App: Develop a native mobile app for iOS and Android using React Native.
  • Community Features: Enable sharing of funny typos and chaos moments on social media.

Built With

Share this project:

Updates