Code-Type

A modern typing test application designed specifically for programmers. Practice typing code snippets in JavaScript, TypeScript, and Python to improve your coding speed and accuracy.

Features

Core Typing Test

• Code Snippets: 45+ curated snippets across JavaScript, TypeScript, and Python
• Difficulty Levels: Beginner, Intermediate, Advanced, and Expert
• Real-time Metrics: WPM, raw WPM, accuracy, and time tracking
• Syntax Highlighting: Language-aware code display with proper formatting
• Sound Effects: Optional typing sounds with volume control

User System

• Authentication: Secure login and registration with password hashing
• User Profiles: Track personal statistics, trends, and progress
• Settings: Customizable editor preferences, sound settings, and display options

Leaderboard

• Global Rankings: Compete with other programmers
• Filter by Language: See top performers in each programming language
• Personal Stats: Track your position and improvement over time

Practice Modes

• Symbol Practice: Focus on programming symbols ({}, [], =>, etc.)
• Keyword Practice: Language-specific keywords and syntax
• Weak Spot Drills: Target your most common mistakes
• Speed Mode: Push your typing speed limits
• Accuracy Mode: Focus on precision over speed
• Warm-up Routine: Quick exercises before tests

Multiplayer Racing

• Race Rooms: Create or join typing races with room codes
• Real-time Competition: See other players' progress live via Pusher
• Race Results: Compare WPM, accuracy, and finish times
• Chat: Communicate with other players in the lobby

Analytics & Insights

• Performance Charts: Visualize your progress over time
• Error Analysis: Heatmaps showing common mistake patterns
• Typing History: Review past test results
• Recommendations: Personalized suggestions for improvement

Tech Stack

• Framework: TanStack Start (Full-stack React with SSR)
• Router: TanStack Router (File-based routing)
• Data Fetching: TanStack Query
• Database: PostgreSQL with Drizzle ORM
• Styling: Tailwind CSS v4 + shadcn/ui
• State Management: Zustand
• Real-time: Pusher (for multiplayer racing)
• Font: JetBrains Mono (optimized for code display)

Getting Started

Prerequisites

• Node.js 18+
• pnpm
• PostgreSQL database

Installation

1. Clone the repository:

   git clone https://github.com/33b3ziz/code-type.git
   cd code-type

2. Install dependencies:

   pnpm install

3. Set up environment variables:

   cp .env.example .env

   Configure your .env file with the following variables:

   # Database
   DATABASE_URL=postgresql://user:password@localhost:5432/codetype
   
   # Pusher (for multiplayer racing - get from https://pusher.com/)
   PUSHER_APP_ID=your_app_id
   PUSHER_KEY=your_key
   PUSHER_SECRET=your_secret
   PUSHER_CLUSTER=us2
   
   # Client-side Pusher
   VITE_PUSHER_KEY=your_key
   VITE_PUSHER_CLUSTER=us2

4. Set up the database:

   pnpm db:push

5. Start the development server:

   pnpm dev

6. Open http://localhost:3000

Available Commands

# Development
pnpm dev              # Start dev server on port 3000
pnpm build            # Production build
pnpm preview          # Preview production build

# Testing
pnpm test             # Run Vitest unit tests
pnpm test:e2e         # Run Playwright E2E tests

# Code Quality
pnpm lint             # Run ESLint
pnpm format           # Run Prettier
pnpm check            # Run Prettier and ESLint with auto-fix
pnpm tsc              # TypeScript type checking

# Database
pnpm db:generate      # Generate migrations from schema changes
pnpm db:migrate       # Run migrations
pnpm db:push          # Push schema directly to database (dev)
pnpm db:studio        # Open Drizzle Studio GUI

Project Structure

src/
├── components/           # React components
│   ├── ui/              # shadcn/ui base components
│   ├── multiplayer/     # Multiplayer race components
│   └── practice/        # Practice mode components
├── db/                  # Database schema and connection
│   ├── schema.ts        # Drizzle schema definitions
│   └── seed/            # Seed data (snippets)
├── hooks/               # Custom React hooks
│   ├── useTypingTest.ts # Core typing test logic
│   ├── useTimer.ts      # Timer functionality
│   └── usePusherRace.ts # Multiplayer racing hook
├── lib/                 # Utilities and APIs
│   ├── pusher/          # Pusher configuration and race API
│   ├── *-api.ts         # Client-side API functions
│   └── *-server-api.ts  # Server-side API functions
├── routes/              # File-based routes
├── stores/              # Zustand state stores
└── styles/              # Global styles

Key Components

Component	Description
TypingTest	Main typing interface with real-time feedback
DifficultySelector	Choose test difficulty level
LanguageSelector	Filter snippets by programming language
Leaderboard	Global rankings display
UserProfile	Personal statistics and trends
PerformanceChart	Progress visualization
ErrorHeatmap	Mistake pattern analysis

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Commit changes: git commit -m 'feat: add my feature'
4. Push to branch: git push origin feature/my-feature
5. Open a Pull Request

Built with TanStack Start