Skip to content

02_Goals_Features.md

Latest commit

 

History

History
255 lines (196 loc) · 8.11 KB

02_Goals_Features.md

File metadata and controls

255 lines (196 loc) · 8.11 KB

DevKeys — Goals & Core Features

Goals & Success Measures

Goal How we measure it Status
Increase typing fluency with code ≥15% WPM improvement after 10 recorded sessions ✅ Tracking available
Maintain accuracy Average error rate ≤3% for users who finish a prompt ✅ Metrics collected
Keep the app snappy First load <2s, keystroke latency ≤50ms ✅ Achieved
Encourage language exploration ≥80% of users try more than one language 🎯 In progress
Sustain OSS momentum Weekly contributions/issues, 1k ⭐ within 12 months 🚀 Launching

✅ Implemented Features

Core Typing Experience

Real-Time Feedback

  • Character-by-character correctness highlighting (correct/incorrect/pending states)
  • Syntax-aware coloring via highlight.js with VS Code-compatible themes
  • Smooth animations powered by Framer Motion
  • Animated WPM, accuracy, completion, and elapsed time in the menu bar
  • Sub-50ms keystroke latency with Rust WASM engine

Editor Features

  • Auto-focus on page load for immediate typing
  • Tab key expands indentation to match prompt structure (no manual spaces)
  • Cmd/Ctrl + R restarts the current prompt instantly
  • Cmd/Ctrl + K opens the explorer sidebar
  • Invisible textarea overlay maintains native input behavior while displaying styled feedback
  • Cursor position syncing for Tab advance

Prompt & Language Management

Built-in Content

  • Curated algorithm prompts across multiple languages
  • File-based organization (e.g., rust/binary_search.rs, typescript/quicksort.ts)
  • Language-specific grouping with automatic extension mapping

Custom Prompts

  • Create, edit, and delete custom prompts via the explorer sidebar
  • Full schema support (id, language, snippet, optional metadata)
  • Persistent storage in IndexedDB
  • Seamless integration with built-in prompts

Explorer Sidebar

  • File tree-style organization by language
  • Visual distinction between built-in and custom prompts
  • Click to switch prompts instantly
  • Toast notifications for language/prompt changes

Visual Design

Desktop-Inspired UI

  • Draggable window with titlebar (double-click to recenter)
  • Minimize, maximize, and close controls
  • Fullscreen mode for distraction-free practice
  • Glassmorphic panel with animated glow effect

Background & Aesthetics

  • Monochrome grid backdrop (inspired by Midday.ai)
  • Layered radial blur gradients (top corners + bottom center)
  • Lowercase project header maintaining brand identity
  • Smooth transitions and micro-interactions throughout

Syntax Themes

  • Dark+ (VS Code default dark)
  • Light+ (VS Code default light)
  • GitHub Dark
  • GitHub Light
  • Monokai Pro
  • Instant theme switching via menu bar

Metrics & Analytics

Session Tracking

  • All metrics persist in IndexedDB (device-local only)
  • Per-session records include:
    • WPM (words per minute)
    • Accuracy percentage
    • Completion percentage
    • Elapsed time
    • Correct/incorrect character counts
    • Total keystrokes
    • Timestamp
    • Prompt metadata (language, id, preview)

Stats Panel

  • Collapsible bottom panel with live metrics
  • Stats tab: Detailed breakdown of current session
  • History tab: Last 8 sessions for the active prompt
  • Expandable session cards showing full statistics
  • Duration formatting (minutes and seconds)

Session History

  • Per-prompt tracking to measure improvement
  • Historical WPM, accuracy, and duration comparisons
  • Stored indefinitely until manually cleared
  • Browser devtools access for power users

Performance & Engine

Rust WASM Engine

  • Compiled from crates/engine via wasm-pack
  • High-performance diff calculation algorithm
  • Real-time feedback generation with token-level precision
  • TypeScript fallback for development without WASM build

Data Processing

  • Zero network requests after initial load
  • Diff evaluation happens client-side (<10ms)
  • Metrics calculated in real-time without blocking UI
  • Session writes to IndexedDB are async and non-blocking

Privacy & Offline

  • 100% local storage — No data leaves your device
  • No analytics or tracking — Not even anonymized
  • No external API calls — Fully offline after first load
  • No cookies — State managed via IndexedDB and localStorage
  • Audit-friendly — All code is open source

🚧 In Progress

Content Expansion

  • Additional prompt packs for Go, Ruby, Swift, Kotlin
  • Syntax-focused drills (loops, conditionals, error handling)
  • Interview preparation patterns (LeetCode-style)
  • Common framework idioms (React hooks, Rust lifetimes)

Analytics Enhancements

  • Export session history to CSV/JSON
  • Streak tracking with daily/weekly goals
  • Error heatmap visualization (most common mistake characters)
  • Progress charts showing WPM/accuracy over time
  • Per-language statistics dashboard

Accessibility & UX

  • Keyboard shortcut customization
  • Color-blind friendly theme variants
  • Screen reader support for stats panel
  • Alternative input methods (paste mode for benchmarking)
  • Prompt difficulty ratings

🗺️ Future Roadmap

Phase 2: Advanced Learning (Q2 2025)

Adaptive Practice

  • Weak point identification based on error patterns
  • Automatically generated drills targeting problem areas
  • Progressive difficulty adjustment
  • Spaced repetition for mistake reinforcement

Extended Modes

  • Syntax Mode: Focus on specific language constructs
  • Speed Mode: Timed challenges with leaderboards
  • Zen Mode: No metrics, just flow state practice
  • Interview Mode: Common coding interview patterns

Content Tools

  • CLI for validating prompt pack schemas
  • Community pack discovery (privacy-preserving)
  • Import/export custom prompt collections
  • Version control integration for team shared packs

Phase 3: Community & Intelligence (Q3-Q4 2025)

Privacy-Preserving Social

  • Opt-in anonymous leaderboards (no PII)
  • Community-submitted prompt packs with moderation
  • Pack ratings and reviews
  • Global statistics (aggregate, non-identifying)

Optional AI Assist

  • Generate prompts based on skill level (behind privacy proxy)
  • Code style suggestions after session completion
  • Personalized learning paths
  • Voice-controlled practice mode

Platform Expansion

  • Desktop app (Tauri) for offline-first experience
  • Mobile practice mode (simplified UI)
  • VS Code extension for in-editor practice
  • Terminal-based CLI trainer

📊 Technical Features

Developer Experience

Local Development

  • Hot module replacement (HMR) with Vite
  • TypeScript strict mode throughout
  • ESLint + Prettier for consistent code style
  • pnpm workspaces for monorepo management
  • Pre-commit hooks with lint-staged

Testing

  • Rust unit tests for engine logic
  • Vitest for frontend component testing
  • E2E testing framework prepared (future)
  • Snapshot testing for UI components

Build & Deploy

  • Optimized production builds (<500KB gzipped)
  • WASM bundle automatically copied to web assets
  • Source maps for debugging
  • GitHub Actions CI/CD ready

🎯 Non-Goals

To maintain focus and simplicity, DevKeys explicitly does not include:

  • ❌ Social features that compromise privacy (real names, photos, messaging)
  • ❌ Gamification that encourages unhealthy practice habits
  • ❌ Subscription models or paywalls
  • ❌ Third-party tracking or advertising
  • ❌ Server-side session storage
  • ❌ Competitive leaderboards with PII
  • ❌ Integration with closed-source services by default

🧩 Extension Points

DevKeys is designed to be extended without forking:

  1. Custom Prompts — Users can create unlimited local prompts
  2. Theme System — New syntax themes via config
  3. Pack Format — Standardized JSON schema for community packs
  4. Storage Adapters — IndexedDB can be swapped for other local stores
  5. Engine Swap — TypeScript/Rust evaluators are pluggable

🔗 Related Docs

Every feature serves the goal: help developers type code faster and more accurately.