TypeClash

A real-time multiplayer typing game built with Next.js, WebSockets, and Express.

Overview

TypeClash is a competitive typing game where players compete in real time to measure their typing speed, accuracy, and consistency. Each match is designed for two players, with results calculated and displayed live.

The frontend uses Next.js for a responsive and interactive interface, while the backend relies on Express and WebSockets to manage real-time communication and game state. Prisma is used with a relational database to store user data, match history, and leaderboards.

Features

• User Authentication: Google OAuth sign-in with persistent player profiles.
• 1v1 Matches: Real-time multiplayer matches where players type the same text passage simultaneously.
• Typing Metrics: Tracks words per minute (WPM), accuracy, and consistency for each player.
• Leaderboards: Displays top-performing players globally or among friends.
• Match History: Stores previous games so players can review results and track performance over time.

Gameplay Flow

1. Player Login: Users sign in with Google OAuth and access their profile, including stats and match history.
2. Matchmaking: Players can join random matches or invite friends to compete.
3. Countdown and Text Selection: Before the match starts, a short countdown is displayed. A text passage is selected and shared with both players.
4. Typing Phase: Players type the passage in real time. Keystrokes and progress are synchronized via WebSockets.
5. Metrics Calculation: As players type, the system calculates WPM, accuracy, and consistency. Mistakes are tracked and displayed live.
6. Match End: Once both players complete the passage or the time runs out, final metrics are calculated and displayed.
7. Results and Leaderboards: Match results are saved to the database and leaderboard rankings are updated. Players can review past matches for improvement.

• Additional Features in Development:

  • Spectator mode to watch live matches.
  • Alternative game modes, such as timed challenges or accuracy-focused matches.
  • Seasonal and global leaderboards.
  • Mobile-friendly interface.
  • Analytics dashboard for user performance metrics.

Tech Stack

• Frontend:

  • Next.js: Server-side rendering and routing
  • React: UI components
  • TailwindCSS: Styling and responsive layout
  • Axios / Fetch API: HTTP requests to backend
  • React Context / Zustand: State management

• Backend:

  • Express: REST endpoints and server logic
  • WebSocket (ws): Real-time multiplayer communication
  • Node.js: Runtime environment
  • Prisma: Database ORM
  • PostgreSQL: Relational database

• Authentication:

  • Google OAuth via NextAuth.js for secure sign-in

Repository Structure

typeclash/
│── apps/
│   ├── frontend/   # Next.js client application
│   ├── backend/    # Express + WebSocket server
│
│── packages/
│   │── db/         # Database schema and migrations
│   ├── shared/     # Shared types, utilities, and constants
│── README.md

Getting Started

1. Clone the repository

git clone https://github.com/your-username/typeclash.git
cd typeclash

2. Install dependencies

npm install

3. Configure environment variables

Create .env files inside apps/frontend and apps/backend containing:

• Database URL
• Google OAuth credentials
• Any other required configuration

4. Run database migrations

npx prisma migrate dev

5. Start development servers

Frontend:

npm run dev --workspace frontend

Backend:

npm run dev --workspace backend