How I Built a Real-time Typing App with Firebase and Vite.

Umair Ahmed Shaikh — Wed, 22 Oct 2025 10:04:12 +0000

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!

DEV Community: Umair Ahmed Shaikh

How I Built a Real-time Typing App with Firebase and Vite.