- ✨ Features
- 🎯 Demo
- 🚀 Quick Start
- 🛠️ Tech Stack
- 📁 Project Structure
- ⚙️ Configuration
- 🎨 Customization
- 📊 Performance
- 🤝 Contributing
- 📝 License
- 👨💻 Author
- 🙏 Acknowledgments
| Feature | Description |
|---|---|
| Real-time Testing | Live WPM, CPM and accuracy tracking |
| Performance Analytics | Beautiful charts showing your progress |
| Dark/Light Theme | Eye-friendly themes for day and night |
| Responsive Design | Works seamlessly on all devices |
| Multiple Test Modes | Time-based, word-based, and custom modes |
| Diverse Content | Random words, sentences, paragraphs, and code |
| Sound Effects | Optional audio feedback for keystrokes |
| Local Storage | Your progress is saved automatically |
| History Tracking | Review your past test results |
| ⌨ Custom Text | Practice with your own content |
| Typography Options | Multiple fonts and sizes available |
| Performance Levels | From Beginner to Pro rankings |
Want to understand how this project works behind the scenes? Check out these detailed video explanations and posts 👇
-
▶️ YouTube Walkthrough https://youtu.be/LMQIfsonc6s?si=3o7vWJajz927g9Ob -
💼 LinkedIn Post (Project Breakdown) https://www.linkedin.com/posts/yasirawan4831_react-vite-webdevelopment-activity-7442596884650803202--8yL
-
✍️ Articles / Blogs
Dev.to https://dev.to/yasirawan4831/typing-master-web-app-react-vite-full-project-breakdown-bm6
CoderLegion https://coderlegion.com/13518/typing-master-web-app-react-vite-full-project-breakdown
# 1️⃣ Clone the repository
git clone https://github.com/YasirAwan4831/typing-master-react
# 2️⃣ Navigate to project directory
cd typing-master-react
# 3️⃣ Install dependencies
npm install
# 4️⃣ Start development server
npm run dev
# 5️⃣ Build for production
npm run build
# 6️⃣ Preview production build
npm run previewCreate a .env file in the root directory:
VITE_APP_NAME=TypeMasterPro
VITE_APP_VERSION=1.0.0
- React Hooks - State management
- Context API - Global state
- Web Audio API - Sound effects
- Canvas API - Performance charts
- Local Storage API - Data persistence
typing-master-react/
├─ 📂 public/ # Static assets
│ ├─ .htaccess # Apache configuration
│ ├─ favicon.ico # App icon
│ ├─ index.html # HTML template
│ ├─ manifest.json # PWA manifest
│ ├─ robots.txt # SEO crawler instructions
│ ├─ sitemap.xml # SEO sitemap
│
├─ 📂 src/ # Source code
│ ├─ 📂 components/ # React components
│ │ ├─ 📂 Chart/ # Performance chart
│ │ ├─ 📂 Common/ # Reusable components
│ │ │ ├─ 📂 Button/
│ │ │ ├─ 📂 Input/
│ │ │ └─ 📂 ToggleSwitch/
│ │ ├─ 📂 ControlPanel/ # Test configuration
│ │ ├─ 📂 Footer/ # App footer
│ │ ├─ 📂 History/ # Test history
│ │ ├─ 📂 Navbar/ # Navigation bar
│ │ ├─ 📂 ResultModal/ # Results display
│ │ └─ 📂 TypingArea/ # Main typing interface
│ │
│ ├─ 📂 context/ # React Context
│ │ ├─ HistoryContext.jsx # History state
│ │ ├─ SettingsContext.jsx # Settings state
│ │ └─ ThemeContext.jsx # Theme state
│ │
│ ├─ 📂 data/ # Static data
│ │ ├─ codeSnippets.js # Code samples
│ │ ├─ paragraphs.js # Practice paragraphs
│ │ ├─ sentences.js # Practice sentences
│ │ └─ words.js # Word list
│ │
│ ├─ 📂 hooks/ # Custom React hooks
│ │ ├─ useHistory.js # History management
│ │ ├─ useLocalStorage.js # Storage management
│ │ ├─ useSound.js # Sound effects
│ │ ├─ useTheme.js # Theme management
│ │ ├─ useTimer.js # Timer logic
│ │ └─ useTypingTest.js # Main test logic
│ │
│ ├─ 📂 styles/ # Global styles
│ │ ├─ animations.css # Animations
│ │ ├─ global.css # Global styles
│ │ └─ variables.css # CSS variables
│ │
│ ├─ 📂 utils/ # Utility functions
│ │ ├─ constants.js # App constants
│ │ ├─ helpers.js # Helper functions
│ │ ├─ soundEffects.js # Audio utilities
│ │ └─ textGenerator.js # Text generation
│ │
│ ├─ App.jsx # Main app component
│ ├─ App.module.css # App styles
│ ├─ index.css # Entry styles
│ └─ main.jsx # Entry point
│
├─ .gitignore # Git ignore rules
├─ package.json # Dependencies
├─ package-lock.json # Dependency lock
├─ README.md # Documentation
├─ LICENSE # MIT License
└─ vite.config.js # Vite configuration
Edit src/styles/variables.css to customize colors:
:root {
--primary: #2563eb; /* Primary color */
--accent: #10b981; /* Accent color */
--bg-primary: #f8fafc; /* Background */
--text-primary: #0f172a; /* Text color */
}Adjust in src/utils/constants.js:
export const TIME_OPTIONS = [30, 60, 120]; // Time modes (seconds)
export const WORD_COUNT_OPTIONS = [10, 25, 50, 100]; // Word modes
export const TYPING_STATS = {
CHARS_PER_WORD: 5,
MAX_HISTORY_SAVED: 50
};1. Add data to `src/data/` folder
2. Update `textGenerator.js`
3. Add option in `TextTypeSelector.jsx`
1. Define colors in `variables.css`
2. Add theme toggle logic in `ThemeContext.jsx`
3. Update theme switcher UI
1. Create translation files
2. Implement i18n support
3. Update text data with translations
| Metric | Score |
|---|---|
| Performance | 98/100 |
| Accessibility | 82/100 |
| Best Practices | 100/100 |
| SEO | 100/100 |
- ✅ Code splitting
- ✅ Lazy loading
- ✅ Image optimization
- ✅ Minification
- ✅ Gzip compression
- ✅ Browser caching
- ✅ PWA ready
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Follow the existing code style
- Write meaningful commit messages
- Add tests for new features
- Update documentation as needed
- Be respectful and constructive
This project is licensed under the MIT License - see the LICENSE file for details.
Made with by Muhammad Yasir