App bootstrap

​

Stage 1 — src/index.tsx

root.render(
  <ReduxProvider store={store}>
    <PersistGate loading={null} persistor={persister}>
      <ConfigProvider>
        <App />
      </ConfigProvider>
    </PersistGate>
  </ReduxProvider>
);

whitelist: ['users']

​

Stage 2 — src/App.tsx

1. ThemeCustomization — MUI theme, palette, typography
2. RTLLayout — RTL support wrapper
3. Locales — react-intl messages
4. ScrollTop — scroll restoration on route change
5. JWTProvider — auth state, token, login/logout
6. RouterProvider — router from routes/index.tsx
7. Snackbar — global toast notifications

<ThemeCustomization>
  <RTLLayout>
    <Locales>
      <ScrollTop>
        <AuthProvider>
          <>
            <RouterProvider router={router} />
            <Snackbar />
          </>
        </AuthProvider>
      </ScrollTop>
    </Locales>
  </RTLLayout>
</ThemeCustomization>

​

JWT initialization side effects

1. Reads serviceToken from localStorage
2. Validates JWT expiry with jwt-decode
3. Calls GET /user/verifyToken to restore user
4. Calls getSocket(userId) to connect Socket.IO

​

Router creation

const router = createBrowserRouter([LoginRoutes, MainRoutes]);

​

Default landing path

​

Related docs

• JWT context
• State management
• Routing