Developing a web app from scratch can be time-consuming, especially for beginners. What if you could describe your idea and have a working prototype in minutes? In this blog post, I’ll share how I built Typometer – a simple typing test website – using AI-assisted tools. Typometer allows users to test their typing speed and accuracy by typing out random phrases. I leveraged Lovable.dev to scaffold the project, Cursor AI to enhance the code with natural language instructions, and deployed the final app on Netlify for everyone to use. We’ll go through each step of the process in detail, so you can see how these tools can supercharge your own web development workflow.
Project Overview
Typometer is a web application designed to challenge and measure your typing prowess. The app presents you with a random phrase or quote, and you have to type it as quickly and accurately as possible. Once you finish typing the phrase, Typometer calculates your words per minute (WPM) typing speed and your accuracy (percentage of correct characters), and displays your results. It’s a fun way to practice typing or just compete with yourself to improve your speed over time.
Figure: The initial Typometer welcome screen, showing the app title, a tagline, and a prominent "Start Typing" button. A random phrase is displayed in the test card (in this case a motivational quote by F.D. Roosevelt) with a progress bar at 0%. The interface has a clean, minimal design with a light background.
When you first open Typometer, you see a clean UI with the app’s logo and a short tagline “Measure your typing prowess.” Below that is a card containing a random phrase and a “Start Typing” button. At this point the test is in a “ready” state – the phrase is visible and the progress bar is empty (0%), waiting for you to begin. The overall interface is modern and minimalistic, built with a light theme (with an option to toggle dark mode via the moon icon at the top-right). In the background, you might notice subtle keywords like “Speed” and “Progress” in a faint text – these are purely decorative, adding a bit of character to the design without distracting from the main content. The goal of this overview is to familiarize you with what Typometer looks like and what it does, before we dive into how it was created.
Creating the Base Project with Lovable.dev
The journey of building Typometer began with Lovable.dev, an AI-powered app builder. Lovable.dev allows you to describe what you want to build in natural language, and it uses that description to generate the initial codebase for your project
lovable.dev
. This is incredibly useful for getting a head start, especially if you want a quick scaffold of your idea without manually setting up a project from scratch.
Step 1: Describe the project. I went to Lovable.dev and created a new project. In a prompt, I described my app idea in simple terms, something along the lines of: “I want to build a typing test website called Typometer. It should display a random phrase for the user to type, measure the time it takes for them to type it, and then show their typing speed (WPM) and accuracy. It should have a start button to begin the test and a way to restart for a new phrase. The design should be clean and modern.” This natural language description was all that Lovable needed to get started.
Step 2: Let Lovable.dev scaffold the app. After submitting the description, Lovable.dev’s AI went to work generating the first version of Typometer. Within moments, it produced a working project with a basic structure. Under the hood, it set up a React application (using Vite for the build tooling) and Tailwind CSS for styling. The initial app already included a main page that displayed a sample phrase, an input box for typing, and basic logic to track typed input. Essentially, Lovable gave me a functional starting point – the core HTML/JSX structure, some state management for the typing test, and default styles that I could later refine. This saved me from having to initialize a new React project, install dependencies, or set up build configurations; all of that boilerplate was handled automatically.
Step 3: Deploy to GitHub. One great feature of Lovable.dev is its GitHub integration. After reviewing the generated project in Lovable’s online editor, I used the “Deploy to GitHub” option to publish the code to a GitHub repository. Lovable.dev connects to your GitHub account and can create a new repo with your project’s code in it
docs.lovable.dev
. I simply authorized Lovable to access my GitHub, clicked a button to create the repository, and named it “typometer.” Within a few seconds, the entire codebase was pushed to GitHub. This meant I now had full version control over the project. From this point on, I could either continue making changes in Lovable’s editor or switch to working locally with my own tools by cloning the repository. I decided to take the code and move on to the next phase: enhancing the app’s features using Cursor AI on my development machine.
(At this stage, Typometer was basic but operational. I could open the app, see a phrase and an input field, type the phrase, and it would likely display a simple result or message when done. However, there were several features and polish points I wanted to add – for example, a live WPM calculation, an accuracy percentage, a nicer results display, and a progress bar. Instead of coding all those improvements by hand, I used an AI coding assistant to help, as described next.)
Enhancing the App with Cursor AI
With the project’s code now on GitHub, I cloned the repository and opened it in Cursor AI, which is an AI-powered code editor. Cursor is essentially like having an AI pair programmer integrated into your editor – it lets you write code using natural language instructions
cursor.com
. This means I could ask Cursor to make changes or add features to my code by simply typing what I wanted in plain English, and it would generate or modify the code accordingly.
Loading the project in Cursor. Cursor AI is a desktop code editor (available for Windows, macOS, Linux) that comes with AI capabilities. I opened the Typometer project folder in Cursor. The editor indexed the project, so it “knew” about all the files and code structure. What’s cool about Cursor is that it can understand context from your entire codebase, not just a single file, so it’s well-suited for making coordinated changes.
Giving instructions to Cursor. To enhance Typometer, I identified a few key improvements I wanted:
A start/stop mechanism with a proper timer (and perhaps limit the test to a certain duration or mark it complete when the phrase is finished).
A progress bar showing how much of the phrase has been typed.
Real-time WPM and accuracy calculation as the user types.
An improved results display that shows WPM, accuracy, time taken, etc., in a nice format (like a summary card) when the test is complete.
A restart button to reset the test with a new random phrase.
General UI styling enhancements to make it look more polished (spacing, font sizes, colors, etc.).
I approached these one by one, instructing Cursor in natural language. For example:
“Implement a timer that starts when the user begins typing and stops when they finish the phrase. Display the elapsed time.” – Cursor then generated code to start a timer (using setInterval or similar) when typing starts, and stop it when done, storing the time.
“Calculate WPM (words per minute) based on the number of characters typed and elapsed time, and show it on screen.” – I guided Cursor to add a function that updates the WPM every second while typing. The formula for WPM is typically (charactersTyped/5) / (minutes) (since 5 characters is roughly one “word”). The AI implemented this and I adjusted it to use the correct number of minutes (elapsed seconds / 60). We decided to display WPM rounded to the nearest whole number.
“Also calculate accuracy percentage. Track how many characters were typed correctly vs total, and display accuracy as a percentage.” – Cursor added logic to compare the user’s input with the target phrase in real time, count errors, and compute accuracy = (correctChars / totalChars) * 100. I made sure that case sensitivity and spacing were handled properly (so that mistakes are counted fairly).
“Add a progress bar that fills up as the user types the phrase.” – Because the phrase has a known length (say 100 characters), it’s straightforward to compute progress. Cursor helped integrate a progress bar component (we used a Radix UI Progress component for a nice look, since the Lovable scaffold had Radix UI library installed). I told Cursor to bind the progress value to the percentage of characters typed. After this, as I typed each letter, the progress bar (a thin blue line under the timer) would gradually fill from 0% to 100%.
“Create a results popup or card that appears when the test is complete, showing ‘Test Complete’ and the WPM, accuracy, time, and characters typed.” – The AI created a new component for the results display that includes all those stats. We styled it as a card overlay in the center of the screen. This card shows the final WPM, Accuracy, Time, and Characters typed (correct/incorrect/total). It also includes a “Try Again” button that, when clicked, resets the test state and fetches a new random phrase for the next round.
“Add a restart icon button that is visible during the test to restart early if needed.” – This placed a small Restart link or icon in the top-right of the test card (as seen in the UI) so that if a user wants to abandon the current test and start a new one, they can do so without finishing the phrase. Clicking restart clears the input, picks a new phrase, and resets the timer and stats.
“Tweak the styling: make the text larger, center the card, use a pleasing color scheme (maybe blue accents on a white background), and ensure it’s responsive on small screens.” – These final touches were handled by adjusting Tailwind CSS classes. For example, Cursor might add utility classes to spacing and font sizes, and I could also directly edit the Tailwind config if needed. The Lovable.dev base already gave a decent style, so only minor changes were needed, like making the heading text for “Test Complete” blue and bold, and giving the Start button a bright blue color.
One particularly impressive aspect of using Cursor was how it applied changes in context. For instance, when I asked to calculate WPM, it knew which state variables to create and where to display the result in the JSX. If the AI’s first attempt wasn’t exactly what I wanted, I could refine my instruction. For example, initially it showed WPM and accuracy only at the end, but I wanted them to update live as you type. I clarified: “Show the WPM and accuracy updating in real-time, perhaps in a small overlay or beneath the input field, even before the test is finished.” Cursor then adjusted the code to update these values every few seconds and display interim stats. (In the end, I decided it was cleaner to show the final stats on completion and maybe just keep an eye on the progress bar during typing, to avoid too much text on the screen while focusing on typing.)
Throughout this enhancement phase, the AI assistant handled a lot of the heavy lifting. I still reviewed the code it produced – making sure the logic was correct and efficient – but it saved me a ton of time writing boilerplate. It felt like pair-programming: I described what I needed and Cursor wrote the code, then I tested it out immediately. If something didn’t work as expected, I could ask Cursor to debug or fix it. This iterative loop was much faster than coding everything manually, and it was also a great learning experience (seeing how the AI implements certain features gave me insight into best practices).
After a few rounds of refinements, Typometer’s feature set was complete. Now the app had all the functionality I envisioned: start/stop control, random quote generation, a timer and progress indicator, live calculation of WPM and accuracy, error highlighting, a restart option, and a polished UI. Next, it was time to make the app available online.
Key Features of the Typometer App
Let’s recap and showcase the main features that Typometer offers, now that the development is done. This will give you a clear picture of what the final application can do:
Start and Stop Mechanism: Typometer features a controlled start – the test doesn’t begin until you hit the “Start Typing” button. This gives you a moment to prepare. Once you click start, the timer begins counting and you can start typing the given phrase. The test automatically stops when you’ve typed the entire phrase (or you can manually restart anytime). At stop, it locks in your results (time, WPM, accuracy) for review.
Random Phrase for Each Test: Every time you start (or restart) a test, the app fetches a new random phrase. These phrases are sourced from a preset collection of quotes and sentences, which keeps the experience fresh. You might get famous quotes, motivational sayings, or random sentences – the variety helps ensure you’re practicing with different words each time.
Live Timer and Progress Bar: As soon as you begin typing, a timer at the top of the test card shows the elapsed time in minutes and seconds. Right below it, a blue progress bar visually indicates how much of the phrase you’ve completed. For example, if you’re halfway through the text, the bar will be about 50% filled. This progress indicator provides a quick sense of how far you have to go, without having to count the remaining characters manually.
Real-time Typing Feedback (WPM & Accuracy): Typometer calculates your WPM (words per minute) on the fly, based on your input speed. Accuracy is also tracked in real time by comparing your typing to the target phrase. If you make a typo, the app knows it. (Internally, it increments an error count and accuracy percentage accordingly.) Although the live WPM/accuracy might not be prominently displayed to avoid distraction, the data is being collected so that once you finish, you get those metrics. This gives immediate feedback on your performance.
Error Highlighting: To help you identify mistakes as you type, the app highlights errors. For instance, if you type a wrong character, that character might be underlined or shown in a different color (e.g., red) in the text field. This way, you can correct your typo and continue, rather than only finding out at the end. It’s a subtle feature that improves the user experience for practicing accuracy.
Results Summary Display: After completing the phrase, Typometer shows a “Test Complete” summary card. This overlay pops up in the center of the screen, dimming out the rest of the UI. In this results card, you’ll see your final WPM, Accuracy, Time taken, and a breakdown of Characters (how many you typed correctly vs. total). There’s also a trophy icon and a friendly message to congratulate you on finishing. This summary lets you easily note your performance and decide if you want to try again to improve.
Figure: Typometer in action during a typing test. The timer (top-left of card) shows 00:32 elapsed, and the progress bar is about 14% (blue line under "Progress"). The random phrase is displayed, and the user’s input is shown in the textbox below. In this screenshot, an error is highlighted – see the red underline under the letter "t" where the user mistyped “to” as “To”. A restart button is visible on the top-right of the card, allowing the user to reset the test if needed.
While the test is running (as pictured above), the interface keeps you informed without being too distracting. The phrase you need to type is presented in a large, easy-to-read font. As you type in the input box, each character is checked: correct letters appear normally, while any incorrect letter gets a subtle red underline indicating a typo. The timer continues to tick up, and the progress bar steadily advances. If you feel you’re off to a bad start or want a new challenge, you can hit Restart at any time, which immediately resets the timer, picks a new phrase, and clears your input – effectively giving you a fresh start. Otherwise, you can continue until the phrase is fully typed.
Once you finish typing the phrase (or after a set duration, if we had a time limit mode, but in this version it’s phrase-completion based), the app calculates your final stats and displays the results.
Figure: The results screen in Typometer after completing a test. It shows a summary card with the label "Test Complete" and key results: 17 WPM and 99% Accuracy in this example. Below, it lists the time taken (1 minute 28 seconds) and the character count (122 correct out of 123, with 1 error). A blue "Try Again" button is provided to start a new test.
The screenshot above illustrates the Typometer results summary. Here, the user achieved 17 WPM with 99% accuracy. It took 1 minute and 28 seconds to type the phrase, which had 123 characters (the counter shows 122/1/123 for correct/incorrect/total characters). The Try Again button at the bottom of the card lets the user immediately begin a new round with a different phrase. The results card is designed to be visually clear: large numbers for WPM and Accuracy, since those are the headline stats, and supporting information (time and characters) beneath. The interface encourages users to retry and improve their stats, making Typometer a useful tool for practice.
From a design standpoint, Typometer’s UI remains clean and focused during the results display. The background still shows the faint motivational words (“Master”, “Skill”, “Fast”, etc. are lightly visible in the background of the app, not shown in the cropped image) and the main content is this centered result card. If you click Try Again, the results card disappears, a new random quote is loaded, and the app returns to the “ready” state to start typing.
Tech Stack Note: Typometer was built using React and TypeScript for the frontend logic, and Tailwind CSS (along with Radix UI components) for styling and layout. This means it’s a single-page application running entirely in the browser (no back-end server needed for the core functionality). The random phrases are currently hardcoded or included in the app bundle (one could expand it to fetch from an API or database, but for simplicity a local list is used). Because it’s a static frontend app, deploying it is straightforward – which is where Netlify comes in.
Deployment to Netlify
After building and testing Typometer locally, I wanted to deploy it so that others (or myself from any device) could use it via a web URL. Netlify is a perfect platform for this scenario – it allows developers to host static websites or front-end applications easily with continuous deployment from GitHub. Here’s how I deployed Typometer to Netlify:
Push Code to a GitHub Repository: We already had the code in a GitHub repo (kumarvnsh/typometer from the Lovable.dev step). I committed all the final changes (those implemented with Cursor AI) and made sure the repository was up to date with the latest code. This repository contains everything needed to build the app (including a package.json with dependencies and build scripts, as well as a netlify.toml configuration file specifying the build command and publish directory).
Log in to Netlify and Create a New Site from Git: On Netlify’s dashboard, I clicked “Add new site” and chose the option to import an existing project from Git. Netlify supports GitHub, GitLab, and Bitbucket – in my case I selected GitHub and authorized Netlify to access my GitHub account.
Select the Repository: After connecting GitHub, Netlify showed me a list of my repositories. I selected the typometer repository. Netlify then let me choose the branch (I used the default main branch) for deployment. This means Netlify will watch that branch for any new commits.
Configure Build Settings: Netlify usually auto-detects the build settings for common frameworks. Since Typometer is a React/Vite app, the default build command npm run build and publish directory dist were detected. (These were also explicitly set in the netlify.toml file in the repo, which Netlify reads – it specified to use npm run build and deploy the dist folder
github.com
.) I double-checked these settings on the deployment configuration screen and everything looked correct.
Deploy the Site: I clicked “Deploy” and Netlify’s servers started the build process. They pulled the latest code from GitHub, installed the dependencies, and ran the npm run build script which produced an optimized production-ready version of the app (the output is the static files in the dist folder). Once the build succeeded, Netlify automatically put the site live on a generated URL (something like typometer.netlify.app). In a matter of seconds, I could navigate to that URL and see Typometer live, functioning just as it did locally.
One of the huge advantages of using Netlify is that it sets up continuous deployment by default. This means any future changes I push to the GitHub repository will trigger Netlify to rebuild and update the live site. For example, if I later decide to add more phrases or tweak the UI, I just commit those changes and push to the main branch on GitHub – Netlify will detect the new commit, rebuild the app, and deploy the updated version automatically. This CI/CD pipeline ensures the live site is always in sync with my repository without any manual steps.
Additionally, Netlify provides handy features like preview deploys (for pull requests or branches), and you can set a custom domain if you have one. For now, I’m using the free Netlify-provided subdomain for Typometer, which is sufficient for a small project.
To summarize, deploying Typometer on Netlify was straightforward:
No need to manage servers – it’s serverless hosting for my static site.
Free tier handles it easily (small site with moderate traffic).
Automated builds from GitHub mean I don’t have to upload files manually on each update.
Netlify also takes care of things like SSL (HTTPS) by default, so the site is secure out of the box.
For beginners, Netlify is a great choice because it abstracts away the complexity of deployment. If you can push code to Git, you can deploy on Netlify with just a few clicks. The official Netlify docs and UI guides are very beginner-friendly if you need more detailed steps.
Challenges and AI-Powered Workflow
Building Typometer using AI-assisted tools was a refreshing experience, but it’s worth reflecting on some challenges and the general workflow:
Using Lovable.dev – benefits and lessons: Lovable.dev gave me an instant starting point for the project. This saved a lot of setup time and also provided some structure to follow. For a beginner, this is extremely valuable because the initial hurdle of choosing a tech stack and configuring it is handled by the AI. I basically described my app’s requirements, and got a skeleton that I could run and test right away. One challenge, however, is that the generated project might not exactly match your ideal architecture or may include extra boilerplate (for example, Lovable included a bunch of UI component dependencies like Radix UI, which I didn’t explicitly request but were useful). It’s important to read through the generated code to understand how it works. Treat it as if a colleague started the project for you – you’ll want to get familiar with it before diving into modifications. Overall, Lovable.dev greatly accelerated the start of Typometer, and its natural language prompt approach means you don’t have to be an expert to get something functional quickly.
Using Cursor AI – benefits and lessons: Cursor AI truly felt like pair programming with an experienced coder who works at lightning speed. By giving instructions in plain English, I could implement features that I wasn’t 100% sure how to code myself. For instance, I had a rough idea of how to calculate WPM or implement a progress bar, but having Cursor do it meant it wrote the necessary code (state hooks, effect hooks for timers, etc.) without me having to recall every detail from scratch. One challenge with AI coding tools is that sometimes the output isn’t perfect on the first try – maybe the logic is slightly off, or the placement of code needs adjustment. I encountered a scenario where the timer didn’t stop exactly when I wanted; I realized the AI had set it to a fixed 60-second interval whereas I wanted it to stop on phrase completion. To fix this, I clarified my instruction and the code was adjusted accordingly. This taught me that communicating clearly with the AI is key. Instead of a vague prompt, the more specific you are (e.g. “stop the timer when the inputText length equals the phrase length”), the better the results.
Another learning point was to always test after each major change. The AI can introduce bugs inadvertently, so running the app and trying to break it helped me ensure everything was solid. In one case, I noticed the accuracy percentage was slightly off; by testing, I found that the calculation was including an unfinished word as incorrect. I then guided Cursor to refine the accuracy logic to only count errors on fully typed characters and not penalize if you haven’t finished typing a word. These are the kind of fine details a developer needs to oversee – the AI helps with the heavy lifting, but you, as the developer, set the direction and polish the outcome.
Speed of development: With the combination of Lovable.dev and Cursor AI, the speed at which Typometer went from idea to deployed app was remarkable. Normally, a project like this might take a few days of coding and testing if done entirely by hand (especially if you’re a beginner figuring out each piece). Using these tools, I was able to get it done much faster – basically within a day, including learning to use the tools themselves. The AI-powered workflow removes a lot of the “grunt work” and lets you focus on the creative and logical aspects: what do you want the app to do, how should it look, what should the user experience be like. It’s almost like writing pseudocode or an outline of features, and having the AI convert that into actual code.
Challenges faced: Despite the positives, it wasn’t completely without hiccups. One challenge was ensuring that the randomly generated phrases wouldn’t break the layout (some quotes were long, so I had to ensure the text box could wrap text and the container would scroll if needed). I guided Cursor to add responsive design considerations. Another challenge was making sure the app works on different browsers – I quickly tested Typometer on Chrome, Firefox, and mobile Safari. One minor issue on mobile was focusing the input field when the test starts (virtual keyboard behavior), but that was resolved by adding a little script to focus the input on start, which Cursor helped with. All in all, every challenge that arose was manageable with either a quick fix or a tweak via the AI.
Why this AI-assisted approach is great for beginners: If you’re relatively new to web development, using tools like Lovable.dev and Cursor can accelerate your learning. You get to see best practices and patterns implemented in real-time. It’s like having a tutor who writes example code for you, which you can study and modify. Of course, it’s important not to become overly reliant – you should try to understand the code being generated. In my case, I made sure I knew how the WPM was being computed, how the state updates were triggered on each keystroke, etc. This added to my knowledge. The big win is that it lowers the barrier to turning your idea into a real project. Instead of being stuck on setup or syntax problems, you can progress and see results quickly, which is very motivating.
Workflow summary: The workflow I followed – idea → AI scaffold → AI enhance → deploy – proved to be a smooth pipeline. It combined the strengths of multiple tools:
Lovable.dev for quick initialization and project structure.
Cursor AI for iterative development and feature implementation through natural language.
GitHub for version control and integration with deployment.
Netlify for hosting and continuous deployment.
Each tool played a role in simplifying a part of the development cycle. This freed me to concentrate on the product (the Typometer app itself) rather than the process (the mundane setup, configuration, etc.). It’s somewhat analogous to how high-level programming languages abstract away machine code so you can focus on logic – here, AI abstractions handled boilerplate so I could focus on features.
GitHub Repo and Source Code
For those interested in the implementation details or who might want to contribute or fork the project, the source code for Typometer is publicly available on GitHub:
Repository: kumarvnsh/typometer
Hosted Website : Typometer
Feel free to browse the code to see how things are structured. The repository’s README provides an overview of how to run the project locally (simply clone it, install dependencies, and run npm run dev to start a local development server). The code is written in TypeScript and React. You’ll find components for the Typometer interface, such as the main typing test component, a component for the results modal, and utility functions for calculating WPM and accuracy. There’s also a list of phrases/quotes included which you can expand or modify.
If you’re new to reading code, don’t be intimidated – thanks to the AI assistance, the code is relatively clean and well-organized. I tried to add comments in key places (and the AI sometimes adds comments to explain its code as well). Checking out the repo could be educational if you want to see an example of an AI-generated project refined by a developer.
Conclusion
Building Typometer was an exciting experiment in using AI tools for web development. In the end, I was able to create a fully functional typing test app with a modern UI, without having to write every line of code by hand. This approach allowed me to iterate quickly and focus on the app’s functionality and user experience.
For aspiring developers or even experienced ones curious about AI-assisted coding, I highly encourage trying out this workflow:
Lovable.dev can kick-start your project with surprisingly little effort – just articulate your idea and see it materialize.
Cursor AI (or similar AI code editors) can then help you add features and make changes in a conversational way, almost like talking to a teammate who writes code for you. It’s a fast and fun way to develop.
Finally, deploying on platforms like Netlify is so straightforward that there’s no reason your project should stay only on your local machine. Getting it live means you can share it with others and get feedback.
Through this project, I learned that AI tools are not here to replace developers, but to empower us. They handle the repetitive and boilerplate tasks, while we provide direction, creativity, and critical thinking. The result is a shorter development cycle and often a better product, because you can rapidly prototype and refine ideas.
Typometer is now out there, ready to help anyone practice their typing. The process of building it taught me a lot about combining multiple services to achieve a goal. If you have an app idea in mind, why not give these tools a try? You might be amazed at how quickly you can bring your idea to life.
Thank you for reading! I hope this walkthrough of building Typometer was informative and inspires you to experiment with AI-assisted web development. Happy coding, and happy typing!
