Project Structure Documentation for React + Redux Application

This document outlines the file structure and organization of your React + Redux 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/
┃ ┃ ┃ ┣ <module>/
┃ ┃ ┃ ┃ ┣ <Table>FormModal/
┃ ┃ ┃ ┃ ┗ <Table>ListView/
┃ ┃ ┗ ui/
┃ ┃   ┣ CircularProgress/
┃ ┃   ┣ DataGrid/
┃ ┃   ┣ DateTimePickers/
┃ ┃   ┣ Header/
┃ ┃   ┣ ModalWithTitle/
┃ ┃   ┣ PageContainer/
┃ ┃   ┣ PageLoader/
┃ ┃   ┣ Sidebar/
┃ ┣ constants/
┃ ┃ ┣ api.ts
┃ ┃ ┣ appRoutes.ts
┃ ┃ ┣ common.ts
┃ ┣ hook/
┃ ┃ ┗ useUpdateEffect.ts
┃ ┣ layout/
┃ ┃ ┣ Auth/
┃ ┃ ┣ Dashboard/
┃ ┣ network/
┃ ┃ ┣ <Resource>Services.ts
┃ ┃ ┣ apiClient.ts
┃ ┃ ┣ authServices.ts
┃ ┣ pages/
┃ ┃ ┣ Home/
┃ ┃ ┣ NotFoundPage/
┃ ┃ ┣ account/
┃ ┃ ┃ ┗ MyAccount/
┃ ┃ ┣ auth/
┃ ┃ ┃ ┣ ForgotPassword/
┃ ┃ ┃ ┣ Login/
┃ ┃ ┃ ┣ Register/
┃ ┃ ┃ ┣ ResetPassword/
┃ ┃ ┃ ┗ VerifyEmail/
┃ ┃ ┣ modules/
┃ ┃ ┃ ┣ <Resource>/
┃ ┣ routes/
┃ ┃ ┗ AppRoutes.tsx
┃ ┣ store/
┃ ┃ ┣ slices/
┃ ┃ ┃ ┣ account/
┃ ┃ ┃ ┣ auth/
┃ ┃ ┃ ┣ <Resource>/
┃ ┃ ┃ ┃ ┣ actions.ts
┃ ┃ ┃ ┃ ┣ <Resource>Slice.ts
┃ ┃ ┃ ┃ ┣ operations.ts
┃ ┃ ┃ ┃ ┗ selectors.ts
┃ ┃ ┗ store.ts
┃ ┣ 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.
    • <Resources>: Components related to the <Resources> 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.
  • useUpdateEffect: Hook same as useEffect just different is that, it didn't call on init.
• 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.
  • <Resource>Services.ts: Defines service functions for specific Resource (all CRUD operations).
• 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 data modules.
    • <Resource>: Pages related to the <Resource> data module.
• store: Manages application state using Redux.
  • slices: Houses individual slices of state for different parts of the application. We internally use @redux-toolkit
    • actions.ts: Contain all async actions for slices
    • operations.ts: Export all actions from actions.ts and <Resource>Slice.ts
    • <Resource>Slice.ts This Redux toolkit slice manages data related to a generic resource including fetching lists, details, dropdowns, updating pagination, and resetting individual states. It handles loading, error, and success states for each action.
    • selector.ts This file provides selectors to extract specific data slices (lists, details, dropdowns) from resource specific slice.
• 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