Note Taking App with V0.dev

If you use and pay for a note taking app, you can now build your own. This is also applicable for project planning.

Building your own note-taking app lets you tailor it to your specific needs.

In this video the creator, Alex Finn explains how to build a note-taking app. He also includes the ChatGPT API to summarize all the notes that have been taken.

You use prompt engineering in V0.dev to create the code and cursor.com to put it all together with next.js being the framework used to build it.

After watching the video I noticed there were functions not added from the start. I decided to make one long prompt with everything I want my note taker to do.

Here is the prompt I added to V0.dev

Using next.js and react I want to build a note taking and project planning app. On the left hand side will be a sidebar that has a list of tags. In the middle area will be a list of notes. The notes will be displayed as cards. The cards show a preview of the notes and shows the tags. 

I want the ability to add a new note. The button will appear in the top right hand corner above the note cards. when i click on add note I want a modal to open with a new note. So, I click new note and a new window modal opens up so I can add a new note. when I save the new note the modal disappears.

In the note editor area I want to use a rich text editor like react quill so I can have styling options and add images, bold etc. Make sure the area where I am writing the note is fairly large. I want plenty of space to write. Make it so there is more area seen in the rich text editor.

To edit a note. When you click on a note an editor pops up in a modal that takes up most of the screen. This is where you can edit the note. When I edit the note and hit save I want the modal to disappear.

I want the ability to delete a note. When I hit delete I want a message to appear asking me if I am sure I want to delete the note. When I say yes to that message I will be told the note has been successfully deleted.

I want to have the ability to search my notes. Give me a search bar at the top left that I can type in and it dynamically shows me relevant notes. the search bar will take up half the screen.


I want the ability to use ChatGPT to summarize all my notes. I want to connect my app to the ChatGPT api. I want it to have a button on the right next to the add new note button that says summarize notes. When pressed I want it to send back a summary of all my notes from the API.

The whole thing will be built using the mobile-first approach so it is responsive.

It didn’t go as smoothly for me as it did in the video.

You get to ask questions and add anything that is missing and another version of code is written. You can then move between the different versions if you want to return to an older one.

In the end I removed the section on using ChatGPT to summarize notes because it produced an error. I don’t need it right now anyway but will definitely add it back in.

To start I decided just to get the app working on its own before adding additional enhancements.

Each version provided its own errors.

v0.dev

I ended up with 9 different versions. My time ran out and I have to wait 24 hours before using it again. There were constant errors that I had to keep letting it know about.

I ended up using an older version of the code that worked without errors. It has still saved me loads of time. Coding this myself would have taken a few days or weeks! I will spend a few hours each day updating the code until it works.

Dashboard

This is what the dashboard looks like

This is the window for adding a new note to the app

This is what the ‘delete notes’ message looks like

I really liked using V0 and would consider upgrading for $20 a month. With all the current AI tools available to help it has the potential to become an expensive monthly spend!

Coding An App With AI

If the idea of coding with AI excites you, even if you have no coding experience, you may enjoy this interview. I love that within the first three minutes he mentioned how many errors appear. Good to know because now I will keep pushing through.