Inspiration
Typing is an essential skill for students, developers, writers, and professionals, but many typing platforms focus mainly on speed without providing a complete and engaging learning experience.
We wanted to build a platform that makes typing practice more interactive, competitive, and measurable. This led us to create TypeRacer, a typing practice platform where users can improve their typing speed and accuracy while tracking their performance.
What it does
TypeRacer is an interactive typing practice platform that allows users to test and improve their typing skills.
Users can:
- Take typing tests with different content
- Measure their Words Per Minute (WPM)
- Track typing accuracy
- Practice regularly to improve performance
- View their typing results and progress
- Compete with the challenge of improving their previous scores
The platform turns traditional typing practice into a more engaging experience by giving users measurable performance feedback.
How we built it
We built TypeRacer as a full-stack web application.
The project uses:
- Frontend: HTML, CSS and JavaScript
- Backend: Node.js
- Database: MySQL
- APIs: REST-based communication between the frontend and backend
- Authentication: User login and account management
- Performance tracking: Stores and processes typing-test results
We designed the system so that typing results can be stored and analyzed, allowing users to track their performance over time.
Challenges we ran into
One of the biggest challenges was accurately calculating typing performance while handling user input in real time.
We also faced challenges with:
- Calculating WPM accurately
- Measuring typing accuracy
- Handling real-time keyboard input
- Designing a reliable result-tracking system
- Connecting the frontend with the backend and MySQL database
- Implementing user authentication
- Converting and migrating database structures
- Debugging API and database integration issues
Building the complete system within the hackathon timeline required us to continuously test, debug, and improve the application.
Accomplishments that we're proud of
We are proud of building a complete typing platform rather than just a simple typing-test webpage.
Our major accomplishments include:
- Developed a complete full-stack typing platform
- Implemented real-time typing tests
- Added WPM and accuracy calculations
- Created user authentication and accounts
- Built persistent result tracking using MySQL
- Connected frontend, backend, and database successfully
- Created a platform that can be used for continuous typing practice
- Deployed the application and made it accessible online
The biggest achievement for us was transforming a simple idea—"practice typing faster"—into a complete working web application.
What we learned
TypeRacer helped us understand that even a seemingly simple application can involve many different engineering challenges.
Through this project, we learned:
- Full-stack web development
- Database design and management
- Backend API development
- User authentication
- Real-time input handling
- Performance calculation
- Debugging frontend-backend communication
- Database migration and integration
- Deployment and production debugging
We also learned the importance of testing the entire system together instead of treating the frontend, backend, and database as separate components.
What's next for TypeRacer
We want to turn TypeRacer into a more complete typing-learning and competitive platform.
Future improvements include:
- Real-time multiplayer typing races
- Global and friends leaderboards
- Daily typing challenges
- Personal performance analytics
- Typing history and progress graphs
- Difficulty-based typing tests
- Custom typing passages
- Achievements and badges
- Streaks and daily goals
- More languages and keyboard layouts
- AI-powered personalized typing exercises
- Mobile and tablet support
Our long-term vision is to make TypeRacer a platform where users don't just test their typing speed—they continuously improve it.
Built With
- authentication
- css
- digitalocean
- drizzle
- express.js
- gemini
- jwt
- node.js
- orm
- postgresql
- query
- react
- tailwind
- tanstack
- typescript
- vite
- wouter
- zod
Log in or sign up for Devpost to join the conversation.