A Product Manager builds an app with AI (no developers harmed in the process)

When some girls go through a rough patch in life they cut bangs. I’ve had bangs for twenty years, so I built an app with AI instead.

Let’s talk about it!

A bit of context

We live in a world where AI is everywhere, and like most people in the industry I've been exploring its potential and found it incredibly useful in some areas, and kind of worthless in others. When I noticed people talking about how easy it is to build apps with AI despite not knowing a line of code on Twitter, I decided this would be a fun challenge.

First, let's be clear: I'm not a developer. However, I built my first website in HTML when I was 14, writing code in notepad because I was a purist who refused to use Dreamweaver (if you know, you know). At 20, I discovered WordPress and learned about PHP and databases. For a while, I built websites for clients and considered going the developer route. Ultimately I decided to focus on project/product management and have spent most of my career working closely with developers.

All this to say that while I'm not a developer, I do have a decent technical understanding which definitely helped.

The oh-so-critical problem to solve

I live in Lisbon, and most of my friends here are other expats who travel frequently. Every time I meet one of them, I have to ask them to remind me of their travel schedule. And when mentioning a mutual friend, it's not uncommon that they had no idea they were in town.

Basically, it’s hard to keep track of everyone’s schedule and to know who’s in town. So I decided this highly critical problem would be a good start to learn coding with AI.

My idea is simple: a web app where you can update your calendar to show when you are home (or not) to your friends, and in turn, see when your friends are home (or not).

The very first draft of the idea.

Defining requirements

This is a one-girl-show so no need to make things unnecessarily complicated. A simple list to prioritise features would be sufficient: what are critical features and what can be done later.

An early draft of features.

A large part of building something is deciding what not to build. I know my technical limitations and wanted above all to keep it simple enough to actually create something functional, so anything that risked increasing complexity was a no.

Three things I quickly decided not to explore initially:

  • iOS/Android app. To make it available to my friends I would need to work on two platforms, which is complexity I do not need for my first product attempt.
  • Calendar integration. Would be sweet to update your "home or not" status simply by updating your calendar, but since everyone uses their calendar in different ways, this seemed complicated to streamline. Plus, requiring access to users' calendars means being responsible for a lot of data, and I'm far too new at this to feel comfortable with handling this.
  • Email integrations. Right now, no emails are being sent out. This is one of those things I want to add quite soon, since the likelihood of people signing up, adding a few travel dates, and forget the site ever existed is like 90%. I want to add an onboarding email and the option to send reminders to users.

The tools: v0, Cursor and Replit

On to the practical fun stuff! My technical starting point was Riley Brown's Youtube videos on building apps with AI and the template he and Ansh Nanda offered on Software Composer.

I used v0 for the first prototype and design elements, then moved to Cursor (an AI-powered code editor) and Replit (an AI-powered development environment) for the actual development. I also used Firebase for database and login-functionality.

The very first prompt and layout in v0. I remember thinking that this was great and that I was halfway there already. (Narrator's voice in ominous tone: she was wrong.)

I followed the tutorial religiously in the beginning, but after the initial set-up, my project was very different from theirs, and I mostly relied on talking to the AIs.

Always be polite to your AIs. (You never know what they'll remember during the robot uprising.)

I'm not going to go into all the details of how the tools work, since others are doing that far better than I could. This was one of the videos I followed, but I suspect there are plenty of newer to watch – things gets dated quickly in the AI world.

The process: From PM to (kind of) developer

A common saying in project management is to count on the last 20% of the project to take up 80% of time/budget. Meaning, the last details will take far more time and effort to get into place. And boy, does this hold true. I thought I was pretty much done in October (lol).

While it took longer than expected, I also learned a lot in the process.

It's been a journey, okay.

Lesson #1: Starting over can be faster than fixing

One month into the process, I had prompted myself into a black hole of build error upon build error, and it seemed impossible to get out of. Somewhere I read the advice to focus on functionality and logic first before making it look pretty, and I made the tough decision to delete everything and start over again.

My head hurts thinking of all the hours lost (sunk cost fallacy, am I right?) but it only took me a couple of days to get it to a better state than it was before.

0:00
/0:09

At which point the core functionality seem to work!

Lesson #2: AI generates vs. modifies code

AI currently prefers to generate new code over modifying what's already there, and it explains each answer with a lot of confidence. An actual developer can spot these errors quickly, and give specific prompts to get the result they want. As someone less experienced, this was a learning curve.

Just a few days ago I was trying to debug the location fields, and Cursor said it saw what the problem was, explained some code changes and ended with "make sure you have the correct API key". The thing is, I don't have API key for this feature, because two months ago I decided to implement it by downloading JSON files. I declined the changes, found the files, and changed my prompt to address the specific files it should be working with, and it implemented the right solution right away.

It's easy to end up with duplicated pages, content and functions that create conflicts which can be tricky to untangle. So, pay attention to the code it creates and the explanations it provides, and be specific with what you're asking for.

On that note, it is also a great copilot when learning to code. My understanding of coding and deployment is far deeper now, and that is a combination of going through the process of building, but also reading the answers and explanations as well as asking follow-up questions.

Lesson #3: Debugging takes patience

The most time consuming aspect is of course bugs. No surprises there. You fix one thing and another one pops up even for actual developers, but more so when you don't actually know the ins and outs of what you're doing. Again, learning experience!

Live footage of me trying to fix bugs.

Introducing: homeornot.com

It's been a journey, but here we are!

Now, don't get too excited. It's a basic web app, with plenty of wonky little bugs, and a long way to go before it feels polished. But the fact that I was able to build something functional, without being a developer, is wild. The world is going to look very different, very soon.

Also, thanks to all friends who've had the patience to test, help me figure out what's not working and, not to forget, listen to me talk about this for months. 🫶🏻