Let's try to build a React to-do app using Cursor without writing a single line of code. I have a basic wheat React project ready for us with Tailwind CSS and Framer Motion installed. I'm going to open Cursor Composer and enter the prompt, add a to-do app to the project with a form and list below it. The form should have an input and a button to add a to-do item. The list should have to-do items that can be marked as done.
Also have the ability to edit and delete items in the list. Make use of Tailwind CSS for styling and Framer Motion for animations when adding and removing items. Cursor is going to take a minute to work its magic.
and we can see the changes in the project i'm going to save the changes and take a look at the browser i can see the to do app i can add a to do item create a to do app we can see a subtle animation when it is inserted into the list add another to do item use react tailwind and framer motion i can mark them as done and also delete them There is a subtle animation when the item is removed as well. Let's try to edit an item. So new item and I'm going to guess yes, double click it is. Now the item seems to update after each keystroke.
So let's go back to cursor and fix that. Back in cursor composer, I'm going to enter the prompt. When editing, it seems to save as soon as I type a letter. It should save after I press enter. Cursor will make the changes and we can click on save all.
Back in the browser, I can double click to edit the item and I can see that the item updates after I press enter. We have a fully functioning to-do app with great styling and subtle animations. Something that would have taken me an hour to build to cursor. three minutes.
I'm going to check the code to see what cursor did. It created a todo interface, created state variables for the list, input and item being edited, functions for adding, toggling, deleting and editing a list item. We see animate presence for the animations and rest of the JSX.
For this video I chose a todo app because it's the UI equivalent of the hello world program i am going to show you how to build plenty more apps with cursor in the future if you have a suggestion for what mini app to build next please leave a comment