Frontend Development Standards#

#Dependency Management (pnpm)

• Strictness: Leverage pnpm's strict dependency management to ensure a more deterministic node_modules structure and efficient disk space usage.
• Workspaces: When using a monorepo approach, configure pnpm workspaces to streamline dependency management across multiple frontend packages.
• Auditing: Regularly audit frontend dependencies for known vulnerabilities using pnpm audit.

#API Communication (Axios)

• Axios Instance: Create a centralised Axios instance for API calls to apply common configuration (base URL, headers, interceptors).
• Interceptors: Use Axios interceptors to:
  • Add authentication tokens to outgoing requests.
  • Handle global error responses (e.g., display a notification for 401 Unauthorized).
  • Log requests/responses in development environments.
• Error Handling: Centralise API error handling in Axios interceptors or custom utility functions to provide consistent user feedback.

#React and Component Standards

• Function Components & Hooks: Prefer function components with React Hooks over class components for new development.
• Props:
  • Define interface or type for component props to ensure type safety.
  • Destructure props at the component entry point for clarity.
• State Management (Redux):
  • Use Redux Toolkit for efficient, boilerplate-reduced Redux development.
  • Use createSlice to organise Redux logic into "slices" (feature-specific reducers, actions, and selectors).
  • Follow the "ducks" pattern or "slices" approach to co-locate Redux logic.
• Component Composition: Break down complex UIs into smaller, reusable, single-responsibility components.
• Ant Design:
  • Leverage Ant Design components for consistent UI/UX.
  • Use CSS-in-JS solutions to consistently customise Ant Design themes and styles across the application if needed.
• Accessibility: Design and implement components with web accessibility (a11y) in mind from the start.