Project Structure Documentation for React + React Query Application

This document outlines the file structure and organization of your React + React Query application, providing insights into different sections and their purposes.

project root/
┣ .vscode/
┃ ┗ settings.json
┣ public/
┃ ┗ .gitkeep
┣ src/
┃ ┣ components/
┃ ┃ ┣ account/
┃ ┃ ┃ ┣ ChangePasswordFormModal/
┃ ┃ ┃ ┣ MyAccountFormModal/
┃ ┃ ┣ action/
┃ ┃ ┃ ┣ Alert/
┃ ┃ ┃ ┣ DeleteDialog/
┃ ┃ ┃ ┣ GridAction/
┃ ┃ ┣ auth/
┃ ┃ ┃ ┣ AuthenticateGuard/
┃ ┃ ┃ ┣ UnAuthenticateGuard/
┃ ┃ ┣ module/
┃ ┃ ┃ ┣ <Resource>/
┃ ┃ ┃ ┃ ┣ <Resource>FormModal/
┃ ┃ ┃ ┃ ┗ <Resource>ListView/
┃ ┃ ┗ ui/
┃ ┃   ┣ CircularProgress/
┃ ┃   ┣ DataGrid/
┃ ┃   ┣ DateTimePickers/
┃ ┃   ┣ Header/
┃ ┃   ┣ ModalWithTitle/
┃ ┃   ┣ PageContainer/
┃ ┃   ┣ PageLoader/
┃ ┃   ┣ Sidebar/
┃ ┣ constants/
┃ ┃ ┣ api.ts
┃ ┃ ┣ appRoutes.ts
┃ ┃ ┣ common.ts
┃ ┣ hook/
┃ ┃ ┣ useAuthenticatedMutation.ts
┃ ┃ ┣ useAuthenticatedQuery.ts
┃ ┃ ┗ useUpdateEffect.ts
┃ ┣ layout/
┃ ┃ ┣ Auth/
┃ ┃ ┣ Dashboard/
┃ ┣ network/
┃ ┃ ┗ apiClient.ts
┃ ┣ pages/
┃ ┃ ┣ Home/
┃ ┃ ┣ NotFoundPage/
┃ ┃ ┣ account/
┃ ┃ ┃ ┗ MyAccount/
┃ ┃ ┣ auth/
┃ ┃ ┃ ┣ ForgotPassword/
┃ ┃ ┃ ┣ Login/
┃ ┃ ┃ ┣ Register/
┃ ┃ ┃ ┣ ResetPassword/
┃ ┃ ┃ ┗ VerifyEmail/
┃ ┃ ┣ modules/
┃ ┃ ┃ ┣ <Resource>/
┃ ┣ queries/
┃ ┃ ┣ accountQueries.ts
┃ ┃ ┣ authQueries.ts
┃ ┃ ┗ <Resource>Queries.ts
┃ ┣ routes/
┃ ┃ ┗ AppRoutes.tsx
┃ ┣ types/
┃ ┃ ┣ account.ts
┃ ┃ ┣ api.ts
┃ ┃ ┣ auth.ts
┃ ┃ ┣ error.ts
┃ ┃ ┣ <Resource>.ts
┃ ┣ utils/
┃ ┃ ┣ cookies.ts
┃ ┃ ┣ error.ts
┃ ┣ App.tsx
┃ ┣ main.tsx
┣ .env

Top-Level Folders:

• .vscode: Stores settings specific to your Visual Studio Code environment.
• public: Contains static assets served directly by the web server, typically including index.html and favicons.
• src: Houses the main application source code.

src Sub Folders:

• components:

  • account: Components related to user account management.

    • ChangePasswordFormModal: Handles changing user passwords.
    • MyAccountFormModal: Manages user account details.

  • action: Reusable action components.

    • Alert: Displays informational or error messages.
    • DeleteDialog: Confirms deletion actions.
    • GridAction: Actions within data grids (like edit, delete).

  • auth: Authentication-related components.

    • AuthenticateGuard: Protects routes requiring authentication.
    • UnAuthenticateGuard: Redirects logged-in users to relevant pages.

  • module: Components specific to different data modules.

    • <Resource>: Components related to the <Resource> data module.
      • <Resource>FormModal Creates or edits <Resource> data.
      • <Resource>ListView Displays and interacts with a list of <Resource> data.

  • ui: General user interface components.

    • CircularProgress: Spinner for loading states.
    • DataGrid: Editable data grid component.
    • DateTimePickers: Date and time input components.
    • Header: Application header component.
    • ModalWithTitle: Reusable modal component with a title.
    • PageContainer: Layout container for pages.
    • PageLoader: Loader component for page loading.
    • Sidebar: Main application sidebar.

• constants: Stores global constants and configuration values.

  • api.ts: API endpoint URLs and related constants.
  • appRoutes.ts: Application route definitions.
  • common.ts: Other frequently used constants.

• hook: Custom React hooks for advanced logic.

  • useAuthenticatedMutation: Hook for authenticated mutations.
  • useAuthenticatedQuery: Hook for authenticated queries.
  • useUpdateEffect: Hook same as useEffect but not call on initial component load.

• layout: Different application layouts.

  • Auth: Layout for authentication pages.
  • Dashboard: Layout for the main application dashboard.

• network: Handles network requests and API interactions.

  • apiClient.ts: API client for making requests to API endpoints.

• pages: Top-level application pages.

  • Home: Home page of the application.
  • NotFoundPage: Page displayed when a route is not found.
  • account: Pages related to user account management.
    • MyAccount: My account page.
  • auth: Pages for authentication (login, register, etc.).
  • modules: Pages specific to different <Resource> data modules.
    • <Resource>: Pages related to the <Resource> data module.

• queries: Defines React Query queries for fetching data.

  • accountQueries.ts: Queries related to user account data.
  • authQueries.ts: Queries related to authentication data.
  • <Resource>Queries.ts: Queries specific to the <Resource> data module.

• routes: Defines application routes and redirects.

  • AppRoutes.tsx: Main application route configuration.

• types: Type definitions for various data structures.

  • account.ts: Types related to user account data.
  • api.ts: Types related to API responses and requests.
  • auth.ts: Types related to authentication data.
  • error.ts: Types for error handling.
  • <Resource>.ts: Types related to the <Resource> data module