devkeys

Type faster. Code smarter.

A privacy-first typing trainer built for developers who want to sharpen their coding muscle memory.

Born from the need to master a new split keyboard layout while practicing real code—not random text.

Features • Quick Start • Documentation • Contributing

---

✨ Features

Practice with Real Code

• Type algorithm implementations, syntax patterns, and idiomatic code snippets
• Built-in prompts for multiple programming languages with syntax highlighting
• Create and manage custom prompts for your specific learning needs

Developer-Focused Experience

• Tab-to-indent that respects code alignment
• Available syntax themes: VSCode Dark, Dracula, Monokai, One Dark, Night Owl, Nord, Tokyo Night, Solarized Dark, GitHub Dark
• Desktop-like interface with draggable, resizable windows
• File-based prompt organization with language switcher

Live Metrics & Analytics

• Real-time WPM, accuracy, and completion tracking
• Per-session statistics with detailed breakdowns
• Prompt-specific history to track improvement over time
• All personal data stored locally in IndexedDB—nothing leaves your device
• Optional analytics (self-hosted, no personal data) - disabled by default

Built for Performance

• Rust WASM engine for blazing-fast diff calculation and scoring
• Smooth animations powered by Framer Motion
• Responsive UI with Tailwind CSS and minimal dependencies

🚀 Quick Start

Prerequisites

• Node.js 20+
• pnpm 8+
• Rust toolchain + wasm-pack

# Install Rust targets (one-time setup)
rustup target add wasm32-unknown-unknown
cargo install wasm-pack

Installation

# Clone and install dependencies
git clone https://github.com/hate/devkeys.git
cd devkeys
pnpm install

# Start the development server
pnpm dev:web

Open http://localhost:5173 and start typing!

🎯 Usage

• Start typing — Focus is automatic; just begin typing the displayed code
• Tab — Auto-complete indentation to match the prompt
• Click the stats panel — View detailed metrics and session history
• Custom prompts — Add your own via the explorer sidebar

📦 Project Structure

devkeys/
├── apps/web/                    # React + Vite frontend
│   ├── src/
│   │   ├── app/                 # App-level styles and configuration
│   │   ├── config/              # Application constants and configuration
│   │   ├── content/             # Prompt packs and content management
│   │   │   ├── packs/           # JSON prompt files (algorithms, etc.)
│   │   │   ├── localPacks.ts    # Local prompt pack definitions
│   │   │   └── types.ts         # Content-related type definitions
│   │   ├── features/            # Feature-based modules
│   │   │   ├── editor/          # Code editor components and utilities
│   │   │   ├── explorer/        # File explorer and prompt management
│   │   │   ├── session/         # Session state, metrics, and persistence
│   │   │   └── stats/           # Statistics display and history
│   │   ├── shared/              # Shared components, hooks, and utilities
│   │   │   ├── components/      # Reusable UI components
│   │   │   ├── feedback/        # Typing feedback system
│   │   │   ├── hooks/           # Custom React hooks
│   │   │   ├── styles/          # Design tokens and styling utilities
│   │   │   ├── syntax/          # Syntax highlighting and themes
│   │   │   ├── types/           # Shared TypeScript types
│   │   │   └── utils/           # Utility functions
│   │   └── wasm/                # Compiled Rust engine (generated)
│   ├── dist/                    # Production build output
│   ├── public/                  # Static assets
│   └── package.json             # Web app dependencies and scripts
├── crates/engine/               # Rust scoring engine
│   ├── src/
│   │   ├── diff.rs              # Text diffing algorithms
│   │   ├── engine.rs            # Core typing engine logic
│   │   ├── feedback.rs          # Real-time feedback system
│   │   ├── types.rs             # Rust type definitions
│   │   └── lib.rs               # Library entry point
│   └── Cargo.toml               # Rust dependencies
├── docs/                        # Architecture & contribution guides
├── screenshots/                 # Project screenshots
├── target/                      # Rust build artifacts
├── Cargo.toml                   # Root Rust workspace configuration
├── package.json                 # Root package.json for workspace
├── pnpm-workspace.yaml          # pnpm workspace configuration
└── README.md                    # This file

🧪 Development

# Run all checks (lint, typecheck, build, tests)
pnpm verify

# Build WASM engine only
pnpm build:wasm

# Run Rust tests
pnpm test:rust

# Production build
pnpm build:web

🛠️ Tech Stack

• Frontend: React 18, TypeScript, Tailwind CSS, Zustand, Framer Motion
• Syntax: highlight.js with VS Code theme support
• Engine: Rust compiled to WebAssembly via wasm-bindgen
• Storage: IndexedDB for session persistence
• Build: Vite, pnpm workspaces

🔒 Privacy First

• 100% local — All typing data, sessions, and progress stay on your device
• Optional analytics — Self-hosted Umami analytics (disabled by default) track only:
  • Page visits (automatic)
  • Run started events (no content)
  • Run completed events (no content)
  • Note: The demo site at devkeys.app has analytics enabled for demonstration purposes
• No personal data — No cookies, no user identification, no content transcription
• No external tracking — Analytics are self-hosted and you control all data
• Offline-ready — Works without an internet connection once loaded
• Open source — Audit the code yourself

📚 Documentation

• Product Principles
• Goals & Features
• Architecture
• Contributing Guide

🤝 Contributing

We welcome contributions! Whether it's new prompt packs, bug fixes, or feature additions, check out our Contributing Guide to get started.

📄 License

MIT © DevKeys Contributors