SpeedTyping

Speed Typing Practice & Analytics Platform

Development paused to focus on higher-priority projects
View Source
SpeedTyping Screenshot
1 / 5

Project Overview

SpeedTyping is a web-based typing practice platform designed to help users improve their typing speed and accuracy through structured practice sessions and detailed performance analytics. The application provides timed and fixed-length typing tests, real-time performance tracking, achievement systems, and competitive leaderboards.

While the project contains all core features and is functionally complete, I had to pause development to focus on other projects that became higher priorities. The codebase demonstrates solid Django patterns, interactive frontend features, and comprehensive data visualization techniques.

Technical Stack

Django Django
Python Python
Bootstrap Bootstrap
Chart.js Chart.js
JavaScript JavaScript
SQLite SQLite

Backend

  • Django 5.2.4 — High-level Python web framework
  • Python — Core programming language
  • SQLite — Database for development (production migration planned)
  • Custom User Model — Extended Django authentication with email-based login
  • Signal-Based Architecture — Automated user leveling and achievement unlocking

Frontend

  • Bootstrap 5.3 — Responsive UI framework
  • Chart.js — Dynamic performance visualization and analytics
  • Vanilla JavaScript — Client-side typing mechanics and real-time calculations
  • Custom CSS with Theme System — Dark/light mode with CSS variable-based theming

External Libraries

  • Wonderwords — Random word generation for practice texts
  • Python Decouple — Environment configuration management

Core Features

⏱️ Dual Test Modes

Timed Tests

  • Configurable durations (30s, 1m, 3m, 5m)
  • Real-time WPM and accuracy calculations
  • Speed curve tracking for performance analysis

Fixed-Length Tests

  • Word-count based tests (25, 50, 100, 300 words)
  • Elapsed time tracking
  • Completion-based metrics

📝 Content Variety

Story & Article Mode

  • Curated texts with difficulty ratings
  • Categorized by length (short, medium, long)
  • Optional modifiers (more numbers, punctuation, capitals)

Random Words Mode

  • AI-powered word generation
  • Three difficulty levels (easy, medium, hard)
  • Customizable word counts

📊 Advanced Analytics Dashboard

Performance Metrics

  • Average WPM and accuracy across all tests
  • Total typing time with formatted display
  • Completed test count
  • Historical trend analysis

Visual Analytics

  • Multi-period history chart (daily, weekly, monthly, all-time)
  • Dual-axis visualization (WPM + accuracy)
  • Mistake frequency analysis by letter
  • Customizable chart types (pie, polar area)
  • Configurable data display limits

Detailed Test Results

  • Per-letter mistake tracking
  • Average keystroke delay analysis
  • Second-by-second speed curve visualization
  • Three specialized charts per result (speed over time, mistakes per letter, delay per letter)

🎮 Gamification System

Level Progression

  • Experience points earned per second typed
  • Automatic level advancement with overflow XP handling
  • Level titles and descriptions
  • Progress bar visualization

Achievement System

  • Multi-category achievements (WPM milestones, accuracy targets, test completion counts, total typing time, level progression)
  • Tiered achievement levels within categories
  • Automatic duplicate prevention
  • Toast notifications for new unlocks
  • Achievement showcase on profile

Daily Goals

  • Customizable time-based goals (5-30 minutes)
  • SVG-based circular progress indicator
  • Real-time progress tracking
  • Persistent goal configuration

🏆 Social Features

Leaderboards

  • Multiple ranking categories (Average WPM, Tests completed, Total typing time)
  • Time-based filtering (daily, weekly, monthly, all-time)
  • Top 50 rankings per category
  • User-specific performance details

User Profiles

  • Customizable profile pictures
  • Bio and nickname system
  • Achievement gallery display
  • Test history with pagination
  • Best performance by duration
  • Detailed statistics overview

🎨 Theme System

  • User-specific theme preferences
  • Server-side theme persistence
  • CSS variable-based implementation
  • Instant theme switching
  • Separate theme stylesheets for dark/light modes

Advanced Implementation Details

Real-Time Typing Engine

Sophisticated Input Handling

  • Character-by-character validation
  • Backspace correction support
  • Visual feedback system (color-coded letters)
  • Automatic text scrolling
  • Line-by-line progression tracking

Performance Calculations

  • Rolling 5-second WPM window
  • Timeline-based accuracy tracking
  • Per-character timing measurements
  • Mistyped letter frequency counting
  • Speed curve generation for charting

Data Architecture

Custom User Model

  • Email-based authentication (no username)
  • Profile customization fields
  • Level and XP tracking
  • Daily goal management
  • Theme preference storage
  • Calculated properties for performance metrics

Chart Visualization

  • Chart.js with ChartDataLabels plugin
  • Responsive chart sizing
  • Dual-axis configuration for history charts
  • Custom tooltip formatting
  • Dynamic data filtering by time period
  • Chart type toggling with saved preferences

Security Features

  • Login-required protection on all user-specific pages
  • CSRF token validation on forms
  • Secure password reset flow with email verification
  • Custom user manager for safe user creation
  • Server-side form validation and input sanitization

Project Status & Future Potential

✅ Completed Features

  • Full typing test implementation (timed and fixed-length)
  • Real-time performance metrics
  • Comprehensive analytics dashboard
  • Achievement and leveling system
  • Leaderboard functionality
  • User profile customization
  • Theme system
  • Password reset flow

⚠️ Known Limitations

  • No production deployment configuration
  • Missing comprehensive test coverage
  • Limited error handling in some edge cases
  • No admin content management interface for stories/articles
  • Email configuration requires external SMTP setup

🚀 Potential Enhancements

If development were to resume, priority features would include:

Practice Mode Improvements

  • Focused practice on weak letters
  • Custom text import
  • Typing drills for specific patterns

Social Features

  • Multiplayer typing races
  • Friend system and private leaderboards
  • Challenge sharing

Technical Improvements

  • PostgreSQL migration
  • Production deployment with Gunicorn/Nginx
  • Comprehensive test suite
  • API endpoints for mobile app potential

Development Journey

This project helped me learn a lot about Django's capabilities, particularly working with complex model relationships, signal-based logic for automatic user progression, frontend integration with interactive JavaScript features, and data visualization with Chart.js.

The typing engine itself required careful attention to edge cases and user experience details that weren't immediately obvious when I started building it. Creating real-time calculations for WPM, accuracy tracking, and performance metrics taught me valuable lessons about client-side performance optimization.

While I had to pause this project before getting it production-ready, it was a great learning experience in building a feature-complete web application with real-time interactions and comprehensive user analytics. The project demonstrates solid Django patterns, complex frontend interactions, and thorough attention to user experience.

Building a complete typing platform from scratch taught me the importance of planning data structures, handling edge cases in real-time interactions, and creating engaging user experiences through gamification.