This document outlines the folder structure and usage conventions for our React TypeScript project.

Overview

The project is divided into the following main folders inside the src folder:

1. modules
2. common
3. blocks

Each folder has a specific purpose and contains subfolders and files organised by functionality and type.

Folder Structure

src

• Purpose: The root folder for all source code of the application.
• Contains:
  • Subfolders: modules, common, blocks

modules

• Purpose: Contains separate modules for every webpage.
• Structure:
  • Homepage: Example module for the homepage.
    • components: Contains subcomponents specific to the homepage.
      • Header.tsx: Header component for the homepage.
      • SideBar.tsx: Sidebar component for the homepage.
    • HomePage.constants.ts: Constants specific to the homepage.
    • HomePage.hooks.ts: Custom hooks for the homepage.
    • HomePage.styled.ts: Styled-components for the homepage.
    • HomePage.tsx: Main container for the homepage.
    • HomePage.types.ts: Type definitions for the homepage.
    • HomePage.utils.ts: Utility functions for the homepage.
    • index.ts: Entry point for homepage-related exports.

common

• Purpose: Contains reusable components, constants, hooks, utilities, and styles used across the application.
• Structure:
  • components: Reusable components shared across different modules.
    • SomeCommonComponent.tsx: Example of a shared component.
  • hooks: Reusable hooks shared across different modules.
    • useTestHook.ts: Example of a shared hook.
  • utils: Reusable utils shared across different modules.
    • someUtilFunction.ts: Example of a shared component.
  • common.constants.ts: Common constants used throughout the application.
  • index.ts: Entry point to export all common utilities.

blocks

• Purpose: Contains design system components with consistent structure.
• Structure:
  • Box: Example component in the design system.
    • Box.tsx: Main component file.
    • Box.constants.ts: Constants used by the Box component.
    • Box.types.ts: Type definitions for the Box component.
    • Box.utils.ts: Utility functions for the Box component.
    • Box.test.tsx: Tests for the Box component.
    • Box.stories.tsx: Storybook stories for the Box component.
    • index.ts: Entry point for the Box component exports.