A minimalist typing speed test application built with React. Practice your typing skills, track your WPM (Words Per Minute), and improve your accuracy.
- Real-time Statistics - Track your WPM, accuracy, typos, and elapsed time as you type
- Multiple Modes
- Time Mode - Focus on time elapsed while typing
- Words Mode - Track word count progress
- Zen Mode - Distraction-free typing experience
- Case Sensitivity Toggle - Enable/disable case-sensitive matching
- Results Dashboard - View your performance with an interactive WPM chart
- Responsive Design - Clean, dark-themed interface
- React 19 - UI library
- TypeScript - Type safety
- Vite - Build tool and dev server
- Tailwind CSS 4 - Styling
- Zustand - State management
- Recharts - Charts for results visualization
- Lucide React - Icons
- Clone the repository:
git clone https://github.com/nimone/keyshift.git
cd keyshift- Install dependencies:
# Using npm
npm install
# Using bun
bun install- Start the development server:
# Using npm
npm run dev
# Using bun
bun dev- Open your browser and navigate to
http://localhost:5173
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
- Click on the typing area to focus
- Start typing the displayed text
- The timer begins automatically when you type your first character
- Use the config bar at the top to:
- Switch between Time, Words, or Zen modes
- Toggle real-time stats display
- Enable/disable case sensitivity
- When you complete the text, view your results with WPM chart
- Click the reset button to try again with a new text
src/
├── components/
│ ├── ConfigBar.tsx # Mode and settings controls
│ ├── ResultDialog.tsx # Results popup with chart
│ ├── Stats.tsx # Real-time statistics display
│ └── TypingArea.tsx # Main typing interface
├── App.tsx # Main application component
├── data.ts # Practice text quotes
├── store.ts # Zustand state management
└── main.tsx # Application entry point
MIT