Ketchup

Inspiration

In secondary school I was close to my whole group nick name Hai di which means brotherhood in hokkien. We saw each other every day without ever having to arrange it.

After graduating from secondary school I decided to chose a different polytechnic from the rest of them.

Nothing dramatic happened. I had a new school and new people to get to know, and my poly was far enough from theirs that meeting up took planning none of us were good at. What I remember most is not deciding to drift — it's that I kept losing track of time. A month felt like a couple of weeks. By the time I noticed, it had been far longer than I thought, and reaching out started to feel like something I needed a reason for.

Then it happened again. After poly, everyone scattered into university and National Service. The circle that was already smaller got smaller still. Different schedules, different phases of life, and the same quiet gap opening up between people who genuinely liked each other.

That's the part that stayed with me. Both times, nobody did anything wrong. There was no falling out. We just stopped keeping track, and time did the rest.

So I built the thing I wish I'd had at seventeen — something that notices the drift while it's still easy to fix.

The name is a pun, but it stuck for a better reason: when friends do finally meet, food is almost always the reason. Ketchup felt right.

What it does

Every friend you add gets a ketchup bottle. It's full right after you see them and slowly empties as time passes — full, two-thirds, half, a third, empty. When it runs dry, it's time to Ketchup.

You set the rhythm per person. Weekly for the people you see constantly, every few months for the ones you don't. "Overdue" means something different for every friendship, so the app treats it that way instead of guessing.

See who's drifting. Home sorts everyone by how overdue they are, so whoever you've neglected longest sits at the top. No searching required — the app tells you.

Remember the details. Every friend has a profile: photos together, birthday, phone number, a description, and a running log of everything you've done — what you did, where, and anything worth remembering.

Plan the actual catch-up. A calendar for single days or full date ranges when it's a trip. Birthdays marked automatically. Location search with a live map so you can pin exactly where you're meeting.

Close the loop. When a plan's date passes, Ketchup asks: did this happen? Say yes and the bottle refills, the catch-up joins your history, and the cycle restarts. Say no and it quietly disappears — because plans fall through, and an app that assumed otherwise would be lying to you.

How we built it

Plain HTML, CSS and JavaScript in a single index.html file, hosted free on GitHub Pages.

That's deliberately simple. One file means nothing to install and no build step that can break at the worst possible moment. A judge clicks the link and the app is just there.

No accounts. Everything saves to your own browser. No sign-up wall between anyone and the app, and no server holding your friendships.

OpenStreetMap over Google Maps. Google's autocomplete needs a paid API key and a billing account. Free, keyless OpenStreetMap does the same job and can't fail mid-demo because a quota ran out.

SVG bottles, not images. The fill levels are drawn as vectors and calculated from actual days elapsed, so they stay sharp at any size and genuinely reflect your data.

Everything embedded, logo included, so the whole app really is one file.

Challenges we ran into

I cannot code. Not "I'm rusty" — I had never written a line of HTML, CSS or JavaScript, and I didn't know what GitHub was when I started. This entire app was built with Claude as my pair programmer.

That turned out to be its own challenge, and a harder one than I expected. When you can't write the code, all you have is your ability to describe what you want — and I quickly found I didn't know how to think about layout either. Where does a button go? What belongs on one screen versus another? What should someone see first? None of that was obvious to me, and none of it is something an AI can decide for you.

So the real work was learning to see the app clearly enough to direct it. I ended up sketching screens on paper and photographing them, because words weren't precise enough. Every design decision in here — the ketchup metaphor, the five bottle levels, the logo, the colours, the layout of every screen — came from me. Claude wrote the code that made it real.

Scope nearly sank it. My first plan had an AI planner, calendar syncing, availability polls, group voting, trip cost splitting and shared checklists. All of it felt essential. Cutting it down to something that actually works was harder than any bug, and I had to be talked out of "let's just combine everything" more than once.

Some bugs looked like design problems. The sauce overflowed outside the bottle because a clipping mask silently failed. My uploaded file was named index.html.html, so the live site showed nothing at all. The header red sat so close to the logo red that the logo simply vanished.

The calendar was wrong, and I could feel it before I could explain it. The first version let you create an event and then threw it away — nothing saved, nothing appeared anywhere. It looked finished and was completely hollow. Working out why it felt off, and rebuilding the app around events that persist, was the biggest change I made.

Accomplishments that we're proud of

Honestly? Seeing the thing in my head appear on a screen.

I had no way to build any of this two weeks ago. Watching a bottle drain because a friend was genuinely overdue, then refill the moment I logged a catch-up, was the point it stopped being an idea and started being an app. That feeling is the whole reason this exists.

It's live. Anyone can open the link on their phone right now and use it.

The metaphor earns its place — the fill level is real data responding to your own chosen rhythm, not decoration.

The plan-to-history loop makes it feel like a product rather than a demo. Plan something, do it, confirm it, and it becomes a memory while the bottle fills back up.

And it looks like itself. The hand-drawn logo, the marker lettering, the dusty rose and deep maroon — nothing here came from a template.

What we learned

Working beats ambitious. A simple app that runs perfectly is worth more than a clever one that's half-broken. I learned that the slow way.

Constraints protect you. Choosing free, keyless tools didn't just save money — it removed every point of failure that could have wrecked the demo.

You can't direct what you can't picture. The moment I started sketching screens instead of describing them, everything got faster. Learning to think in layouts was the actual skill I picked up here.

Being honest about limits is stronger than pretending. The location suggestions aren't AI. The activity ideas were a fixed list, so I removed them. Saying so plainly feels better than dressing it up.

What's next for Ketchup

The version here is the core. The most important next step comes straight out of the story that started it.

Group bottles. I didn't drift from one person — I drifted from a whole group. Right now Ketchup tracks individuals, which means it can't quite see the thing that actually happened to me. A shared bottle for a friend group, one that empties when the group hasn't been together, is the feature this app is missing most.

Suggestions from your own history. Ketchup already knows what you did, where, and when. It should be able to say "you and Marcus always end up walking, and it's been six weeks" — a real recommendation drawn from your actual life rather than a generic list.

Common interests. If three friends all like hiking, the app should notice and suggest one trip instead of three separate coffees. Fewer plans, more people, less effort.

Real notifications. The nudges live inside the app today. They should reach your phone, with one tap to plan something, snooze it, or just send a text.

Proper trip planning. Day-by-day itineraries, cost splitting, and a shared checklist — so the group-chat holiday finally happens.

Built With

• claude
• html