mlh-typing-metrics

Inspiration

We wanted to create a simple yet impactful typing speed test web app for learners, students, and anyone trying to improve their typing skills. Many apps are either too complex or lack live feedback. Our goal was to make an elegant, real-time typing experience.

What it does

The app allows users to test their typing speed in a distraction-free interface. It displays live word count, accuracy, and typing speed in WPM. At the end of the test, the result screen shows clear performance stats with recommendations.

How we built it

We built the app using Python (Flask) for the backend and HTML/CSS/JavaScript for the frontend. The app is lightweight and runs locally or can be deployed using platforms like Heroku or Render. We also used AI tools like ChatGPT to speed up code generation and brainstorm UI/UX ideas.

Challenges we ran into

Designing a clean UI that works on both desktop and mobile was challenging. Also, calculating typing metrics in real-time required handling edge cases (like backspaces, empty spaces, etc.).

Accomplishments that we're proud of

🧠 Completed our first full-stack web app using Flask, HTML, CSS, and JavaScript

⚙️ Successfully implemented live typing speed, word count, and accuracy tracking

🎨 Designed a clean and responsive UI that works across devices

🔐 Added a functional settings page and login UI mockup

🤖 Used AI (ChatGPT) responsibly to speed up development and learn new concepts

📽️ Created a demo video to explain the project clearly to the judges

💪 Submitted on time with a GitHub repo, README, and Devpost documentation

What we learned

We learned how to design and deploy a full-stack web app, work with Flask routes and templates, and improve the UX for real users. We also practiced how to document and showcase our work effectively.

What's next for mlh-typing-metrics

We plan to add login functionality, leaderboard integration, and daily typing challenges. Future versions may also include AI-generated typing prompts and theme customization.