Development Guidelines

Codebase-Specific Guidelines

These guidelines reflect patterns and decisions specific to our frontend codebase and must be followed unless there is a strong, reviewed reason not to.

Routing & Code Splitting

• All newly added routes must use lazy loading
• Routes requiring access control should use AuthRoute with appropriate labUser and labFeature checks, where applicable

Multi-Build Routing (react-app-rewired)

Our frontend supports multiple build targets using react-app-rewired. Each build either loads a single module or the full SPA.

• Single-module builds load only one module and rely on that module’s routing configuration.
• SPA build (CrelioDashboard) loads all modules together and acts as the unified application shell.

Build entry points are defined in app-config.js:

const allBuilds = {
  crm: "src/modules/crm/index.tsx",
  Admin: "src/modules/Admin/index.tsx",
  Finance: "src/modules/Finance/index.tsx",
  LabAdmin: "src/modules/LabAdmin/index.tsx",
  inventory: "src/modules/inventory/index.tsx",
  Accession: "src/modules/Accession/index.tsx",
  Operations: "src/modules/Operations/index.tsx",
  DoctorLogin: "src/modules/DoctorLogin/index.tsx",
  crmDashboard: "src/modules/crmDashboard/index.tsx",
  Registration: "src/modules/Registration/index.tsx",
  ReferralLogin: "src/modules/ReferralLogin/index.tsx",
  MarketingLogin: "src/modules/MarketingLogin/index.tsx",
  CrelioDashboard: "src/modules/CrelioDashboard/index.tsx",
  centerdashboard: "src/modules/centerdashboard/index.tsx",
  OrganisationLogin: "src/modules/OrganisationLogin/index.tsx",
};

Adding a New Route (Mandatory Dual Registration)

• Module-level routing (single-module build)
  • Add the route in the module’s routing file so it works correctly in the module-specific build.

  src/modules/<ModuleName>/routes.tsx

• SPA routing & menu configuration (CrelioDashboard)
  • Add the same route in the corresponding RoutesAndMenus file so it is available in the SPA build.

  src/modules/CrelioDashboard/RoutesAndMenus/<module>RoutesAndMenu.tsx

Example (Operations module):

# Module-level routing (single-module build)
src/modules/Operations/routes.tsx

# SPA routing & menu configuration (CrelioDashboard)
src/modules/CrelioDashboard/RoutesAndMenus/operationsRoutesAndMenu.tsx

JSX & Layout

• Avoid unnecessary wrapper <div> elements
• Avoid excessive usage of layout components such as <Row> / <Col> when not required
• Be mindful that certain layout components introduce implicit margin and padding

State Management Decisions

• Choose consciously between local state (useState) and Redux
• Data required only within a component or between a parent and its immediate children (one-level nesting) usually does not require Redux
• Avoid premature global state introduction

Redux Usage

• Avoid using genericState for large or complex data structures (objects or arrays of objects)
• For substantial or domain-specific data, define a dedicated Redux slice with:
  • Clearly typed state
  • Explicit actions
  • Predictable reducers
• genericState should be used only for:
  • Temporary flags
  • Quick, short-lived state
• Where possible, ensure genericState entries are cleaned up on component unmount or after logic completion

Component Size & Responsibility

• Files containing main UI rendering logic (.jsx / .tsx) should be finite and readable
• As a guideline, keep such files within ~250–300 lines
• Complex data transformation, mapping, or conditional logic should be extracted into:
  • Helper functions
  • Custom hooks
  • Utility files
• Rendering logic should be easy to visually identify, allowing new contributors to quickly understand:
  • Where rendering starts
  • Where rendering ends