Master Blind Typing — A modern typing trainer designed for developers.
- Real-time WPM & Accuracy — Live calculation without debounce lag
- Character-level Feedback — Green/red/gray with blinking cursor
- Backspace Support — Correct mistakes during sessions
- Dual Keyboard Layouts — Full QWERTY (EN) + ЙЦУКЕН (RU) with accurate mapping
- Finger Position Hints — Color-coded per finger with visual legend
- Text Mode — Curated text pools across 4 difficulty levels
- Code Mode — Real TypeScript/JavaScript code snippets
- Custom Text — Paste your own practice text via modal
- Sound Effects — Web Audio API synthesized keypress & completion sounds (toggleable)
- WPM Progress Charts — 7/30-day trend visualization via Recharts
- Key Accuracy Heatmap — Per-key accuracy analysis with weakest keys identification
- Session History — Persistent tracking stored in localStorage
- Matchmaking UI — Animated search → match → race → results flow
- Real-time Typing — Live WPM tracking during battles
- Opponent Progress Bars — Side-by-side race visualization
- XP System — Earn XP based on WPM, accuracy, and duration
- Level Progression — Auto level-up every 100 XP
- Achievements — 6 unlockable badges with spring animations
- Practice Streak — Track consecutive days of practice
- Dark/Light Theme — Toggle between themes with smooth spring animation
- OpenAI-Inspired UI — Minimalist dark theme with green accent (#10a37f)
- Framer Motion Animations — Page transitions, micro-interactions, gesture effects
- Lucide React Icons — Professional SVG icons throughout
- Confetti Celebration — Animated confetti on session completion
- localStorage — Sessions, stats, achievements, settings, and theme survive page refresh
- No Backend Required — Fully functional offline-first experience
# Clone the repository
git clone https://github.com/antontuzov/typeview.git
cd typeview
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildOpen http://localhost:5173 in your browser.
| Category | Technology |
|---|---|
| Framework | React 18 + TypeScript (strict) |
| Build Tool | Vite 5 |
| Styling | Tailwind CSS 3 + CSS Variables |
| Animations | Framer Motion |
| State Management | Zustand |
| Charts | Recharts |
| Routing | React Router v6 |
| Icons | Lucide React |
| Audio | Web Audio API |
src/
├── components/
│ ├── ui/ # Reusable design system components
│ │ ├── Button.tsx # 4 variants, loading state, motion
│ │ ├── Card.tsx # Default & glass variants
│ │ ├── Keyboard.tsx # Virtual keyboard (core UX)
│ │ ├── Confetti.tsx # Session completion celebration
│ │ ├── ThemeToggle.tsx # Dark/Light mode switcher
│ │ └── ... # Badge, Modal, ProgressBar, StatsCard, Tooltip
│ └── layouts/
│ └── Layout.tsx # App shell with sidebar navigation
├── pages/
│ ├── Landing.tsx # Marketing hero page with animations
│ ├── Dashboard.tsx # Stats, charts, achievements overview
│ ├── Practice.tsx # Core typing practice with all modes
│ ├── Battle.tsx # Multiplayer typing battle arena
│ └── Analytics.tsx # Detailed metrics & key analysis
├── store/
│ ├── useTypingStore.ts # Zustand typing session + localStorage
│ └── useUserStore.ts # User profile, stats, persistence
├── lib/
│ ├── typing/utils.ts # WPM, accuracy, error analysis
│ ├── analytics/ # Streak calc, mock data generators
│ ├── utils/
│ │ ├── helpers.ts # cn(), formatting, XP rewards
│ │ └── sounds.ts # Web Audio API typing sounds
│ └── constants/ # Keyboard layouts, practice texts
├── contexts/
│ └── ThemeContext.tsx # Dark/Light theme provider
├── types/ # Comprehensive TypeScript types
└── styles/
├── tokens.css # CSS custom properties (dark/light)
├── animations.css # 14 keyframe animations
└── global.css # Tailwind imports + base styles
- Navigate to Practice from the sidebar
- Select mode: Text, Code, or Custom
- Choose keyboard layout (EN/RU) and difficulty
- Start typing — use Backspace to correct mistakes
- View results after completion
- Click Find Match to search for opponents
- Once matched, click Start Battle
- Type the displayed text as fast as possible
- Watch opponent progress in real-time
- Results screen shows final rankings
- Use the toggle switch in the sidebar (desktop) or navbar (landing)
- Theme preference is saved in localStorage
# Run linter
npm run lint
# Format code
npm run format
# Run tests (when added)
npm run test
# Preview production build
npm run preview- Vite + React + TypeScript setup
- Tailwind CSS with design tokens
- Dark/Light theme switcher
- Core UI component library
- Routing with animated transitions
- Real-time WPM/accuracy calculation
- Character-level feedback
- Virtual keyboard with finger hints
- EN/RU keyboard layouts
- Backspace/correction support
- Sound effects (Web Audio API)
- Text mode (4 difficulty levels)
- Code mode (TypeScript snippets)
- Custom text input
- Session persistence (localStorage)
- Stats cards with animated counters
- WPM progress charts (Recharts)
- Key accuracy heatmap
- Weakest keys analysis
- User profile & XP system
- Achievement system
- Matchmaking UI flow
- Real-time battle typing
- Opponent progress simulation
- Battle results screen
- Confetti celebration on completion
- Framer Motion animations throughout
- Professional Lucide icons
- Responsive design
- Supabase authentication
- Real-time multiplayer via WebSockets
- Cloud session storage
- Global leaderboards
- Achievement sync across devices
- i18n support (EN/RU UI translation)
- Custom lesson builder
- CSV/PDF export for analytics
- Typing speed goals with progress rings
- Social profiles & friend system
- Daily challenges & timed events
- Mobile touch support
- PWA support for offline practice
Contributions are welcome! Please open an issue or submit a pull request.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
MIT — Built with ❤️ for developers who type.
- codewar.ru — Inspiration for the typing trainer concept
- OpenAI — Design aesthetic inspiration
- Framer Motion — Animation library
- Lucide Icons — Icon set
- Recharts — Chart components