https://github.com/manraj29/typing-test

A responsive and interactive typing test application to measure Words Per Minute (WPM), Accuracy, and track progress over time.
https://github.com/manraj29/typing-test

chartjs confetti gh-pages html-css-javascript reactjs typing-game typing-practice typingspeedtest

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/manraj29/typing-test
• Owner: Manraj29
• Created: 2024-12-03T20:04:46.000Z (6 months ago)
• Default Branch: master
• Last Pushed: 2024-12-03T20:55:59.000Z (6 months ago)
• Last Synced: 2025-01-31T07:31:46.224Z (4 months ago)
• Topics: chartjs, confetti, gh-pages, html-css-javascript, reactjs, typing-game, typing-practice, typingspeedtest
• Homepage: https://manraj29.github.io/typing-test/
• Size: 844 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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



  


Clone the Repository:

    
git clone https://github.com/Manraj29/typing-test.git

cd typing-test-app



  

  


Install Dependencies:

    
npm install

  

  


Start the Development Server:

    
npm run dev

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

  

  


Build for Production (optional):

    
npm run build

  

  


Build for Deployment (optional):

    
npm run deploy

  



Screenshots

Typing Interface









Performance Chart





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