Measure your WPM · Track your accuracy · Improve over time
| Dark Mode | Light Mode |
 |
 |
| Results Dashboard | Performance History |
 |
 |
|
|
|
|
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with App Router |
| React 19 | UI rendering with concurrent features |
| TypeScript 5 | Type-safe development |
| Tailwind CSS 4 | Utility-first styling |
| LocalStorage API | Persist settings, themes & test history |
- Node.js 18+ or Bun runtime
- npm, yarn, pnpm, or bun package manager
# Clone the repository
git clone https://github.com/your-username/own-type.git
cd own-type
# Install dependencies
npm install
# or
bun install
# Start the development server
npm run dev
# or
bun run devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Create optimized production build |
npm run start |
Serve the production build locally |
npm run lint |
Run ESLint for code quality checks |
npm run typecheck |
Run TypeScript compiler checks |
own-type/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout with font & providers
│ ├── page.tsx # Home page shell
│ ├── site-config.ts # SEO metadata & URL resolution
│ ├── manifest.ts # PWA web app manifest
│ ├── robots.ts # Search engine crawl rules
│ └── sitemap.ts # Auto-generated sitemap
│
├── components/ # React UI components
│ ├── TypingTest.tsx # Main orchestrator component
│ ├── WordDisplay.tsx # Word rendering with sliding cursor
│ ├── ModeSelector.tsx # Navbar with timer/mode controls
│ ├── Stats.tsx # Live WPM, accuracy & timer display
│ ├── ResultsDashboard.tsx # Post-test results with SVG chart
│ ├── HistoryModal.tsx # Performance history with trend graph
│ ├── VirtualKeyboard.tsx # Interactive on-screen keyboard
│ └── KeyboardSettingsModal.tsx # Theme & sound preferences
│
├── hooks/
│ └── useTypingEngine.ts # Core engine: timer, input, counters
│
├── context/
│ └── KeyboardSettingsContext.tsx # Persisted user preferences
│
├── utils/ # Pure utility functions
│ ├── wordGenerator.ts # Word pool with punctuation/caps/numbers
│ ├── statistics.ts # WPM & accuracy calculations
│ └── localStorage.ts # Type-safe storage helpers
│
├── types/ # Shared TypeScript interfaces
├── styles/ # Global CSS & Tailwind config
└── public/ # Static assets & favicons
The typing engine (useTypingEngine) is designed for zero-lag input handling:
- Incremental Counters — Character states update on every keystroke without re-measuring layout
- GPU-Accelerated Cursor — The caret is positioned via CSS transforms attached directly to the active character element
- Efficient Timer — The countdown publishes once per visible second, not on every frame
- Smart Overflow — Words scroll into view as you type, with the active word always visible
- 10-Character Error Cap — Extra wrong characters are limited to 10 per word, matching competitive typing test standards
Vercel auto-detects VERCEL_PROJECT_PRODUCTION_URL for canonical URLs, sitemap, and social metadata.
Set the NEXT_PUBLIC_SITE_URL environment variable:
NEXT_PUBLIC_SITE_URL=https://yourdomain.comOwnType respects your privacy:
- No accounts — no sign-up or login required
- No server calls — all test data stays in your browser
- LocalStorage only — typing history and preferences are stored locally
- No tracking — zero analytics or third-party scripts
Contributions are welcome! Here's how:
- 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
This project is licensed under the MIT License — see the LICENSE file for details.
Built for typists who care about speed
⭐ Star this repo if you found it useful!