A beautiful, feature-rich typing application built with React, TypeScript, and Tailwind CSS. Learn to type faster and more accurately with real-time feedback and interactive features.

• Difficulty Levels: Easy, Medium, and Hard word sets for progressive learning
• Customizable Word Count: Choose from 10, 25, 50, 100, or 200 words per test
• Dynamic Text Generation: Thousands of words across all difficulty levels

• Live WPM Tracking: Real-time words per minute calculation
• Accuracy Monitoring: Track your typing accuracy percentage
• Progress Visualization: Visual progress bar and completion statistics
• Session Summary: Detailed results after each test

• Finger Placement Guide: Color-coded keys showing which finger to use
• Touch Typing Support: Learn proper finger positioning
• Real-time Highlighting: Keys light up as you type
• Toggle Visibility: Show/hide keyboard as needed

• Sound Effects: Audio feedback for correct/incorrect keystrokes
• Volume Control: Adjustable volume slider
• Completion Sounds: Melodic feedback when tests are complete

• Theme Support: Light, Dark, and System theme modes
• Font Size Options: Small, Medium, and Large text sizes
• Visual Feedback: Green/red highlighting for correct/incorrect characters
• Responsive Design: Works seamlessly on all devices

• Modal Settings Panel: Clean, organized settings interface
• Live WPM Display: Toggle real-time WPM visibility
• Error Highlighting: Visual feedback for typing mistakes
• Browser Shortcuts: Preserved Cmd+R, F5, and other browser shortcuts

Try the application live at: https://xtype.pages.dev/

• Frontend: React 18+ with TypeScript
• Styling: Tailwind CSS 3.4+
• UI Components: shadcn/ui
• Build Tool: Vite
• Audio: Web Audio API
• Icons: Lucide React

1. Clone the repository

   git clone https://github.com/yourusername/typex.git
   cd typex

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Build for production

   npm run build

1. Start Typing: Click on the typing area or press any key to begin
2. Choose Settings: Click the Settings button to customize your experience
3. Select Difficulty: Choose Easy, Medium, or Hard based on your skill level
4. Set Word Count: Pick how many words you want to type (10-200)
5. Customize Display: Adjust theme, font size, and other preferences
6. Track Progress: Monitor your WPM and accuracy in real-time
7. Learn Proper Typing: Use the virtual keyboard to see finger placement

src/
├── components/          # React components
│   ├── SettingsPanel.tsx    # Settings modal
│   ├── StatsDisplay.tsx     # Statistics display
│   ├── TypingArea.tsx       # Main typing interface
│   └── VirtualKeyboard.tsx  # Interactive keyboard
├── hooks/               # Custom React hooks
│   └── useTypingEngine.ts   # Core typing logic
├── lib/                 # Utility functions
│   └── utils.ts             # Helper functions
├── types/               # TypeScript definitions
│   └── index.ts             # Type definitions
└── App.tsx              # Main application component

• Custom React hook managing all typing logic
• Real-time statistics calculation
• Character-level tracking and feedback
• Timer management and session control

• Comprehensive finger mapping for touch typing
• Color-coded keys for different fingers
• Real-time highlighting of current character
• Responsive design for all screen sizes

• Modal-based settings interface
• Organized into logical sections
• Real-time theme switching
• Persistent user preferences

• Web Audio API for sound generation
• Multiple sound types (correct, incorrect, complete)
• Volume control with smooth transitions
• Audio context management

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

• react - UI framework
• typescript - Type safety
• tailwindcss - Utility-first CSS
• @radix-ui/* - Accessible UI primitives
• lucide-react - Icon library

• Accessibility First: WCAG compliant with keyboard navigation
• Mobile Responsive: Works on all device sizes
• Performance Optimized: Fast loading and smooth animations
• User Experience: Intuitive interface with clear feedback
• Modern Standards: Latest React patterns and best practices

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

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

• Inspired by typing learning platforms like keybr.com
• Built with modern web technologies
• Icons by Lucide
• UI components by shadcn/ui

• Live Demo: https://xtype.pages.dev/
• LinkedIn: https://www.linkedin.com/in/kourouklidis/
• GitHub: https://github.com/kokoyroy

Happy Typing! 🎉

Built with ❤️ using React, TypeScript, and Tailwind CSS