Skip to content

Burkifa23/Syntaxed

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

81 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Syntaxed

Syntaxed v.0.3 - Professional Code Typing Trainer

Master your coding speed with our professional typing trainer. Practice with 25+ programming languages, track your progress, and improve your development efficiency.

Live Demo GitHub Stars License


✨ Features

🎯 Professional Typing Interface

  • Monaco Editor integration - Industry-standard code editor with syntax highlighting
  • 25+ programming languages supported with authentic code snippets
  • Multiple topics per language (Variables, Control Flow, Functions, and more)
  • Real-time syntax highlighting for each programming language
  • Desktop Version Built in Tauri Also on GitHub syntaxed-desktop

πŸ“Š Advanced Performance Metrics

  • Words Per Minute (WPM) calculation with precision timing
  • Real-time accuracy tracking with error detection
  • Error count monitoring with visual feedback
  • Time elapsed display with millisecond accuracy
  • Live metrics updates every 100ms for smooth performance

πŸ† Comprehensive Statistics System

  • Personal best tracking for each language and topic
  • Completion history with timestamps and attempt counts
  • Global statistics across all languages and sessions
  • Persistent data storage using localStorage
  • Detailed performance analytics with exportable stats modal

🎨 Modern UI/UX Design

  • Dark/Light mode toggle with smooth transitions
  • Fully responsive design - works perfectly on mobile, tablet, and desktop
  • Touch-friendly interface with optimized button sizes
  • Accessible design - WCAG 2.1 compliant with screen reader support
  • High contrast mode support for visually impaired users

⌨️ Power User Features

  • Keyboard shortcuts for all major functions:
    • Alt + Q: Stop test
    • Alt + R: Reset test
    • Alt + B: Enable dark mode
    • Alt + W: Enable light mode
    • Alt + S: View statistics
  • Icon-only mode for ultra-small screens (under 360px)
  • Automatic test detection - starts on first keystroke
  • Completion celebration with personal best comparison

πŸ›‘οΈ Professional Quality

  • Error handling with graceful degradation
  • Performance optimized with debounced updates
  • SEO optimized with complete meta tags and structured data
  • Social media ready with Open Graph and Twitter Card support
  • Cross-browser compatible with modern web standards

πŸš€ Quick Start

  1. Visit the live demo: burkifa23.github.io/Syntaxed
  2. Select your language from the dropdown (25+ options available)
  3. Choose a topic (Start, Variables, Control Flow, Functions)
  4. Start typing when you see the code snippet
  5. Track your progress with real-time metrics
  6. View your stats to see personal bests and improvement over time

πŸ’» Supported Languages

Bash C Clojure C++ C# Dart Elixir Erlang Fortran Go Haskell Java JavaScript Julia Kotlin Lua PHP Python R Rust Scala solidity Swift TypeScript Zig

Plus Additional Languages:

  • βœ… ASSEMBLY X86-64 LINUX NASM
  • βœ… COBOL - Legacy systems programming
  • βœ… MOKOTO ICP Programming Language
  • βœ… And more coming soon!

πŸ› οΈ Tech Stack

Built with modern web technologies for optimal performance:

HTML5 CSS3 JavaScript

Key Technologies:

  • HTML5 - Semantic markup with ARIA accessibility
  • CSS3 - Modern responsive design with advanced features
  • Vanilla JavaScript - High-performance ES6+ code
  • Monaco Editor - Professional code editor (VS Code engine)
  • LocalStorage API - Persistent statistics and user data

🎯 Why Syntaxed?

For Developers:

  • Improve coding speed with real code snippets
  • Learn new languages through typing practice
  • Track your progress with detailed analytics
  • Practice anywhere - fully responsive design

For Educators:

  • Engage students with interactive typing practice
  • Support multiple languages in one platform
  • Monitor progress with built-in statistics
  • Accessible design for inclusive learning

For Companies:

  • Train new developers on coding efficiency
  • Standardize typing skills across teams
  • Improve code review speed through familiarity
  • Professional-grade tool ready for enterprise use

πŸ† Recognition

Syntaxed demonstrates enterprise-level web development practices:

  • βœ… WCAG 2.1 AA Compliant - Full accessibility support
  • βœ… SEO Optimized - Complete meta tags and structured data
  • βœ… Performance Optimized - 60fps animations and efficient updates
  • βœ… Cross-browser Compatible - Works on all modern browsers
  • βœ… Mobile-first Design - Perfect experience on any device

πŸ‘₯ Contributing

We welcome contributions! Whether it's:

  • πŸ› Bug reports and fixes
  • ✨ New language support
  • πŸ“ Documentation improvements
  • 🎨 UI/UX enhancements

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.


πŸ™ Acknowledgments

  • Monaco Editor Team - For the incredible code editor
  • DevIcons - For the beautiful programming language icons
  • Web Accessibility Initiative - For accessibility guidelines
  • The Developer Community - For inspiration and feedback

Built with ❀️ by Burkifa23 & Programmer-233

⭐ Star us on GitHub if you find this useful!

GitHub Live Demo