Bulletproof React

Use MSW to create a mocked server that intercepts HTTP requests. This is useful for:

1. Prototyping: Building frontend features before the backend is ready.
2. API Design: Defining endpoints and business logic within MSW handlers.
3. Integration Testing: Making actual HTTP calls that are intercepted by the service worker, providing a more realistic test environment than manual fetch mocks.

For granular control where roles are insufficient (e.g., allowing only the owner of a resource to edit it), use Permission-Based Access Control (PBAC).

Instead of passing roles to the RBAC component, you pass a policy check. This allows you to evaluate dynamic conditions (like comment.authorId === currentUser.id) to determine access.

<RBAC policy={(user) => user.id === comment.authorId}>
  <DeleteCommentButton />
</RBAC>

Use React Error Boundaries to prevent application crashes when a component fails. Instead of using a single global error boundary, place multiple error boundaries at different levels of your component tree. This containment strategy ensures that an error in one specific feature (e.g., a discussion thread) does not disrupt the entire application's functionality.

For a practical example of localized error handling, see the implementation in discussion.tsx.

/* See implementation in: ../apps/react-vite/src/app/routes/app/discussions/discussion.tsx */

RBAC determines access by assigning specific roles (e.g., USER, ADMIN) to users. To protect UI elements or routes using RBAC, use the RBAC component and pass the allowedRoles prop.

Example usage for restricting a component to specific roles:

<RBAC allowedRoles={['ADMIN']}>
  <DeleteDiscussionButton />
</RBAC>

Application state manages global concerns like notifications, global modals, or color modes. To maintain performance, localize this state as closely as possible to the components that need it rather than making everything global by default.

Recommended solutions for Application State:

• React Context + Hooks
• Redux + Redux Toolkit
• MobX
• Zustand
• Jotai
• XState

There are several ways to style a React application. Note that if you are using React Server Components (RSC), you must use a zero-runtime styling solution.

Common Styling Options

• Tailwind CSS: Utility-first CSS framework.
• Vanilla-extract: Type-safe, zero-runtime CSS-in-JS.
• Panda CSS: Type-safe, build-time CSS-in-JS.
• CSS Modules: Scoped CSS using standard CSS files.
• Styled-components / Emotion: Runtime CSS-in-JS solutions.

Component-as-Code (Hybrid)

These provide predefined components that are provided as code rather than as an installed package, allowing for deep customization:

• ShadCN UI
• Park UI

The application is built around a hierarchical structure of Users, Teams, Discussions, and Comments. Understanding these relationships is key to navigating the application logic:

• User: Has one of two roles:
  • ADMIN: Can create/edit/delete discussions, create/delete all comments, delete users, and edit their own profile.
  • USER: Can edit their own profile and create/delete their own comments.
• Team: A group consisting of one admin and multiple users who participate in discussions.
• Discussion: A topic created by members of a team.
• Comment: Individual messages within a discussion.

The project relies on a combination of three tools to ensure code quality and consistency:

1. ESLint: Used for linting JavaScript/TypeScript to identify errors and enforce coding standards via .eslintrc.js.
2. Prettier: Used for consistent code formatting. It is recommended to enable "format on save" in your IDE. Prettier can be integrated with ESLint to handle both formatting and linting.
3. TypeScript: Used to catch type-related bugs and assist during large refactoring processes. When refactoring, prioritize updating type declarations first, then resolving the resulting TypeScript errors.

Server Cache State refers to remote data stored locally on the client for future use. While you can use a general state manager like Redux, it is more efficient to use specialized caching libraries designed for server state.

Recommended libraries for Server Cache State:

• TanStack Query (react-query): For REST and GraphQL.
• SWR: For REST and GraphQL.
• Apollo Client: For GraphQL.
• urql: For GraphQL.
• RTK Query: Part of Redux Toolkit.

When implementing authentication in a Single Page Application (SPA), you must decide where to store the JSON Web Token (JWT).

• Application State: Most secure, but the token is lost on page refresh.
• localStorage/sessionStorage: Common, but vulnerable to Cross-Site Scripting (XSS) attacks which can lead to token theft.
• Cookies (Recommended): Storing tokens in cookies configured with the HttpOnly attribute is the most secure method because they are inaccessible to client-side JavaScript, mitigating XSS risks.

In this project, js-cookie is used for cookie management, assuming the backend enforces the HttpOnly attribute.