CodeXray · MyApp — Example Full-Stack App

Each card is a real source file. Bigger = more important. Colour = live health, arrows = live traffic. Hover any card for details.

Not connected
Working At risk Broken now cool → busiest Depends on (imports)Heat by

Connect your repo to go live

The map below already shows your code’s structure. To light it up with real‑time traffic and health, start your app’s backend so CodeXray can read its live data from http://localhost:8000/metrics.

Not sure how? Ask your AI assistant to “set up CodeXray for my project” — it follows the built‑in instructions and wires everything up for you.

Browser UI

what the user sees
React root
App.tsx
src/App.tsx
React pages
pages/
src/pages/

API Server

Express routes · business logic
HTTP client
apiClient.ts
src/lib/apiClient.ts
Express app
server.ts
server/server.ts
Express router
routes.ts
server/routes.ts

Data Layer

models · database · cache
Data model
model.ts
server/model.ts
DB connection
db.ts
server/db.ts
100%

Busiest routes — by calls

No traffic yet. Start a story on the debug console and watch this fill up live.