Components structure in Twenty codebase - Part 1.2

Inspired by BulletProof React, I applied its codebase architecture concepts to the Twenty codebase.

This article focuses only on the components structure in Twenty codebase.

Prerequisite

1. Components structure in Twenty codebase — Part 1.0

2. Components structure in Twenty codebase — Part 1.1

In Part 1.1, we reviewed the onboarding related components. In this Part 1.2, we review the components structure in the /settings route.

1. useCreateAppRouter.tsx

2. SettingsRoutes.tsx

There is a lot more in the settings route, but our goal is to check the consistent patterns used, instead of going through all the components.

useCreateAppRouter.tsx

In the twent-front, AppRouter.tsx returns the following:

 return (
    <RouterProvider
      router={useCreateAppRouter(isFunctionSettingsEnabled, isAdminPageEnabled)}
    />
  );

Here useCreateAppRouter.tsx is defined at @/app/hooks/useCreateAppRouter and has all the routes defined.

export const useCreateAppRouter = (
  isFunctionSettingsEnabled?: boolean,
  isAdminPageEnabled?: boolean,
) =>
  createBrowserRouter(
    createRoutesFromElements(
      <Route
        element={<AppRouterProviders />}
        // To switch state to `loading` temporarily to enable us
        // to set scroll position before the page is rendered
        loader={async () => Promise.resolve(null)}
      >
        <Route element={<DefaultLayout />}>
          <Route path={AppPath.Verify} element={<VerifyLoginTokenEffect />} />
          <Route path={AppPath.VerifyEmail} element={<VerifyEmailEffect />} />
          <Route path={AppPath.SignInUp} element={<SignInUp />} />

However, I could not find the code for /people or /companies. May be this is closed source. Sometimes OSS projects do these, not all parts of can be open.

SettingsRoutes.tsx

In the useCreateAppRouter.tsx, at L66, SettingsRoute is defined as below:

<Route
  path={AppPath.SettingsCatchAll}
  element={
    <SettingsRoutes
      isFunctionSettingsEnabled={isFunctionSettingsEnabled}
      isAdminPageEnabled={isAdminPageEnabled}
    />
  }
/>

Because settings has so many nested routes, there is a separate component containing all the settings routes.

import { SettingsRoutes } from '@/app/components/SettingsRoutes';

I considered SettingsProfile and SettingsWorkspace to study the components structure and patterns.

You will learn more about these in Part 1.3.

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

I spent 200+ hours analyzing Supabase, shadcn/ui, LobeChat. Found the patterns that separate AI slop from production code. Stop refactoring AI slop. Start with proven patterns. Check out production-grade projects at thinkthroo.com

References:

1. twenty/packages/twenty-front/…/components/AppRouter.tsx

2. twenty/packages/twenty-front/…/hooks/useCreateAppRouter.tsx

3. twenty/packages/twenty-front/…/components/SettingsRoutes.tsx#L409

4. twenty/packages/twenty-front/…/SettingsWorkspace.tsx#L13

5. twenty/packages/twenty-front/…/SettingsProfile.tsx#L20