Directory Format

/frontend/src/Routes.tsx

• includes routes to pages

/frontend/src/components/<componentName>

• create folder for a component in components folder i.e. Dialog folder

• include in folder:

  • .tsx file for component

  • style.ts for component

  • .test.tsx file for testing

/frontend/src/helpers

• add files where calculations or helper functions are made eg calculations for average ratings

/frontend/src/logic/functions

• create files for functions with API requests

• i.e. getUser.function.ts

/frontend/src/logic/redux/*

• For every new reducer added to /reducers, make sure the slice is included in ./store.ts and in the helper rtl.tsx for testing.

• New reducers should be created based on a “category” of the API and data logic (e.g. courses, reviews .. etc)

• In each new slice you handle the API call and define the behaviour of the redux state depending on whether the call is successful or not.

/frontend/src/pages/<pageName>

• create folder for each page i.e. HomePage folder

• include in folder:

  • .tsx file for page

  • .test.tsx file for tests

  • .style.ts file for style

  • Folders for bigger sections of the page i.e. LoginDialog