Skip to content

Navigation Patterns

The frontend uses React Router v6 for client-side navigation. Routes are centralized in constants and then wired into route trees for the dashboard, landing page, and metrics subdomain.

Where routes live

  • frontend/src/constants/RouteConstants.js - The source of truth for path strings.
  • frontend/src/App.js - Chooses which route tree to render based on subdomain.
  • frontend/src/Dashboard.js - Dashboard routes (data-labeling product UI).
  • frontend/src/landing_page/LandingPage.js - Marketing + community site routes.

Subdomain-based routing

frontend/src/App.js checks the current host:

  • Dashboard subdomain renders Dashboard under a <Router>.

  • Otherwise, it renders the landing page routes.

  • frontend/src/components/MainNavbar.js - Primary navbar for the dashboard.
  • frontend/src/components/Navbar.js - Step-by-step navbar used in labeling flows.

Adding a new route

1) Add a new constant in frontend/src/constants/RouteConstants.js.

2) Add a <Route /> in the correct tree:

  • Dashboard UI -> frontend/src/Dashboard.js

  • Landing/marketing -> frontend/src/landing_page/LandingPage.js

3) Add a navigation entry in the relevant navbar component (ex: frontend/src/components/MainNavbar.js).