Skip to content

A responsive and interactive typing test application to measure Words Per Minute (WPM), Accuracy, and track progress over time.

Notifications You must be signed in to change notification settings

Manraj29/typing-test

Repository files navigation

Typing Test Application

A responsive and interactive typing test application to measure Words Per Minute (WPM), Accuracy, and track progress over time. The app is built using React.js, and includes a dynamic chart to visualize typing performance and exciting confetti animations to celebrate new high scores! 🚀


Features

  • Live WPM and Accuracy Tracking: Get real-time updates on your typing speed and accuracy.
  • Difficulty Levels: Choose from Easy, Medium, and Hard typing challenges.
  • Modes of Testing:
    • Time Mode: Type as much as you can within a set time limit.
    • Word Mode: Complete a given number of words as fast as possible.
  • Dynamic Graphs: Visualize performance with live graphs displaying WPM and accuracy trends.
  • High Score Tracking: Automatically stores high scores in localStorage and displays a celebratory confetti animation for new records.
  • Responsive Design: Fully functional across devices.
  • Confetti Animations: Celebrate your typing achievements with animated confetti effects.

Technologies Used

  • Frontend: React.js (Hooks, Context API)
  • Charts: Chart.js
  • Confetti Animations: react-canvas-confetti
  • Styling: Tailwind CSS, Custom CSS Modules
  • State Management: React useState, useEffect

Getting Started

Follow these instructions to get the project running locally on your machine.

Prerequisites

Ensure you have the following installed:

  • Node.js (v16+)
  • npm or yarn
  • A modern web browser

Installation

  1. Clone the Repository:
    git clone https://github.com/Manraj29/typing-test.git
    cd typing-test-app
    
  2. Install Dependencies:
    npm install
  3. Start the Development Server:
    npm run dev

    The app will run on http://localhost:5173.

  4. Build for Production (optional):
    npm run build
  5. Build for Deployment (optional):
    npm run deploy

Screenshots

Typing Interface

home page
navbar

Performance Chart

results
Checkout the website: https://manraj29.github.io/typing-test/

About

A responsive and interactive typing test application to measure Words Per Minute (WPM), Accuracy, and track progress over time.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published