Metrograf

Momentum is growing for Bankstatemently

This week felt chaotic - I welcomed the first 2 paid monthly subscribers. Both immediately pushed the system and surfaced several hard limitations in the current setup. It seems like they're both small businesses with multiple accounts across multiple banks. That use case makes a lot of sense to me - They're essentially trying to get an overview of their financial health

I'm becoming more and more bullish on product-founder fit. It's just extremely cool to see statements being uploaded from all over the world. The audience is global from day one, which oddly feels like traveling while building. I’ve spent a lot of time getting the foundations right, and that’s starting to compound. The tool is language-agnostic, and simply by adding a "banking dictionary", 15 minutes later, it was able to parse a Canadian French statement correctly

Bankstatemently prend désormais en charge le français (bêta) 🇫🇷🤓

Things I'm struggling with most:

• 𝗢𝗯𝘀𝗲𝗿𝘃𝗮𝗯𝗶𝗹𝗶𝘁𝘆. Taking time to build internal mini-features that'll improve visibility. I only just now pushed my admin panel live. The lack of visibility creates unnecessary anxiety, so this is like self-care. But of course, user-facing, it also improves trust and explainability
• 𝗖𝗼𝗺𝗽𝗼𝘂𝗻𝗱𝗶𝗻𝗴 𝗘𝗻𝗴𝗶𝗻𝗲𝗲𝗿𝗶𝗻𝗴. Inspired by Every and a recent thread by the builder of Fintool.com. It's no longer about writing specs in markdown - it's about invoking that skill while building, then sharpening it through feedback loops. That’s where momentum comes from
• 𝗧𝗮𝘀𝘁𝗲 𝘁𝗿𝗮𝗻𝘀𝗳𝗲𝗿. I feel I am already building/releasing very fast, but it's still that transfer (and retention) of taste to the AI agent that's a bottleneck. I'm approving and conducting too much still. At the same time, I don't believe an extremely well-built, opinionated product can be built by AI alone yet. It needs human judgment

Product-wise, the roadmap feels pretty clear, but for next week, I'm still refining some things for higher accuracy. Correctness > features. After that, these premium features are coming up:

• A user dashboard with document history
• Multi-statement support in a single PDF
• True multi-table detection

I'm consciously not pushing a lot on distribution. There’s a healthy balance right now between things breaking (and getting fixed) and growing usage. Even with minimal effort, I’m already seeing latent demand from SEO alone. Bankstatemently is not even ranking anywhere near the top yet (≈ SERP 60 for “bank statement converter”), but it's already generating impressions and clicks

I'm also trying to reduce noise as much as possible. While it’s important to stay aware of what’s happening in the space, I’m deliberate about what I engage with and which new shiny tool dominates the public discourse 🤖

So all in all - Still early, but the signal is getting clearer 😃

A pure passion project where data, design, and curiosity came together into a vibe-coded interactive MRT map

Intro/hook (The “why”)

I’ve always considered myself a metro enthusiast.

But beyond riding subways around the world, I’d never actually created anything to express that love.

After shutting down another startup in May, I felt the need to reconnect with my inner child.

Just build something.

A passion project.

Don’t care about user interviews, monetization strategies, and lean traction-optimized MVPs.

Just focus on unrestricted play.

Geek out.

Make art.

So, meet Metrograf - a vibe-coded visualization of Singapore’s MRT.

It’s my way to redeem my inner train nerd finally.

Try Metrograf

Metrograf. I asked ChatGPT to come up with a logo and name that looked like an Atari game, but was also a bit German

Building the tool (Process / technical journey)

Being sock-obsessed for a year, I had mostly lost touch with software. AI had leapt forward and vibe coding had become a thing, while I was busy studying single-cylinder knitting machines.

Step #1 was simple: re‑immerse myself in modern coding tools and see what I could create.

Coding stack

• Lovable. Great for starting fast, but it couldn’t handle my growing complexity (and the free plan’s prompt limits got in the way)

• Switched to Cursor’s 2‑week Pro trial for more directed changes. Helpful, but context kept slipping. I probably used it wrong.

• Claude Code – This has been amazing. Structured, logical, and great for both feature building and debugging. Still not flawless, but easily my favorite.

I also open‑sourced the MRT map on GitHub and deployed it with Vercel. ChatGPT was used to write PRDs (Product Requirements Document).

Prepping the MRT map

Then I needed a fully annotated SVG map to visualize data precisely. I found a Figma file by Shuglee (thank you!) and spent several late nights manually adjusting station names and adding dual tracks to allow for bidirectional flows. In hindsight, rebuilding from scratch might have been faster.

Shortest route

Finally, to visualize flows, I assumed the fastest paths between stations, using Dijkstra’s algorithm to handle platform changes at places like Raffles Place. Maybe not always the route real passengers would take, but it keeps the simulation clean. Thank you for letting me fork your repo, Wu Tingfeng!

Biggest learning

Vibe‑coding flipped my approach to building. The bottleneck isn’t hunting for the right libraries or debugging anymore. The key is planning deliberately and describing what the product should do so the AI co‑pilot can execute.

Chevrons running around in Singapore’s MRT map. An SVG optimized for data visualization

Data & simulation (Making it work)

Once the map was ready, the next step was to bring the data to life.

LTA’s Datamall

Luckily, Singapore’s Land Transport Authority has an Open Data API. Otherwise, I would’ve been relegated to creating a work of fiction. The raw data I’m using is hourly for May 2025 and split into weekday and weekend/PH trips. It’s historical, not live, but accurate enough to simulate the daily rhythm.

Chevrons

Passengers on their way from origin to destination appear on-brand as MRT‑style chevrons. But to keep browsers alive, I filter to only the busiest traffic flows.

Interpolation & leaderboards

I thought it’d be cool to make a time‑lapse for both day types. To make that smooth and dynamic, I used some creative freedom to interpolate hourly data into continuous flows. This also led to leaderboards like Network Peak Volume, Top 5 Origins and Top 5 Destinations at any one time during the day.

AI commentary

Something I’ve tried to take a stab at - but opened a can of worms - is a thing I’ve called “AI Commentary”. In essence, it’s real‑time data storytelling (which I think will become huge). In this case, it’s presenting hourly narrative insights merging peak data with cultural context to build a daily evolution of the network.

Leaderboards (Network Peak Volume, Top 5 Origins, and Top 5 Destinations), on a Heat Map, with AI commentary during a weekday morning rush hour. Simulation controls are shown on the left

Heatmap

It was a very late addition to the project, but inspired by the complaints of overcrowding at Bishan in Alfred Lua’s Is the MRT down again? tool, I knew I had to visualize a station’s busyness throughout the day.

Heatmap for a weekday during evening rush hour - Jurong East is a huge transfer station, whereas the biggest exodus occurs in the CBD at Raffles Place and City Hall

Play, art, and brand (The emotional core)

What’s functional doesn’t have to be ugly. I heard they call it “taste” these days.

Exploration & simulation

The tool lets you play with station-level data or simulate the entire network as a time lapse for both weekdays and weekends/PHs. It’s unlikely to inform city planning, but there’s something soothing about seeing the data of “your” station come alive.

Dark mode

They say if you’re adding dark mode to a B2B SaaS, your priorities are off. So, of course, I had to build dark mode. It adds a midnight feel to passenger flows during the wee hours. And yes, it was a headache in SVG manipulation, but worth it.

MRT branding & Tailwind

I stayed close to Singapore MRT branding, but stopped short of styling the leaderboards the same way to avoid another rabbit hole. Lovable handed me the CSS framework Tailwind. That’s probably why the design has that familiar vibe-coded look.

Exploration of “my” one-north MRT station in dark mode. I love living here, because on the weekends it’s so quiet 🤫

Reflection/closing (Final thoughts)

This project only exists because of vibe‑coding. Without it, I doubt I would’ve even started.

I’m not starting from zero (I built the MVP for my old payments startup in Python),
but in the past, my ideas were always limited by execution and delegation bottlenecks.

Now, it feels like I’ve unlocked superpowers.

I can finally translate product sense into working software, fast.

The real limitation isn’t code anymore.

It’s the imagination.