I Built A Notion Clone With AI in 10 Minutes (Cursor + v0 + no-code)

I am determined to rebuild every tool I pay for right now with AI so I don't have to pay for any more tools what I'm going to do in this video is I'm just going to build notion I pay like $10 a month for the Pro Plan and notion I'm just going to build notion through AI we're going to use v0 to build out the UI and I'm going to use cursor to build out the actual application then when I'm done this I'm going to unsubscribe from notion and just use my homemade tool hey if you're paying for it too you can do the same thing as me and it's fun building your own tool let's go so this is v0 for those who don't know it this

is an amazing AI tool that will help you build your own UI so I'm going to go in here the free plan's good enough you can come in here and tell the AI exactly what type of UI you want to build I want to build a notion like app it should have an editor that takes up most of the screen but has a Le hand side bar that shows my note taking structure I want to do this in nextjs and typescript all right let's go it's going to build it out so it's building out the UI for us for our notion clone all I had to do is enter one prompt I'm going to get the UI here then I'm going to be able to take this UI put it into cursor and start building out the functionality here we go looks like a pretty good simple UI I like the way it looks okay we can have our notes in different folder struct structures I like it what we're going to do is we're going to take this we're going to start building out some of the notion type functionality that we can do tables can band boards notes lot of other different things we're going to build that functionality cursor but first thing we're going to do is take this code over and bring it into cursor so now we're going to build out our notion clone in cursor this is cursor best AI programming tool on the planet you don't need to write a line of code you can build Out full applications what we're going to do is come in here and build out our next JS application next is just the JavaScript framework that's going to be the tech techology

behind our app again if you do everything with AI you'll be fine just follow along with me we're going to do bun X create NE app period if at any point you get stuck here and any of these commands don't work I'm putting all the commands down below you can easily just come in and do command K and then ask the AI how to proceed if you know an install doesn't work to say hey this install doesn't work and the AI will tell you how to do it if at any point you get stuck so we have the nextjs application built out now we're going to install this component that we just built out in v0 so we're back in v0 here what we're going to do is we're going to click on add to codebase up here copy this command prompt come back into cursor and paste it in and then we will

proceed and this is going to install our component straight from v0 into cursor so what you can see here is under components our new component was installed right there automatically through that command so I'm going to do npm run Dev to run this application this has started running you can see it here so this is the boilerplate nextjs code but I want to now put in here the component we just installed so let's do this I'm going to go into page. TSX here so let's delete everything from the return we got that now we're going to do is we're going to create a fragment just follow along with this so then as you can see here it autocompletes the notion clone components are putting in our new component there we go we accept the import here save that so I pull this in here and you can see we have our application the styling's a little off the colors instead of being black are gray so we're going to fix that first and then we're going to implement the functionality so everything you can do in notion from taking notes to adding spreadsheets to doing tables all of that we're going to implement that first but let's fix this dying a little bit so we can see this better what we can do is we can open up the AI chat panel on the right hand side

here we say the styling of everything in here is gray can we make it so the text and elements are black and keep the existing white background so let's fix the styling a little bit here it's going and it's modifying the entire component to make it a little bit easier to see right everything's kind of light gray which is hard to see let's accept this let's apply it accept I save it with command S I pull this back over boom easy to see now we got our entire component this is a test note let's see if we can save it can't save any notes yet so we're going to start implementing the functionality now we fixed the stying a little bit I think what we want to do is first we want to make it so we can save these notes then I want to go in and be able to create different types of notes right you click on a note it pulls it open here uh in notion it's very powerful because you can create tables you can create can band boards you can create notes we're going to create all those different styles of notes in here too and by the end of this we're not going to need to be paying for notion anymore we're going to have our own notion right here I think the first thing we're going to want to implement is adding new folders so being able to have multiple folders here so let's do this let's open up our composer and right before we implement this functionality make sure to subscribe for way more videos about building cool stuff with AI and also hit like and let me know in the reply what other tools you're currently paying for so I can build them out I want to be able to add

new folders to the right hand side under notes I also want to be able to add folders inside of folders I think the best way to do this is adding a add folder button at the bottom of the leftand nav bar and when you click it adds a folder to whatever is highlighted if nothing is highlighted it adds a folder to the root so my plan here is this I'm asking it to add a add folder button down here and then depending on what is highlighted it adds a folder under that so if you have work highlighted and you say add folder it adds an inside if nothing is highlighted it adds a folder to the rout so let's hit enter on that prompt and the AI is going to start figuring out how to build that out it's going to start creating the code so I go here it's adding all this code for us it explains the implementation so it's adding a new input field at the bottom for the sidebar for adding folders the add new folder button function creates a new folder and adds it either to the root or inside selected folder and we can just accept that I pull this over boom there we go okay so I want to say uh root folder I can click add folder and there it is it's right in the root that's awesome so we have the folder now let's say can we highlight personal and say test folder one okay so we need to get the ability to highlight folders let's go back toi excellent that worked well I like to give positive feedback to AI so they can train itself to know it's doing the right thing now I just need to be able to highlight a folder when I click it so that when I add folders it can add it nested all right so we're doing a follow-up prompt here sure let's modify the code to highlight the folders when selected and ensure new folders are added to the selected folder here are the changes we need to make glorious it's setting that up for us we accept it I pull this over let's see okay so now I can select yep here and let's call this folder under personal add that boom goes under there okay so it's the styling is a little off when it's a long one but that's fine for now all right now we want to be able to add notes maybe what we do is we add an add note uh add note button under add folder so whatever is highlighted could also add the note now I want to be able to add notes

add a note button under the ad folder button now whatever is highlighted adds a new note under there all right so it should be pretty simple again what's really key here when you're building this ad is you do it small step by small step right you don't want to just do it all at once type in build me a notion app and then it does it all at once it's probably not going to work out well and be to your liking but if you do it step by step like I'm doing add this button add this functionality it's going to turn out really well and you're not going to run into many issues all right so here's where the change are going to make uh they renamed uh add they renamed new folder to add new item we've created new add new item function it's basically writing the piping the code behind it that's going to make this easy for us to do let's accept it and now when I pull this over look at that we have a nice New add note button let's click on personal add note oh we got to give it a name uh Note One Let's test this there it is Boom okay uh now I want to make it okay that's awesome all right so now we got to make it let's connect the editor here to the note we have open so let's do this we're going to make it so that when you click on a note it opens that note in the editor now let's make the editor work

when I click a note make it so it opens up in the editor which is the main area then when I type into that so we're going to make it when I click a note it opens that note up in the main area and then what I'm going to do right after this is make it so I can click a save button so let's do that now let's make the editor work so it's going to build out the code for us again I'm doing this step by step right we're doing it step by step to ensure that this works out the way we want it to work out we don't run into as many bugs it's also just good for us cuz we're learning as we go if we do this step by step we can see every step it takes and learn how it's doing the coding so here's what we're doing we updated the note item to include an optional content field for storing the notes content we've added an active note okay so we accept that here we go shopping list is list is open let's see what happens if I open Journal open okay now we need to be able to edit it so it's opening oh here we go so we got the editor this is the journal note all right boom it Autos saves it too that's awesome so we don't even need to add saving functional I just automatically had travel plans uh travel to Spain by the way beautiful country travel to Portugal highly recommend Porto in Portugal travel to New York City to come isn't me there we go so let's see if that saves automatically saves that's awesome okay so now we got the note functionality in there now let's make it so when you add a new note you get a few different options the type of note you can make it right that's what's kind of cool about notion is you can make tables can band boards regular notes you have a lot of functionality let's make it so when you add a new note in that new note it gives you the option of what type of note you want to create so let's do this I want to make it so new notes could be regular notes tables like a spreadsheet or a can ban board when a new note is created and opened have it so there's but buttons to implement that functionality all right so now we're making it so anytime we create a new note and you click add note and you open it up you can determine what type of note you want to be again when you're using notion it's cool because you can do canand boards for organization or you can do spreadsheets whatever you want to do uh this is going to make it much closer to notion functionality so here we go let's modify the code to allow for different types of notes uh we'll add buttons to switch between these types and the new notes created here's how we can implement it we've updated the new note item to include a note type field so now it's going to have types for every single note and now the editor is going to be able to change based on which type you select all right so let's accept this let's pull this back open let's go into personal let's add a new note let's call it new note test let's add that note we go into the new note okay so we got buttons up here let's see what happens when we click spreadsheet okay so we get the buttons oo I like the new logos so the spreadsheet logo the can band logo the note logo uh now we just got to implement the functionality so we got the kind of we're doing this step by step we got the kind of framework built out for this now we can go in okay let's first implement the spread

sheet functionality when creating a new note and a and the spread sheet type is selected make it so an empty spread sheet SLT is created in the note all right so we're doing the step by step we're going to add the spreadsheet functionality and now our notes are going to be really Dynamic so we can create whatever type of note we want again this is kind of the main part about notion is you're able to have so many different types notes you can create so it's building this out let's update the notion clone components to use the new spreadsheet component okay we've created a spreadsheet component that renders a table so it builds out the entire spreadsheet for us builds out all this code let's accept it let's pull this back open let's see what we got here let's go to Journal we'll turn into a spreadsheet and boom we got a spreadsheet column one and I again we didn't have to code any of this out right we didn't need any coding experience all we're doing is going in and telling the AI what we want to build and it just does it for it's like having a developer that works for us uh column one let's do Row one boom and it just saves it that's amazing that's amazing I just built it out like that for us okay well now let's implement the can band functionality shall we okay perfect I always I like to thank the AI you know one day it's going to be smarter than me and want to take me out so I want to get on its good side now let's implement the can band board

functionality please Implement a very basic can band board that can be edited all right so now we're going to implement the third note type which is the can band board then we can after this do some different styling or do whatever you want a lot of cool directions we can go into so it's building out it what really is amazing but just on that one sentence look at it it's building out this entire component for us line by line we didn't need to know anything about coding it's pretty amazing all right we've created a new can band component that displays three columns to do impr okay so it's given us a very basic handband board users can add new cards to each column let's accept it all right we come back over here let's go to our shopping list and let's open up the can band board wow two create notion clone add card okay it adds the card uh use AI okay so it's put in the text in every card as we do it but when I click add card it saves the right one we can fix that functionality very easily so this is pretty amazing at this point we got the functionality of adding folders to our application we can add notes under each folder uh now in our notes we can create regular spreadsheets we can create C F band boards we're you know this is this an entire notion application just yet no but in the span of what 10 15 minutes we've built out I'd call it 70% of the functionality so far now we can go back and keep adding in more functionality I've included the link to the GitHub down below if you want to take this code and edit it yourself other cool things you can add in too if you want to add in AI functionality you can do that if you want to add in cool styling the ability to email or share notes you can do that as well check out the GitHub download it below if you'd like uh this is as cool as it gets again you have the power now to build whatever you want if you're paying for an application you can be like N I don't want to pay for this anymore let me build this you shouldn't be paying for any of these SAS applications anymore you can just build it yourself that's what I did right here right now so now what I'm doing is I'm going back I'm building out every application I'm paying for you should do the same thing if you want to follow me building out all the applications I'm paying for make sure to subscribe below make sure turn on the Bell notification make sure to hit like and then let me know what other applications you're paying for you'd like to see me build I'll build out whatever you're paying for let me know Down Below in the reply section I'll build it out for you I've created a ton of videos and other applications I'm building too so make sure to hit my profile and check out one of the other applications I've built hope this is helpful I help you build a ton of really cool stuff with AI keep it tuned in and I'll see you in the next video