I Built a Todoist Clone with AI in 10 minutes (Cursor + v0 + ChatGPT API)

I am sick and tired of paying for to-do list apps and you should be too let's build our own with Ai No coding at all no technical experience necessary with AI you no longer need to be paying for any software tools you can build them all your own even if you have zero programming experience by the end of this video you'll have your own to-do list app powered by AI where you can enter in any activity and the AI will break it down into tasks on top of that you'll be able to modify it any way you want even if you've never programed R the line of code before let's go we're

starting off with v0 is an AI tool that lets you build out any UI you want we're going to take the UI it builds and put it into a tool called cursor which will allow us to build the application we build the UI here we build the functionality out in cursor so what we're going to do here is tell vo I want to build a to-do list app powered by AI you should be able to enter and tasks into the to-do list app or be able to enter an entire activity and the AI will take that and break it down into individual tasks I'm just in plain English telling v0 exactly what I want to build out and it's going to spit out for me a UI that I can start adding functionality to all right let's build that out let's see what V Z's got for us I can help you create to-do list app Power by a that allows the users to enter in task man or input an activity all right so it's given us the code in a second we'll be able to see exactly what it looks like we're going to then take this UI put it into cursor so we can start building out functionality all this is free you can sign up for VZ for free you can download cursor for free it'll all be in here all right here we go look at this very nice very clean AI power to-do list app we can enter a task hit add or we can enter an activity and it'll break it down with AI I even like the little brain logo right there we're going to take this right now it's just a UI we're going to put it into cursor we're going to build out the functionality so before we do that let's move over to cursor this is cursor it's a free tool I'll put the link for it

down below this allows you to build out any application you want with AI even if you have no programming experience at all we're now going to put the UI into here so we can start adding the functionality I'll show you how to install that now if you're on Mac you hit control till day key that opens up your terminal here we type in BN X create next app space period you can just hit enter on all these default options if you have any issues doing this as you go along feel free to hit command K that opens up an AI window where you can say hey this command didn't work and it'll fix it for you and tell you exactly what you need to do so we got this installed the next thing we want to do is now install our UI that we just created with v0 so we're going to head back into v0 we're going to hit this button up here add to codebase we're going to copy this Command right there I open cursor again I come in here I paste in that command I hit enter we proceed I select all the kind of default options and boom if you look over here in Source components we have the UI we just buil out in v0 it's installed into our application all right so now what we're going to want to do is make sure this shows up in our application so we're going to go to our main file which is page. TSX we're going to get rid of everything in the return statement we're going to create a fragment we're going to autofill it to the AI to-do list uh component we just built boom there we go and then we got to import it so we click up here and then you can see it autocompletes in cursor so I can press tab there you can see it automatically imported the component into the file for us I hit save and now let's run this to run this we're going to go Bun space--

Bun Run Dev here we go it's running we command click on the link and let's see what we got boom there it is the UI is built out

for us what I just showed you here would take days for developers to do without AI we just did it with AI with no programming experience in just a couple minutes we still have more to do we need to do we need to build out the functionality let's this is just a this is just an empty UI there's nothing we can do here we have the AI now let put in the functionality using AI so I move that aside what I'm going to do in cursor is do command shift I this opens up the composer this is where we can start giving commands to the AI to build things out for us I think the first thing we want to do is just get the base to-do list app functionality right be able to put in a task hit add and it saves it we can even test things out here get coding done and hit add and it actually puts the task down there for us so it is it already has some of the functionality built out which is awesome so what we can do from here is let's add a little to-do list functionality first and then we're going to add in the AI components using the chat GPT in order to break down some of these activities for us so let's just add some of the basic to-do list functionality and we already have tasks being saved what if when we click it when it's done it actually does a completed on and gives us the date and time next to it so we know when we completed tasks so let's implement this base functionality first then we'll move into the chat GPT AI

functionality so we'll go into the composer okay so what we put in here is please make it so when I check off a task as complete it automatically puts the local date in time next to the task so we know when to complete it again in plain English just telling the AI exactly what I want to build out which is the completed task time all right so we're getting some basic functionality in here just to get our feet wet a little bit so as you can see here you can I just put it in plain English exactly what I wanted the AI to build out and it goes in and it writes all this code for us I didn't need to tell it write a single line of code myself so we hit the accept all button it implements the code we just created let's go back in here let's quickly refresh this let's add a new task Implement done date functionality let's add it let's complete it boom completed on this date and time we didn't write a single line of code we're adding to-do list functionality here we're making it all our own which really cool about this is completely custom you right you're using your own to-do list apps day in and day out I guarantee you thought I wish it had this feature this functionality now you can just build it yourself and you're doing it for free you didn't need to pay for this you're paying for your todoist and your things app you can just build this for free I'm saving you money and as a thank you for saving so much money please hit down below the like button subscribe if you want more tutorials like this all I do is build tutorials on creating apps with AI and let me know down the replies what other software you're paying for today that you'd like me to build out in my videos cuz I take all of this from the reply section of all my videos these are all user requested let's keep building out functionality let's add one more piece of functionality before we get into the AI components of this where the AI automatically builds out tasks let's make it so we can add categories to

every task so that when we implement the AI functionality you can also Implement AI generated categories as well so we come in here so here's what I put in I also want to be able to add categories whenever I add a task add another input that allows me to add categories to tasks when I save so I'm just telling it exactly what UI want to add on and the functionality behind it this will be cool when we add the Chad GPT functionality very shortly because then it'll actually be able to come up with categories for us when it's generating the tasks so let's accept all it writes all the code for us it implements it let's pull it over boom we have a new input uh okay so tasks we want to put in here Implement categories add a category uh basic functionality add task boom and it has the category right there too which is sick in a different color it looks nice right like I'm a terrible UI I'm not a good artist designer the AI is building this UI out for us really nicely I would 100% use this application in fact I'm probably going to use this application now instead of to do after this let's make sure it still has the done date functionality boom does still has completed this is sick now let's start adding the cool stuff the stuff you've been waiting for let's add some chat GPT

functionality in here let's make it so I can enter in something like create a to-do app and when I say breakdown activity it just generates a bunch of tasks for me so I don't even have to think about the tasks in my activities I think this is going to be really sick so we'll go in here we'll come back in here okay great I always try to be nice the AI okay great let's add some AI functionality I want to be able to enter in a full activity into the breakdown activity section when I hit the button it should send the activity to chat gpt's API and have it send back all the tasks for that activity those tasks are then placed in the task section so here's what we're doing we're asking the AI to implement AI functionality in our app I know a little meta right when we enter an activity it's going to send that activity to chat GPT Chad GPT is can to then generate a whole bunch of tasks for that activity and then place it back in automatically our task list so we don't have to think of tasks anymore we just put it in is whatever it is we're doing and then Chad GPT tells us what we have to do to complete that activity so let's see what it does here all right certainly I'll modify the code to integrate chat gpt's API for breaking down activities into tasks here's the updated version okay now we need to create an API route to handle the chat GPT call make sure you add in your open AI API key which I'll show you how to do in a second and we just need to also install open API which I will show you how to do as well so we copy that let's accept the changes let's go in here let's open a new terminal with the plus sign we paste in that command it's going to now install the open AI API lot of A's and I and letters there I know okay it's all installed now what we're going to need is an API key which we'll need in the env. Lo file so we're just going to need to create that file here so new file env. local hit enter okay now we're just going to take that line right there copy paste we got that in there now we're just going to need an open AI API key we can get one very easily for free I'll show you how to do that right now so if you go to platform. open. com and click sign up if you haven't already make sure you sign up here so I'm going to log in with Google I signed up there then you just got to put in some information about yourself now you know my birthday make sure to wish me a happy birthday in June

all right now we need to get our API key so we're going to click up here dashboard API Keys make sure to get verified and then from here you can set up your new key so let's create the secret key so what's going to pop up here is your API key your secret key make sure to copy this and save it for yourself you don't want to lose this I put it in like a notepad or something on Apple notes whatever it is make sure you don't lose this is what you're then going to put into cursor right here all right once you've paste that in make sure you hit save you're good to go now we can move on to the next step and start getting this API with chat GPT to work so that when we put in our activity the API in chat GPT will break down the activity by task which is going to be really cool let's get that implemented all right so I imp implemented the chat GPT API key I'm ready for the next step I hit enter on that great now that you implemented the Chad GPT key and set up the necessary components Let's test the function and make sure everything is working as expected here are the next steps first let's make sure the file is set up correctly all right looks like it's set up let's test it out let's see if we can get it working on the first shot here sometimes when you're doing a little bit more advanced functional like setting up the apis you got to go back and iterate a few times if it's broken we'll go back and iterate but let's see if it works on the first one I accept let's pull it over all right if

this works in the first try I'm going to be blown away I want to create a YouTube video Let's see break down that activity this will be something if it goes on the first shot I will be okay let's see what we got here promoted the video okay so it looks like it took looks like it listen it's doing better than I thought it would it uh it has a step in there my guess would be is that it actually worked but the way the UI setup it only puts in like the last step so let's say let's go back into the AI here and and debug

this I'm actually kind of glad it didn't work like this cuz now I can show you debugging and uh it's also not completely broken so let's debug this and this is what you're going to want to do anytime you're building out an app with AI and something doesn't work as expected you go back and you have a conversation with the AI kind of like it's your developer working for you okay so here's how I'm debugging it I went into the AI I'm saying hey looks like the API call worked but it's not getting formatted correctly in the UI it's only showing Step 11 my guess would be the UI is only adding the last task so basically just having a conversation the AI like it's my employee I hit enter and my bet is going to be the AI figures this out you're right it seems like the issue is how we're processing the tasks okay so my hunch was correct here right and I didn't need any technical knowledge for this I'm just telling it what I see and it's fixing it for me what's cool is we could even screenshotted it and put the screenshot in here in the I would have been able to decipher what it's looking at let's accept the changes I'm going to come back in here let's refresh this okay I want to film a YouTube video let's break down that activity okay so it looks like again we're only getting one of the tasks we we'll go back and fix this now share the on social media platforms or with your audience all right let's see what it was telling us to do in here okay so let's check out the console to see what logs we're getting here so we have the API response tasks okay so we're getting an array a task we are getting a task the API call is correct uh but as we suspected last time it's just not putting them all into individual tasks it's only giving us the last task so just as we thought let's tell the AI this all right so we're going to do this I told the AI check the logs all the tasks are coming through just as I just showed you um but they're just taking the last task and that's the only thing they're displaying so make sure to go through the array and display every item as an individual task I'll send that to the AI so we know the issue the AI put in the logs for us so we can see what's going on now it's just going to apologizes to me for the oversight I love when the AI apologizes to me makes me feel special makes me feel like I'm in charge gives me power over the AI before the AI Takes Over Me and has power over me in the next 10 years all right so it's going to add a new function where it adds multiple tasks it's going to handle it's writing all this code for us let's just accept it let's pull open here let's refresh let's say I want to film a YouTube video let's break down the

activity boom how cool is that we're going to do let's let's add to this I want to make this even cooler this is cool but I want the categories to be ai generated so right now it is just making them AI generated categories I want these categories to be more specific so let's go back in here let's let it know it worked I like letting the AI

worked it worked I like letting the AI know when it worked so it can train itself and knows what's working and it'll improve its recommendations in the future so it worked so here's what we're going to do next uh I say now let's make the categories AI generated with each task you get from the AI also give it a category that is relevant to the task so now we can get really cool categories for each task and then we can do some even cooler things on top of that I just thought of so let's send that to the AI it's going to update the API is what I'm guessing here so that it's getting categories from the API as well so let's modify the API up that's what I thought I was going to do so we get AI generated categories now let's update the to-do list component to hand the new structure so it's updating the code across multiple files which is really cool and let's accept that all right let's come back in here let's try out a new task here um let's do build let's get meta here build an app with cursor break down that activity all right here we go research cursor Library design user interface develop app functionality using cursor Library test app for bugs and then look at the category relevant to each one right research design de development testing deployment how sick is that and if I cross it off does it still have yep has a completed time and everything why would anyone on God's green earth pay for a to-do list app anymore I just built one this might be the best to-do list app on the market right now name another to-do list app that powered by AI like this is really cool because there's no other to-do list app where you can put in a highlevel activity and gives you recommended tasks you need to figure out all the tasks yourself here I can just think of whatever it is I want to do and it basically explains every task I need to do for me which is pretty incredible by the way before I show you the last thing which I think it's going to be pretty cool make sure to hit subscribe if you learned anything here hit like if you enjoyed the video and also go into the reply section let me know what other tools you're paying for so I can build those out too I take all my ideas from the reply section last thing I want to show you is how I do brainstorming after I build out a lot of my ideas I think it's going to be really helpful if you decide to go and build some of your ideas out too we'll go into Claud here and what I really

like to do in Claud after I build out an app is explain to Claud what I just built and ask for ideas for other ways I can improve it this will help us figure out more cool little features and functionality we can add to the to-do list app if you ever go and build out your own app always have Claud Side by claude's just my favorite AI model at the moment always make sure you have clawed to the side so you can ask about different features you can add on so what I'm going to do here is I said I just buil an AI power to-do list it breaks down activities I enter and tasks automatically what are other cool features I can add and it's going to help me brainstorm other features that other people might want that I could add into the to-do list app and at this point if you add on a couple new features you might have a full scale SAS application you can sell to people so let's see what else Claude wants to add here that's an interesting project uh let's consider an enhancing its functionality so prioritize and urgency detection okay so we can make some tasks higher priority time estimates smart scheduling automatically schedule task in your calendar that's interesting natural language productivity analytics okay so get analytics around which task you're finishing collaboration features would be cool Integrations with other tools yeah that would be cool to take these tasks and put it on my calendar I kind of like the idea of Doing Time estimates let's get AI generated time estimates on here too so I'm going to quickly go back in here right I want to

make it so that the AI also gives me time estimates next to each task and I'm just going to say hey Please add on time estimates generated from the AI and this is really should be your workflow when you're building out any app with AI is you know you're not only having the AI build out the app you also have a chat next to you that can give you recommendations as you're going that can tweak things along the way that could help you generate better ideas so you come out with the best app possible I would have never thought about the time estimates it just thought of that for me and now I'm going to have a way better tool I'm going to accept that let's pull it over here let's see what we got I want to film a YouTube video let's break down that activity let's see if it gives me time estimates now too yeah look at that okay so we get the tasks generated by AI we get the category generated by Ai and we get the time estimates generated by AI how sick is that and if I click finish I get the completed on then a specific date that's amazing so there's a bunch of other things you could do from here if you

wanted to make it so that these tasks save into next sessions so that when you go on your browser again they're still there you can Implement a database uh I'm going to do followup videos that show you how to implement databases but what we did here is just the front end if you want to implement that now you can just go into your AI and say Hey I want to implement a database uh let's can you walk me through doing that it'll walk you through it step by step it's really easy but again I'll show you how to set up a full stack app in the next video I hope you learned something here this is my basic workflow when building out any AI apps again let me know down below what apps you're paying for currently I want to build them out with AI and show you how to do it in my videos subscribe and turn on notifications check out these other videos I've built as well they'll show up somewhere on the screen and I'll see you in the next video