Velotype

• 

  Velotype

Velotype

Inspiration

Velotype was born out of a desire for a distraction‑free typing test that feels fast, modern, and actually useful for practice. Many typing sites are visually cluttered, overloaded with ads, or packed with options. I wanted something I would personally use every day, which is a clean, modern, and easy-to-use typing test. I also took a lot of inspiration from Monkeytype.

What it does

Velotype is a minimal typing practice web app. It lets you:

• Run timed typing tests with configurable durations and word counts.
• Toggle punctuation and numbers on or off to match your training style.
• See live feedback on your performance and a detailed results view at the end of each run (WPM, raw WPM, accuracy, basic consistency, and character stats).
• Store runs locally and browse your history to see how your speed and accuracy evolve.

How I built it

I built Velotype with React and Vite, using React Router for navigation.

• Frontend stack: React 19 with functional components bundled with Vite for fast local development.
• Routing and layout: React Router organizes the main pages (Home, About, History) under a proper layout.
• Styling and UI: Tailwind CSS powers the utility‑first styling, while shadcn/ui components (buttons, cards, dialogs, etc.) provide a consistent, accessible design system.
• Theming: A custom ThemeProvider and mode toggle handle light/dark themes, persisting the preference for a polished UX.
• Typing engine: The core logic lives in the Home page and utility modules, which generate word sequences, manage timers, track state, and compute per‑run statistics.
• Persistence: A small history helper writes and reads from local storage so stats survive page reloads.

Challenges I ran into

• Balancing simplicity with features: It was tempting to add every feature from larger typing sites. The challenge was deciding what to keep (timers, word counts, word lists, history) and what to postpone so the app remained fast and minimal.
• Accurate, reliable stats: Getting WPM, raw WPM, accuracy, and a notion of consistency to feel correct required careful handling of time, character counts, and edge cases (like very short tests or empty input).
• State and performance management: The app updates stats every second while the timer runs. Managing this in React without unnecessary re‑renders, while keeping the UI smooth, required thoughtful use of refs, memoized callbacks, and derived state.
• Word list loading: Loading language/word list JSON files in a way that feels instant but still handles errors gracefully was another challenge, especially when switching languages mid‑session.

Accomplishments that I’m proud of

• A clean, focused UI that removes friction and makes it easy to just start typing.
• A stats dashboard that goes beyond a single WPM number and helps visualize consistency and accuracy.
• A flexible configuration panel for time, word count, languages, and character sets that still feels approachable.
• A small, understandable codebase that is easy to extend with new features or word lists.
• No ads and a modern design.

What I learned

• How to structure a React + Vite project with clear separation between pages, layout, components, and utility logic.
• Practical patterns for handling timers, refs, and user input in React without degrading performance.
• How to use Tailwind and shadcn/ui together to build a consistent, responsive interface quickly.
• How to implement recharts.
• The importance of measuring the right things (e.g., consistency over time, not just peak WPM) when building tools for practice and learning.

What’s next for Velotype

• Rankings: Make rankings for users to have a leaderboard.
• Custom tests: Allowing users to paste custom text, build their own word lists, or focus on specific difficulty tiers.
• Profiles and sync: Optional accounts or cloud sync so progress can be tracked across devices.
• Accessibility and localization: Better keyboard navigation, improved screen‑reader support, and more language packs.

Overall, Velotype is the foundation for a modern, focused typing trainer that I can keep iterating on as I learn more about both front‑end development and effective practice.

Built With

• react
• shadcn
• tailwindcss
• vite