KeyboardWriter

The Ultimate Typing Trainer for Programmers

Live Demo | Documentation | Report Bug

---

Screenshots

Main View

The clean, modern interface with dark mode and glassmorphism design.

Practice Mode

Real-time typing practice with WPM tracking and visual keyboard feedback.

Lessons

Structured learning path with progress tracking and skill-based lessons.

---

What Makes KeyboardWriter Special?

KeyboardWriter is not just another typing trainer. It is specifically designed for programmers and offers unique features:

Feature	Description
Code Playground	80+ interactive coding challenges with real Python/JS/Java/TypeScript in the browser
Gamification	XP, levels, 36 achievements, daily challenges & streaks
Dev Tools Training	Git, Vim, Terminal, Regex, SQL, IDE shortcuts
Smart Analytics	Keyboard heatmaps, progress tracking, weakness analysis
Offline First	PWA with full offline support

---

Feature Highlights

Code Playground with Real Python in Browser

# Solve 80+ challenges directly in your browser!
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Pyodide runs real Python code - no server needed!

Challenge Categories

• 30 JavaScript Challenges: Hello World to Memoization, Currying, Binary Search
• 26 Python Challenges: Basics to Matrix Transposition, Word Frequency
• 12 Java Challenges: OOP concepts, inheritance, interfaces
• 12 TypeScript Challenges: Types, generics, utility types
• Algorithms: FizzBuzz, Fibonacci, Factorial, GCD, Palindrome
• Data Structures: Array flatten, Chunking, Merge Sorted
• Functional Programming: Compose, Curry, Debounce, Throttle

Programmer-Specific Training

Git Training 40+ Git Commands Branch strategies Rebase vs Merge Git Flow Workflow	Vim Training Movement Commands Edit Commands Visual Mode Macros & Registers
Regex Training Pattern Matching Groups & Lookahead Real-World Examples Interactive Testing	Terminal Training Shell Commands Pipes & Redirections File Operations Process Management
SQL Training 30+ SQL exercises SELECT, JOIN, GROUP BY Subqueries & CTEs Window Functions

Gamification

+--------------------------------------+
|  ACHIEVEMENT UNLOCKED!               |
|                                      |
|  "Speed Demon"                       |
|  Reach 100+ WPM in Code Mode         |
|                                      |
|  +500 XP                             |
+--------------------------------------+

• 25 Levels with exponential XP curve
• 36 Achievements in 5 categories
• 5 Rarity Tiers: Common to Legendary
• Daily Challenges with bonus XP
• Streak System for consistent practice

Intelligent Statistics

• Keyboard Heatmap: Shows problem keys visually
• WPM & Accuracy Tracking: Over time with graphs
• Personalized Recommendations: Based on weaknesses
• Spaced Repetition: Review difficult patterns optimally

---

Quick Start

# Clone the repository
git clone https://github.com/niklasmarderx/KeyboardWriter.git
cd KeyboardWriter

# Install dependencies
npm install

# Start the dev server
npm run dev

Open http://localhost:5173 in your browser.

Production Build

npm run build
npm run preview

---

Tech Stack

Technology	Usage
TypeScript	Type-safe codebase
Vite	Lightning-fast builds
Vanilla JS	No framework overhead
CSS Custom Properties	Theming & Dark Mode
Pyodide	Python in browser (WebAssembly)
Service Worker	Offline functionality
LocalStorage	Persistent progress

Project Structure

keyboardwriter/
+-- public/              # Static assets & PWA
+-- src/
|   +-- app/            # App Entry Point
|   +-- components/     # UI Components
|   |   +-- keyboard/   # Virtual Keyboard
|   |   +-- typing-area/# Typing Component
|   |   +-- charts/     # Statistics Charts
|   +-- core/           # Core Modules
|   |   +-- EventBus.ts # Pub/Sub System
|   |   +-- Store.ts    # State Management
|   |   +-- Router.ts   # SPA Router
|   +-- data/           # Lessons & Exercises
|   +-- domain/         # Domain Models
|   +-- pages/          # Page Components
|   +-- services/       # Business Logic
|   +-- styles/         # CSS Modules
+-- index.html

---

Contributing

Contributions are welcome! See CONTRIBUTING.md for details.

# Fork the repo
# Create a feature branch
git checkout -b feature/AmazingFeature

# Commit your changes
git commit -m 'Add some AmazingFeature'

# Push to the branch
git push origin feature/AmazingFeature

# Open a Pull Request

Tests

# Unit Tests
npm run test

# Type Checking
npm run type-check

# Linting
npm run lint

---

Roadmap

• Code Playground with 80+ challenges
• Git, Vim, Regex, Terminal, SQL Training
• Gamification System
• PWA Support
• Multiplayer Typing Races
• VS Code Extension
• Cloud Sync
• More programming languages (C#, Swift, Kotlin)

---

License

Distributed under the MIT License. See LICENSE for more information.

---

Acknowledgments

• Pyodide - Python in the browser
• Vite - Next Generation Frontend Tooling
• All contributors who make this project better!

---

Good luck with your training! Learning to type is like riding a bike - once learned, never forgotten.

Star this repo if you like it!

Made with love for programmers