Routing Architecture

Vartovii Dashboard uses React Router with a router-first entry path.

Route Structure

Route	Component	Description
/app	LandingPage	Home page with search
/app/crypto/:slug	CryptoPage	Crypto project analysis
/app/forensics/:address	ForensicsPage	Wallet / address analysis
/app/company/:slug	Overview	Company dashboard view
/app/report	ReportViewer	Company report
/app/overview	Overview	Corporate overview
/app/sentiment	Sentiment	Sentiment analysis
/app/topics	TopicAnalysis	Topic analysis
/app/market	MarketPulse	Market pulse
/app/battle	BattleMode	Compare companies
/app/crypto-battle	CryptoBattleMode	Compare crypto projects
/app/live-search	LiveScrapingFlow	Real-time scraping
/app/admin	AdminPanel	Admin panel

Key Files

dashboard_app/src/
├── router.jsx              # Route definitions
├── main.jsx                # RouterProvider setup
├── layouts/
│   └── DashboardLayout.jsx # Shared layout (Sidebar, Header)
└── pages/
    └── crypto/
        └── CryptoPage.jsx  # Uses useParams()

The dashboard now enters through main.jsx -> RouterProvider -> router.jsx -> DashboardLayout. The older standalone App.jsx shell has been removed from the active frontend path. Runtime API calls are also standardized through shared helper modules in src/utils/http.js and src/utils/api.js, so route-level features do not need to own ad-hoc request formatting or duplicate response handling. Long-running scraping and report follow-up now use shared backoff polling rather than fixed hot-loop timers tied directly to route components. Report and chat surfaces also render formatted analysis content through a shared lazy markdown boundary instead of duplicating renderer wiring in multiple route-level modules.

Navigation

Programmatic Navigation

import { useNavigate } from "react-router-dom";

const MyComponent = () => {
  const navigate = useNavigate();

  const goToCrypto = (slug) => {
    navigate(`/app/crypto/${slug}`);
  };
};

Link Components

import { Link } from "react-router-dom";

<Link to="/app/crypto/bitcoin">Bitcoin</Link>;

URL Parameters

import { useParams } from "react-router-dom";

const CryptoPage = () => {
  const { slug } = useParams(); // e.g., "bitcoin"
  // ...
};

Lazy Loading

Heavy components are lazy-loaded for performance:

const CryptoPage = lazy(() => import("./pages/crypto/CryptoPage"));

This reduces initial bundle from ~1.5MB to ~300KB. The dashboard shell also keeps export and rich-rendering dependencies behind lazy boundaries, so PDF and markdown tooling load only when the related feature path is actually used. Production dashboard routes also avoid direct debug-console logging so normal user flows stay visually clean while loading and error states remain explicit in the UI itself. The dashboard also no longer carries the legacy axios client in its active runtime contract; request handling is centralized behind the shared frontend HTTP helpers.

Adding New Routes

1. Add route to router.jsx:

{ path: 'new-feature', element: <NewFeature /> }

2. Add sidebar link in Sidebar.jsx:

{ id: 'new_feature', label: 'New Feature', icon: Star, path: '/app/new-feature' }