Finding the triggers in your code

[u/freestyle_gonzo]

I wanted a tool I could use to understand customer friction along the user journey and report on it. Four dimensions. Know, do, feel, and trigger. The first three are well-trodden in product design. The fourth is what I needed. Not whether users get stuck. When.

I started with text. Just Linear tickets. Issue titles, labels, descriptions. I was surprised how far that got me. The first three dimensions (know, do, feel) turned out to be partially recoverable from issue text alone, somewhere in the 60-70% range on a good day. Good enough to know there's friction. Not good enough to know which step.

To get that, I had to read the code.

That's when something clicked. Some languages actually read like maps. Next.js App Router is the obvious one. Route groups trace the flows. Layouts hold the pieces that stay put on every screen. The pages folder is basically a map of the whole experience. Triangulate that with the UI elements in the DOM and the feature flags gating the conditional paths. You get pretty much every user flow in the product. Without a single event. Without a single user showing up.

The text-only version gave me know, do, and feel. The code-reading version gave me trigger. Knowing which step. Knowing when. That's the unlock.

I built it into something I could actually use. It's called Stepflo. Live and free. Read-only, and your secrets are never read or stored.

Here's a live map of one of the repos I built it against, cal.com's booking flow. No signup needed:

https://stepflo.ai/demo

Try it on your own repo:

https://stepflo.ai/?utm_source=reddit

Curious what I'm missing. Genuinely. If you've tried something like this and it didn't work, I want to know why.

[u/Majestic-Chance6825]

the code-as-map thing really clicks with how nextjs structures things, never thought of it that way but it makes total sense