AI-powered development tools are revolutionizing how developers write and maintain code. In this hands-on tutorial, we’ll explore how to use Cursor AI Assistant to enhance a simple Todo list application with new features and improvements. Whether you’re new to AI coding assistants or looking to level up your development workflow, this guide will show you practical examples of using Cursor AI for iterative development, debugging, and feature implementation.
We’ll take an existing Todo list application and walk through adding new functionality like filtering, improving the UI layout, implementing a color theme, and fixing runtime errors - all with the help of Cursor AI. You’ll learn how to effectively prompt Cursor AI, review suggested changes, and validate the results. By the end, you’ll have a good understanding of how AI assistants like Cursor AI can accelerate your development process while maintaining code quality.
Getting Started
Sign up to Cursor AI, download, and install the app on Mac or Windows.
We will start with the Todo list app that I built in a previous article. The starter app was built using Bolt.new and is a fully functional Todo List app.
Check out the article: Exploring AI Assisted Development: Building a Feature Rich Web App With Bolt.new
Since I ran out of free credits on Bolt.new, I thought it would be a good idea to continue working on the Todo list app using another AI Assistant - Cursor AI.
Let’s dive in and create our new features.
To start with I made of copy of the Todo list app built using Bolt.new. Then, I added the new app folder into Cursor. Just to make sure everything is working, I ran the following commands in the terminal:
npm install
npm run dev
Then pointed the browser to localhost:3000 , and voila - we have the app running. I tested the app by adding a few tasks and categories, and everything seems to work fine. With this baseline we will start enhancing the app. If you want to follow along, please get the source code from the previous article linked above.
Enhancing the Todo list app
First let’s explore the feature of Cursor that allows a prompt to edit a file.
So, to get started I selected a portion of the code and hit [CMD + K] to let Cursor analyze the code and show me a prompt. In the prompt I wrote:
💬 Prompt: Put the Todo List and the “Stay organized and productive” items to the center of the screen. Move Manage Categories to the next line and right align it.
Cursor suggested the changes and showed a diff of the code as shown below.
The suggested change was made correctly and the preview below shows it in action.
I clicked “Accept”, to accept the suggested code changes.
🫴🏼 Takeaway: I like the intuitive and simple interface to prompt an edit, verify changes and accept them.
Feature: Change the color of a button
💬 Prompt: Change the Add Category button to the blue color in the theme.
At first, Cursor suggested to add a variant=”default” attribute assuming that it will use the primary blue color.
❌ But, that suggested change did not work. So, I told cursor that it did not work. So, a new change was suggested.
✅ And, this time the suggested change worked!
🫴🏼 Takeaway: Cursor will sometimes suggest code changes that will not work, but it can re-analyze the code and make new suggestions.
Feature: Add a color theme
I wanted to check if there is a color theme defined, so that the app can have a consistent look. I wanted to explore Cursor’s feature to chat with the code base.
💬 Prompt: Does the code base have a color theme defined?
Here is what Cursor chat responded with. Pretty easy to understand explanation, reasoning and gives me an action to perform.
I dragged the tailwind.config.ts and the globals.css files, and Cursor gave me a suggestion after analyzing these files.
✅ I accepted the changes and the app looks good.
🫴🏼 Takeaway: Cursor will ask for files that it can analyze to answer questions about your code. It will then suggest changes to your code.
Fixing Errors
❌ But, I noticed that when I refresh the “Manage Categories” screen, I get some errors.
Let’s fix these errors using Cursor’s help.
💬 Prompt: I am getting these errors on refreshing the Manage Categories screen.
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <div> in <div>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
Cursor gave a reasoning for the error and then suggested a fix outlining the changes that it is suggesting.
✅ After I accepted the changes, and the errors went away.
🫴🏼 Takeaway: Code changes and other suggestions may cause runtime errors. Always make sure to test the app with the latest code changes. Cursor can definitely help to analyze and fix those errors.
Feature: Add filter by category
💬 Prompt: Add a feature to filter by category. Add a dropdown for selecting categories and a label “Category”. It should be put next to the existing filters.
I asked Cursor to suggest the necessary code changes to the parent and other components. I dragged in the parent TodoApp.tsx file for it to analyze.
💬 Prompt: Make the necessary changes.
With the new filter for categories implemented, here is how it looks:
❌ I quickly realized that there was an issue. After the filtering by category feature was added, the existing todo items that I had added, vanished.
So, asked Cursor to investigate.
💬 Prompt: These changes are making the existing todo items that were added to vanish.
✅ On further testing, the issues were fixed and the existing todo items were not wiped off anymore.
🫴🏼 Takeaway: Thoroughly test your app for functional issues and/or regression bugs after code refactoring. Code changes can have unwanted consequences.
I could have kept going but I think I have demonstrated the power of iterative development for adding features, asking questions about the code, fixing errors and getting suggestions about the code base from Cursor.
I hope you found it useful. Download Cursor AI and try it out for yourself.
ℹ️ Check out the full source code for the Todo list app I enhanced using Cursor.
Conclusion
Overview
- The article demonstrates how to use Cursor AI Assistant to enhance a Todo list application with new features and improvements while maintaining code quality
- The project builds upon an existing Todo list app originally created with Bolt.new, now being enhanced with Cursor AI
Key Features Implemented
- UI improvements including centered layout and right-aligned category management
- Added color theming capabilities and button styling customization
- Implemented category filtering functionality with dropdown menu integration
Technical Insights
- Successfully resolved hydration errors that occurred during page refreshes
- Fixed data persistence issues that initially caused existing todo items to vanish after implementing filters
Key Takeaways
- Cursor AI provides an intuitive interface for code editing with real-time verification of changes
- While Cursor may occasionally suggest incorrect solutions, it can effectively reanalyze and provide better alternatives
- Test your app thoroughly for functional issues and/or regression bugs after code refactoring. Code changes can have unwanted consequences.
If you get a chance to try out Cursor AI or if you have questions or feedback, please let me know in the comments below.