I built PocketCal over the past couple months, and it was a really interesting learning experience!

What is PocketCal?

PocketCal is a free, open-source web app that lets you select dates on a calendar, and share the calendar via the URL. No sign-up needed, no saving things, it’s all just a link.

When you open the app (it works better on desktop, but works on mobile, too), you can click dates on the calendar to add them to a group. You can name groups of dates, add more groups, and there’s some other small customizations. Then, once you’re happy with it, you can share the URL to share your entire set of dates with anyone you’d like!

Here’s an example of it in action!

How’d you come up with this?

So, confession, I stole the idea. Back in early 2020, when I was recording the Stack Overflow podcast, I became aware of a tech consulting company called Postlight, founded by one of my fellow podcasters, Paul Ford. Postlight built a ton of cool little tools, and fast forward to today, they’ve been acquired and most of their little tools have been lost to internet history.

One of their tools was called TinyMonth, which… did exactly what PocketCal does. I really liked it for sharing dates, but I couldn’t use it anymore, and couldn’t find anything else like it out in open source or otherwise.

So, I knew exactly what I wanted… I just had to build it. I had all of the product requirements in my head, had a name for it, but procrastinated on actually building the tool for a while.

Enter… AI

I’m admittedly a bit of an AI skeptic, and have an AI Usage page here on my website to explain that I do use AI as an assistant for code and stuff, but not for much else.

Yes, yes, I know I work for GitHub and talk about GitHub Copilot for my actual job, and do like it, but I don’t love the “AI will replace us!!” mentality. That being said, because it’s my actual job, I felt I should give the whole “vibe coding” concept a try.

Most of my attempts to let AI do all the coding work for me were pretty unsuccessful in existing projects. They would often re-write too much, or I wouldn’t be sure which model to try, or it just struggled with too much context.

With PocketCal, I thought that since I know exactly what I want my app to look like, and I know exactly the requirements I wanted to include, and I would be starting from scratch… perhaps I could try GitHub Copilot agent mode to see where it would get me.

This is the prompt that I used:

Create an app called PocketCal. It shows a 12-month time range on the right, starting from the current month, and it makes it easy to click and drag and extend ranges across multiple event groups.

The sidebar on the left allows you to add as many event groups as you like (which you can name, and customize the color), and when an event group is selected, you can drag date ranges for that group on the calendar. There are also options for the start date of the 12 month range, the ability to include weekends, and the ability to toggle on or off today’s date. If you have dates selected and you move the date range, it will keep those dates selected (unless they are no longer in the 12 month range).

Your calendar data is stored in the shareable URL. We don’t store the data on a server and have no record of a calendar. Everything about the app state is saved in the URL and can be copied.

This should be a single page app built with React, fully client side.

This… generally worked pretty well. I used Gemini 2.5 Pro as the model, and had to do some massaging as it went. When I first ran this, it scaffolded the app well, but didn’t actually implement most of the components, it just had placeholders everywhere. I had to add a lot of Please actually implement the Calendar component and It looks like you made an infinite loop, fix that (and so on) prompts. I ended up having to switch to Claude 3.5 Sonnet after a certain number of those “fix it” prompts because Gemini seemed to get a little confused in the context window, too.

Even though it took some effort to get me to a workable place, I was pleasantly surprised how far this got me! It wasn’t the complete working app that I wanted, and not mobile-friendly either, but it kickstarted my efforts on the project. A lot of times, getting started on a project is the biggest mental lift for me, so removing that lift was pretty motivating.

Enter… my brain

That being said, some of the code was ugly and I had a lot of fixes to make. I think I can safely say that AI got me about 70% of the way to a working app, which was great, but particularly for UI elements and their changes, I had to do them all myself.

There were a few times where I actually liked the UI that the app came up with, but if I tried prompting away the work to update it, the entire app would break, repeatedly. If you look at the commits in the repo itself, you can see how most of my commits were changing the look and feel, updating mobile styling, improving accessibility and keyboard navigation, and adding icons and graphics.

I also found that the AI models would add so many unnecessary comments. I normally am very pro-comments, so you can go back into a codebase later and understand what’s going on. But in this case… this was an actual code block it gave me that I had to edit:

.event-group-item button {
  margin-left: 5px;
  padding: 0; /* Adjust padding */
  font-size: 0.8em;
  background-color: transparent; /* Transparent background */
  border: none; /* No border */
  cursor: pointer; /* Pointer cursor */
}

This is just silly. Repetitive! Useless! Why!

Anyway.

Updating the codebase after using AI to build most of it felt like untangling a legacy codebase, which I didn’t mind. It was pretty fun. Some parts of it I was able to say, “wow, thank goodness it handled this logic, because I did not want to do that,” and some parts I was like, “you absolute fool, what on earth are you thinking??” Which… pretty much tracks for the code I write even without AI, ha.

It’s allliiiiive!

If you want to use PocketCal yourself, you can check it out at PocketCal.com and share your conference schedule, plan trips with your friends based on their availabilities, coordinate on-call rotations, quickly show when your team has vacations planned… the world’s ya oystah.

Or, if you want to look more closely at the code, add issues, or support the project, it’s on my GitHub!