About

Typifyy is a minimalistic and customizable typing test application. Inspired by Monkeytype, it focuses on simplicity and essential features to help you measure and improve your typing speed. The app features multiple test modes, real-time performance tracking, an account system to save your typing history, and user-configurable settings including sounds, custom thresholds, and visual feedback.

Built as a portfolio project to sharpen React 19 and TypeScript skills while creating something fun and useful, Typifyy attempts to provide a clean, focused typing experience with straightforward, real-time feedback on speed and accuracy.

Features

• Minimalistic design with a clean, distraction-free interface
• Type what you see, see what you type - real-time character validation
• Multiple test modes:
  • Time-based tests (15s, 30s, 60s)
  • Word-count tests (10, 25, 50 words)
• Real-time statistics:
  • Live WPM (Words Per Minute) tracking
  • Accuracy percentage
  • Consistency score
  • Detailed character breakdown
• Performance graphs - visualize your typing speed over time with Chart.js
• Account system:
  • Firebase authentication (Email/Password & Google Sign-in)
  • Save typing history automatically
  • Personal best tracking for each test mode
  • Activity heatmap visualization
  • Typing statistics overview
• Customizable settings:
  • Min speed/accuracy thresholds
  • Keyboard click sounds (NK Cream, Osu)
  • Error sounds (Blow, Slap, Whoosh)
  • Time warning alerts
  • Live progress display options
  • Caps Lock warning
• Smooth caret animation - absolute positioned caret with smooth transitions
• Keyboard shortcuts - Tab + Enter to restart test
• Responsive design - optimized for desktop, mobile-friendly message
• Self-hosted fonts - no external CDN dependencies for better performance

Bug Report or Feature Request

If you encounter a bug or have a feature request:

• Create an issue
• Start a discussion

Want to Contribute?

Contributions are welcome! Please read CONTRIBUTING.md to get started.

Tech Stack

• Frontend: React 19, TypeScript, Vite
• State Management: Zustand
• Styling: Tailwind CSS v4
• Backend: Firebase (Authentication, Firestore)
• Charts: Chart.js with react-chartjs-2
• Icons: React Icons
• Analytics: Vercel Analytics
• Deployment: Vercel

Local Development

1. Clone the repository:

git clone https://github.com/shivraj-roy/typifyy.git
cd typifyy

2. Install dependencies:

npm install

3. Create a .env file in the root directory and add your Firebase configuration:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

4. Start the development server:

npm run dev

5. Build for production:

npm run build

Credits

• Inspiration: Monkeytype for setting the bar for typing tests
• Word generation: random-words library
• Fonts: Roboto Mono, Space Mono, Satoshi (self-hosted)
• Sound effects: NK Cream, Osu click sounds, various error sounds
• Icons: React Icons library

Special thanks to the open-source community and everyone who provided feedback to make this project better.

License

This project is open source and available under the MIT License.

---

Made with ❤️ by Shivraj Roy

Designed to keep you in flow