Claude Code Race

Claude Code Race

Claude Code Race is an engaging live racing leaderboard designed specifically for developers. Utilizing Claude Code hooks, each developer is assigned their own lane where their performance is visualized in a racing format. The more prompts a developer submits, the further their car progresses in the race. When Claude is actively processing a user's prompt, a cheerful yellow 😊 badge appears above their vehicle, and it bobs more energetically as the submission continues. The application features top 5 leaderboards that are refreshed daily and weekly, fostering a bit of competitive spirit without the pressure.

This project is particularly tailored for a full-screen TV display in the office, automatically starting upon system boot.

Available in multiple languages: English, Polski, Deutsch, Español, Français, 日本語.

Purpose

The main objective of Claude Code Race is to transform the daily coding routine into an enjoyable and light-hearted competition. By integrating Claude Code hooks into a shared dashboard, it eliminates the feelings of surveillance while creating a lively office atmosphere.

Architecture Overview

The architecture consists of a developer's laptop running Claude Code and a server that utilizes Node.js and WebSocket. The sequence of events is designed to ensure a smooth operation during the coding session:

┌──────────────────────────┐    POST /api/event    ┌──────────────────────────────┐
│  Developer's laptop      │ ─────────────────────►│  Server (Node + WebSocket)    │
│  Claude Code             │                       │  Express + ws + JSON storage  │
│   ├── hook (sh|cmd|ps1)  │                       │                               │
│   └── ~/.claude/settings │                       └────────────┬──────────────────┘
└──────────────────────────┘                                    │ WebSocket push
                                                                ▼
                                                      ┌─────────────────────┐
                                                      │ Browser dashboard   │
                                                      │ (TV in the office)  │
                                                      └─────────────────────┘

Key Features

• Real-Time Scoring: Events such as UserPromptSubmit, PreToolUse, Stop, and SessionStart are recorded, allowing for immediate visual feedback and score updates.
• Persistent Data: Performance data is saved in data/stats.json, maintaining a record of user activity.
• Dynamic Dashboard: Updates in real-time, providing instant visualizations of scores and leaderboard positions.

Scoring Mechanics

The scoring system rewards developers based on various actions during their coding sessions:

Positioning scales are designed to ensure that reaching the front of the race requires consistent effort, rather than a single submission.

API Endpoints

Claude Code Race offers a straightforward API for interaction:

Contributing

Contributions are welcome. Claude Code Race strives to remain minimalistic while adding value to developers' workspace. Ideas for improvement and enhancements are encouraged, including sound effects for events, per-project leaderboards, and more.

This project creates a fun, competitive environment among developers that boosts productivity while ensuring a lively atmosphere in any workspace.