Skip to main content

​
Frontend Routing

Routing is the last mile that turns a URL into a mounted React page, and in this repo it’s wired mainly in apps/portal/src/main.tsx plus the admin menu config.

​
How it works

Here’s how I add a new screen without breaking navigation.

​
1) URL-to-page mapping: apps/portal/src/main.tsx

All route registration happens in apps/portal/src/main.tsx. Components in apps/portal/src/pages/ are mounted by Route elements under the appropriate layout. For example (pattern):

​
2) Admin navigation: apps/portal/src/pages/admin/layout/menu/config.tsx

The sidebar menu uses adminMenuConfig typed by MenuConfig. Example pattern:
If you add a screen but don’t add it to the menu config, it may still work via URL, but it won’t show up in navigation.
📖 See also: Frontend App for the GraphQL and caching wiring these pages usually consume.

​
Extending this system

Use this checklist to add new screens and keep both routing and navigation aligned.
  1. Create the page component under apps/portal/src/pages/ (co-locate UI and any page-level logic).
Example path: apps/portal/src/pages/admin/settings/members/index.tsx
  1. Register the route in apps/portal/src/main.tsx under the matching layout.
Example:
  1. If it should appear in the admin sidebar, add a menu item in apps/portal/src/pages/admin/layout/menu/config.tsx.
  2. Verify:

​
What not to do

These are the rules that keep route wiring boring (in the best way). ❌ Never assume a new URL works unless it’s wired into apps/portal/src/main.tsx. ❌ Never embed data fetching or complex UI state logic directly in main.tsx. ❌ Never forget to update the admin menu if the screen is meant to be discoverable.

​
File conventions

This section keeps new screens and navigation entries consistent with the existing routing style. Prefer:
  • apps/portal/src/pages/<section>/<subsection>/index.tsx for page entry points.
  • add a corresponding admin menu item only when it belongs in the sidebar taxonomy.

​
What’s next?

If your new page needs server data, read the GraphQL + generated hook contract next. If it needs UI flow state, check the Apollo vs Redux page.