Hi everyone! I'm a developer, and for my latest project, I built a minimalist typing test app called keydrift.com.
It was a great experience, and I wanted to share a few things I learned, especially about using Firebase and Vite together.
How I Built a Real-time Typing App with Firebase and Vite
The main goal was to create a clean, fast-loading typing test with a real-time leaderboard. I used:
Vite: For the super-fast front-end build.
Firebase Authentication: To handle user sign-ups and logins (including Google Sign-In).
Firestore: To store all the user results and power the "Arena" leaderboard.
One Cool Thing I Learned
The coolest part was building the leaderboard. When you finish a test, a JavaScript function saves your result (WPM, accuracy, etc.) to a Firestore collection called results.
Then, on the Arena page, I use a Firestore query to fetch the top 50 scores, sorted by WPM and then accuracy. Because it's Firebase, it's fast and updates in real-time.
Check it Out
It was a fun project, and I'm planning to add more features. If you're into typing or web dev, I'd love for you to check it out at https://www.keydrift.com and let me know what you think!
Top comments (0)