Most interface code should live inside the app directory, with the folder structure resembling the app's routing structure. We currently use React Router and take full advantage of nested and config-based routing


  • All files/folders containing a route should be lower-kebab-case
  • Dynamic routes should be camelCase and have their parameter name prefixed with $
  • All other files/folders should be PascalCase (expect for index files inside PascalCase folders)


If a folder of routes has a component that should be applied to every sub-route, the component's file should be named Layout.tsx and applied in the parent folder's routing configuration as the element property.

For components that should wrap a subset of routes, name the file with something ending in Layout.tsx (but not Layout.tsx itself!). We then recommend using layout routes to apply the layout without introducing a new path segment.