⌨️ Typester

A sleek, minimalist, and responsive typing speed test application built for developers and keyboard enthusiasts.

---

Note

🌱 A Personal Note: One of My First Projects!

Typester holds a special place in my coding journey as one of my very first front-end web development projects! 🚀

Building this project was an incredible learning experience where I dove deep into:

• Managing complex real-time React state (handling keystroke events, millisecond-precision timers, requestAnimationFrame loops).
• Crafting dynamic UI elements like real-time character-following carets and responsive auto-scrolling containers.
• Implementing glassmorphism, multi-theme systems, and smooth animations using Framer Motion and Lenis.
• Working with persistent client-side storage via Cookies and LocalStorage.

---

✨ Features

• ⚡ Real-Time Live WPM & Accuracy Calculation: Dynamic speed updates calculated smoothly using requestAnimationFrame.
• 🎯 Multiple Test Modes:
  • Time-based: 15s, 30s, 60s, and 120s countdown challenges.
  • Word-based: 10, 25, 50, and 100 word sprint tests.
• 🎨 Multi-Theme Engine: Seamlessly switch between 5 curated themes:
  • 🌌 Slate Dark (Default sleek developer theme)
  • ☀️ Clean Light
  • 🧛 Dracula
  • 🤖 Cyberpunk
  • ❄️ Nord
• 📊 In-Depth Results & Analytics:
  • Net Words Per Minute (WPM)
  • Raw WPM (including uncorrected errors)
  • Accuracy percentage
  • Detailed keystroke breakdown: Correct / Incorrect / Extra / Missed
  • Total time elapsed
• 💾 Persistent Stats & History:
  • Tracks all-time Highest WPM, Average WPM, and Total Tests Completed.
  • Detailed history log of your past 50 tests stored locally.
• 🏎️ Precision Caret & Typing UX:
  • Smooth animated caret tracking current character position.
  • Smart backspace handling (allows correcting errors and navigating back to previous words with errors).
  • Extra character detection with visual alerts.
  • Quick restart test with the Tab key.
• 🌊 Fluid Glassmorphism & Smooth Scrolling: Glassmorphic UI with backdrop blur and smooth inertia scrolling powered by Lenis on the landing page.

---

🛠️ Tech Stack

Category	Technology
Framework / Library	React 19
Build Tool & Bundler	Vite 8
Routing	React Router DOM v7
Animations	Framer Motion
Smooth Scrolling	Lenis
Icons	Lucide React & React Icons
Styling	Vanilla CSS3 (Custom Glassmorphism, CSS Custom Properties & Theming)
Typography	Outfit (Sans-serif) & Fira Code (Monospace) via Google Fonts
Storage	js-cookie & Browser localStorage

---

📂 Project Structure

Typester/
├── public/                  # Static assets (favicons, SVG icons)
│   ├── favicon.svg
│   └── icons.svg
├── src/
│   ├── assets/              # Images and component media
│   │   └── hero.png
│   ├── components/          # Reusable UI components
│   │   ├── Header.jsx       # Navigation, theme toggle, stats trigger
│   │   ├── Results.jsx      # Post-test performance breakdown card
│   │   ├── SEO.jsx          # Dynamic canonical link injector
│   │   └── TypingArea.jsx   # Core interactive typing engine & caret logic
│   ├── pages/               # Application routes
│   │   ├── Home.jsx         # Landing page with feature introduction & Lenis scroll
│   │   └── Test.jsx         # Main typing test page & stats modal
│   ├── utils/               # Helper utilities & data
│   │   ├── storage.js       # Cookie & localStorage management (Stats, History, Prefs)
│   │   └── words.js         # Word bank & random word generator
│   ├── App.jsx              # Main router & app shell
│   ├── index.css            # Design tokens, themes, glassmorphic styles, keyframes
│   └── main.jsx             # React DOM entry point
├── index.html               # Main HTML entry
├── package.json             # Dependencies and build scripts
└── vite.config.js           # Vite configuration

---

🚀 Getting Started

Prerequisites

Ensure you have Node.js installed (version 18+ recommended) and npm (or yarn/pnpm).

Installation

1. Clone the repository:

   git clone https://github.com/your-username/typester.git
   cd typester

2. Install dependencies:

   npm install

3. Configure Environment Variables (Optional): Create a .env file in the root directory to customize personal links displayed on the home page:

   VITE_GITHUB_URL=https://github.com/your-username
   VITE_PORTFOLIO_URL=https://your-portfolio.com
   VITE_INSTAGRAM_URL=https://instagram.com/your-handle
   VITE_X_URL=https://x.com/your-handle
   VITE_MAIL_URL=mailto:your-email@example.com
   VITE_SITE_URL=https://typester.pranab.xyz

4. Start the development server:

   npm run dev

   Open http://localhost:5173 in your browser to start typing!

---

📜 Available Scripts

• npm run dev: Starts the local Vite development server with HMR.
• npm run build: Bundles production-optimized assets into the dist directory.
• npm run preview: Previews the production build locally.
• npm run lint: Runs ESLint across all .js and .jsx files.

---

🧠 How the Typing Engine Works

1. WPM Calculation Formula

$$\text{Gross WPM} = \frac{\text{All Typed Characters} / 5}{\text{Time in Minutes}}$$

$$\text{Net WPM} = \frac{\text{Correct Characters} / 5}{\text{Time in Minutes}}$$

$$\text{Accuracy (%)} = \left( \frac{\text{Correct Characters}}{\text{Total Characters Typed}} \right) \times 100$$

2. Smooth Animated Caret

The custom caret dynamically tracks the exact offsetLeft and offsetTop of the active letter element in the DOM, applying subtle cubic-bezier easing to slide naturally between characters.

3. Keystroke State Tracking

Each word is represented as an array of characters with individual statuses (untyped, correct, incorrect, or extra), enabling precise coloring, error highlighting, and backspace correction.

---

🤝 Contributing

Contributions, issues, and feature suggestions are always welcome! Feel free to check out the issues page if you want to contribute.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📝 License

Distributed under the MIT License. See LICENSE for more information.

_{Built with ❤️ as a first step into the world of web development.}