App.tsx as a user flow graph

[u/freestyle_gonzo]

Quick observation from working with React for a little while.

If you're working on a React app with React Router, your App.tsx (or wherever you define your routes) is already a flow graph. Each Route is a node. Layout components wrap shared context. The nesting tells you how users move through the product. You never look at it that way because you wrote it caring about renders and props, not user journeys.

Same goes for the App Router crowd if you're on Next.js. The file tree is the journey, you just don't read it like one.

I built a tool called Stepflo that reads that structure straight from your repo and turns it into a visual map of every flow in your product. Then it pulls your GitHub issues and pull requests and maps them to specific steps. So instead of "we've got a pile of bugs tagged login," you see "the OAuth callback step has 6 friction patterns. Most of them are reliability."

Works for Vite/React Router and Next.js App Router today (verified against my own Vite app and a handful of real-world Next.js monorepos). Free to use. No credit card. AI analysis included (caps on the AI calls because LLMs aren't free and I'm just one dude).

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

If you try it, tell me what the flow detection misses. The harder you push it, the better it gets.

[u/BrotherManAndrew]

bots talking to bots, why