🏁 Type Kart - Multiplayer Mario Kart TypeRacer

A real-time, head-to-head typing race inspired by Mario Kart and TypeRacer. Race friends or the CPU by typing dynamic text passages as fast and accurately as possible—complete with power-ups like Freeze and Slow!

🚀 Tech Stack

• Monorepo managed with Yarn Workspaces
  • packages/app: React + Vite frontend (TypeScript, Socket.io-client)
  • packages/server: Node.js + Express + Socket.io backend (TypeScript)
  • packages/common: Shared TypeScript types and utilities
• Real-time communication: Socket.io
• Multi-language: TypeScript across frontend, backend, and common code
• Random text generation: random-words
• Dev tooling: ESLint, Prettier, Docker (optional)

🎮 Features

• Real-time head-to-head typing races
• Lobby creation and joining by ID
• Countdown (3-2-1 GO!) with traffic-light indicator
• Live WPM indicator (sliding 5-second window)
• Character-by-character red/green error highlighting
• Animated track with kart icons and finish line
• Power-ups: Freeze Leader (blocks typing), Slow Leader (throttles typing)
• Restart race anytime
• Scalable architecture ready for extensions (leaderboards, auth, etc.)

📁 Repo Structure

/
├── package.json           # Root: Yarn workspaces
├── tsconfig.json          # Root TypeScript config
├── packages/
│   ├── common/            # Shared types and utilities
│   ├── server/            # Express + Socket.io backend
│   └── app/               # React + Vite frontend
└── README.md

🛠️ Getting Started

1. Clone the repository and install dependencies:

   yarn install

2. Start both the server and the frontend in development mode:

   ```bash
yarn start:dev

3. Open your browser:
   • Frontend: http://localhost:3000
   • Backend health check: http://localhost:4000

🏎️ How to Play

1. Create or Join a Lobby: On the landing page, click "Create Lobby" or enter an existing lobby ID.
2. Start Race: The lobby host clicks "Start Race" to begin the countdown.
3. Countdown: Watch the traffic lights change to GO!
4. Type the Text:
   • Characters turn green as you type correctly.
   • The yellow highlight shows the next character.
   • Remaining text is red until typed.
5. Monitor Stats:
   • Live WPM (words per minute) based on recent typing speed.
   • Kart Progress moving along the track.
6. Power-ups (available to last-place typist):
   • ❄️ Freeze Leader: Blocks the leader's input for 3 seconds.
   • 💨 Slow Leader: Throttles the leader's typing speed.
7. Finish Line: First to type the entire passage wins. Click "Restart Race" to play again.

⚙️ Configuration

• Customize race text length, power-up durations, and throttle intervals in packages/server/src and packages/app/src.
• Add new power-ups by extending the PowerUpType in packages/common/src/socketTypes.ts.
• For production builds, consider Dockerizing each package.

📄 License

This project is open source under the MIT License. See LICENSE for details.

🎉 Have Fun!

Enjoy racing with Mario and friends while improving your typing skills! May the fastest typist win! 🏁🏎️