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! 🚀
- 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.
- 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
Follow these instructions to get the project running locally on your machine.
Ensure you have the following installed:
- Node.js (v16+)
- npm or yarn
- A modern web browser
- 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
Checkout the website: https://manraj29.github.io/typing-test/