Folder Structure

If you are new to the repo, do take some time reading this section in order to familiarize yourself with the structure of the project as well as the responsibilities of each folder so that you can quickly learn you way around the codebase.

skylab-frontend/
├─ .github/
├─ .husky/
├─ components/
├─ helpers/
├─ hooks/
├─ pages/
├─ public/
├─ styles/
├─ types/
├─ ...other config files

---

1. .github/

• Contains .yml files that are responsible for configuring GitHub actions
• These actions help to run automated checks such as linting, formatting and testing to ensure code quality and consistency

2. .husky/

• Contains files needed for Git hooks
• These Git hooks help to run automated scripts upon any actions to the codebase
• We use pre-commit hooks to run linting and formatting to ensure that code can only be committed after having passed these checks.

3. components/

• Contains all the React components for the project
• Components should follow the following rules and structure
  • Each component should have its own dedicated folder
  • Subcomponents' (components that are ONLY used by the parent component) folders should be in the parent's folder
  • All related files (eg. styles, tests and helper functions) that are ONLY used by the component should be in the same folder
  • Component folders should have be capitalized
  • Folders grouping related components should NOT be capitalized
  • An index.tsx file should be use to tunnel the component out of the folder via default export
  • Example:

  components/
  ├─ buttons/ # Folder grouping related components
      ├─ Button/ # Parent folder
          ├─ index.tsx
          ├─ Button.tsx
          ├─ Button.styles.tsx
          ├─ Button.test.tsx
          ├─ Button.helpers.tsx # Helper functions
          ├─ SubComponentName # Child folder
            ├─ index.tsx
            ├─ SubComponentName.tsx
            ├─ ...
      ├─ AnotherButton/
        ├─ index.tsx
        ├─ AnotherButton.tsx
        ├─ ...
  

4. helpers

• Contains helper functions as well as constants that are used across the project
• Should be grouped according to their function (eg. date.ts should be for all date-related helper functions, etc.)

5. hooks

• Contains custom hooks that are used across the project
• These hooks are usually abstractions and help to reduce LoC and improve readability where they are used
• For more information on certain custom hooks, do refer to the Abstractions section

6. pages

• Contains pages that are rendered
• Next.js utilizes file-system based page routing, (eg. pages/index.tsx routes to /; pages/sign-in.tsx routes to /sign-in)
• For more information on this as well as dynamic routing, do refer to the Next.js Docs

7. public

• Contains assets that are not processed by webpack and are copied into the build folder untouched
• Should be used to contain images and fonts
• For more information, do refer to the React Official Docs

8. styles

• Contains global styles that are used across the application

9. types

• Contains types, interfaces and enums declared and utilized across the project
• Related types should be contained within the same file and named accordingly (eg. all User related types should be contained in User.ts)