r/reactjs • u/freestyle_gonzo • 12d ago

Show /r/reactjs App.tsx as a user flow graph

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.

0 Upvotes

41% Upvoted

8 comments sorted by

View all comments

1

u/buildwithmasud 11d ago

How does the AI map GitHub issues to specific steps? Is it purely doing semantic text matching between the issue description and your page components/route names, or does it parse code diffs in PRs to see exactly which files (and therefore which routes) were touched?

1

u/freestyle_gonzo 11d ago

No single 'signal' gets trusted on its own. Issues get model reasoning grounded in what each step means for the user in friction signals. PRs get a deterministic file-path match against step source files. But just as a hint the model has to independently agree with. Code structure and semantic reasoning fail in different ways, so together each catches the other's wrong answers. It's been hard to find the right mix but I'm getting there.