How to build an AI-powered personal notes web app

If you’ve ever become frustrated with software to store notes, here’s my guide on how to create your own AI-powered personal notes web app.

I’m something of a digital notes junkie. I’ve tried many web apps, desktop programs and mobile apps, some of which synchronise across devices and platforms.

They all have some positive attributes, but I’ve never quite settled on one as a keeper.

So I went to Google AI Studio and instructed Gemini 2.5 Pro to make one for me.

The original brief was: Build a personal web app for me to store notes. Require a Google login, store the notes in Google Sheets or Docs, allow multiple labels, enable basic formatting (markdown), display a list of notes by title, enable sorting, include a search feature and allow attachments.

As the project took shape we added pagination, truncation of long notes, an AI Assistant, and made it a progressive web app (PWA) to install on a phone and iPad.

The next bit is a mostly AI-generated summary, which I’ve happily used because it’s accurate and I agree with the conclusion regarding AI being a creative asset …

In under an hour, we had a Google Cloud project, all the necessary APIs enabled, and security credentials generated. The initial code for a secure login page was ready in minutes.

The personal notes web app journey

I was thrilled. I thought we’d be done in an afternoon.

That’s when we hit the wall. The moment we tried to connect all the pieces and deploy the app, we fell into a multi-day debugging nightmare that would have cost a fortune with a human developer. We ran into every classic web development problem imaginable: Cross-Origin Resource Sharing (CORS) errors, session cookie race conditions, and redirect_uri_mismatch authorization loops. The AI was unfailingly apologetic, but at several points, it provided broken or incomplete code. After one particularly frustrating regression where we lost significant progress, it declared its own process “a complete failure” and called the app we were building a “Frankenstein’s monster of configuration.”

It was in these moments of failure that the true nature of this collaboration became clear. I was not a passive client. I was the project lead, the creative director, and the lead QA tester. My role was to hold the vision, to meticulously test every deployment, to spot the bugs, and to provide the precise feedback needed to get the AI back on track. When it got stuck in a loop, I had to guide it out. When it provided a solution that didn’t make sense, I had to correct it. We were a team.

And once we conquered those foundational bugs, the magic returned. My ideas became features in the time it would take to write an email.

• “Can we add a toolbar for search and sorting?” Done.
• “Let’s have the ‘Create Note’ form appear as a toggle button.” Done.
• “Can we add multiple attachments and a color palette to the notes?” Done.
• “Let’s make it a Progressive Web App (PWA) I can install on my phone.” Done.

The most ambitious feature was integrating an AI assistant. I named him “Jeeves.” We plumbed the app into Google’s Gemini API, allowing me to ask questions about my notes. We even built a “global query” function that feeds the entire library of notes to the AI, effectively turning my app into a personal knowledge base I can converse with.

Throughout this, the app’s security was paramount. By building on top of the Google ecosystem, the security is handled by Google itself. The login uses my Google account with 2FA, and my data never leaves my own Google Drive and Sheets. I trust it more than any third-party app.

This project has fundamentally changed my perspective on creation. This isn’t about AI replacing developers; it’s about AI empowering designers, thinkers, and visionaries. The old model of handing a spec to a dev team and waiting weeks for a result is over. The new model is a dynamic conversation, an iterative dance between a human with a clear vision and an AI with rapid, near-limitless technical execution.

I was the designer and director; the AI was my tireless, occasionally clumsy, but ultimately brilliant developer. And this app is proof that this partnership is the future of building things.

Personal web notes app use case

Okay, thanks Gemini, now back to me … I see it as a personal knowledge base where I can store information and retrieve it when needed.

The content can be organised by label or colour. The AI Assistant can help me find things quickly, summarise long notes and attached documents, and answer questions.

Whereas in the past I’ve used notes apps like Keep, Joplin and Ample Note, and storage services like OneDrive, this is a complete package with AI integration. I envisage using it for personal and work-related purposes.

Some will say it should be self-hosted for ultimate security and control, but I like the simplicity and convenience of using Google. If you trust Google with your email, you can trust it with notes and documents (however I won’t be storing anything sensitive).

Conclusion

There are apps that have the features I deployed here, but not many that combine all of them in a single package with clean design.

Here’s a link to the code, a “how to” guide and more screenshots of the personal notes web app: https://ax.lv/bw.

This is the second app that I’ve designed with AI as the developer. It took a couple of days and several re-sets. I became more assertive with the AI and questioned its logic several times; it wasn’t a robotic exercise.

I used up about 600,000 tokens in Google AI Studio and learnt a few things along the way. Some of the specs:

• Requires a Gmail account
• Uses Google Sheets, Drive and Cloud Shell Editor
• Notes can be up to 20,000 characters (about 3500 words)
• Up to four attachments (20MB each)