Frontend ↔ Backend Flow Explorer
This explorer gives you a complete route-to-endpoint map in one place. You can start from any frontend route and immediately see the page component, API wrapper function, backend endpoint, and mapping quality.
Direct links
- Product app: app.visyble.ai
- Backend API base: api.visyble.ai
- Frontend API Usage Reference: docs.visyble.ai/generated/frontend-api-usage-reference
- API Endpoint Details: docs.visyble.ai/generated/api-endpoint-details
- Frontend Main Sections: docs.visyble.ai/generated/frontend-main-sections
No-brain way to use it
- Pick a Workflow mode:
- Onboarding Walkthrough to learn product areas quickly.
- Needs Review Only to focus only on missing flow links.
- API Audit (GET first) to inspect read paths before write paths.
- Select a Section so you only see one product domain at a time.
- Open Route Drilldown to see the exact chain: route -> page component -> API function -> backend endpoint
- Use Backend Status = Needs Review to close missing mappings first.
- Watch Coverage cards and Priority Review Sections to decide where to improve next.
Why this matters for onboarding
New developers can understand system behavior without jumping across many files or guessing hidden links. This page is designed so that one filtered view gives enough context to understand how a user action travels through frontend and backend.
No-Brain Workflow
Pick a mode, select a section, then select a route. You will immediately see what page loads, which API function runs, and whether backend endpoint mapping is complete.
| Section | Route | Page | API Function | Method | Endpoint | Status |
|---|
Sidebar Deep Dive
This section deconstructs every left panel section and item from frontend/src/components/layout/Sidebar.tsx, including route-level flow links.