Tech stack: TypeScript, React, Vite, Python, FastAPI, GraphQL, PostgreSQL, Docker, Docker Compose, React Testing Library, Vitetest, Pytest, HTML, CSS, JSON
Gallery
Description
The idea behind this project was to build an application that analyses the user's typing patterns and presents them with words containing combinations of letters they struggle with—aiming to accelerate their improvement over time. To test this hypothesis, I created a typing interface using React with Vite on the frontend, and a backend now written in Python and FastAPI. The system tracks hits and misses on individual letters and letter combinations, storing the data in JSON format for later analysis. There's also a Python-based text generation service that dynamically provides personalised practice words based on the user's performance. Redis is used as a job queue to handle requests to the text generation service asynchronously, helping keep the app responsive.
To manage the project infrastructure, I’m using Docker and Docker Compose to containerise and orchestrate the various services. After collecting my own typing data by using the app, I wrote a Python script to extract and visualise the data using Matplotlib. While I initially put the project on hold due to similarities with another site I drew inspiration from, I've since resumed development, and the project is currently a work in progress.
One of the most rewarding aspects of building and using this app has been seeing measurable improvements in my own typing speed and accuracy. Thanks to the trend data and analytics built into the system, I can track progress over time in words per minute, accuracy percentages, and even detailed digraph and character-level performance. This level of feedback not only highlights areas where I can improve but also motivates me to keep practising, as I can literally see my progress visualised over time.
The live app is already available, and I am actively working to make it fully production-ready for new users. I’m excited to continue onboarding people to the app, gather feedback, and evolve it into a polished platform that helps others improve their typing skills just as it has helped me.
GitHub ReadMe
Typation
An adaptive typing program designed to improve speed and accuracy through personalised practice and analytics.
Overview
Typation analyses a user’s typing patterns and generates words and exercises targeting letters or digraphs they struggle with. The goal is to accelerate improvement over time by focusing practice on weak points while tracking measurable progress.
The frontend is built with React and Vite, providing a responsive typing interface. The backend is written in Python with FastAPI, handling user performance tracking and serving dynamically generated practice words. Typing data is stored in JSON, and Redis is used as a job queue to process text generation requests asynchronously, keeping the app fast and responsive.
Features
- Adaptive text generation based on user performance
- Real-time WPM and accuracy tracking
- Detailed analytics including digraph and character-level stats
- Data visualisation with trends over time
- Dockerised infrastructure for development and deployment
- API-first backend design with GraphQL support
Tech Stack
- Frontend: TypeScript, React, Vite, HTML, CSS
- Backend: Python, FastAPI, GraphQL, PostgreSQL
- Infrastructure: Docker, Docker Compose
- Testing: React Testing Library, Vitest, Pytest
- Other: JSON (data storage), Redis (job queue)
Development Highlights
- Built a Python-based text generator to provide personalised practice words
- Collected and visualised my own typing data using Matplotlib
- Iteratively improved the interface and backend to support live analytics
- Work in progress with continued improvements planned for production-ready deployment