README.md

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

Performance Chart

---

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