Folder structure and Practices

Folder structure

./web contains the frontend, while ./api contains the backend.

• Images (such as the WDCC logo) go into ./web/src/assets
• Components (such as a navbar, sidebar, etc.) go into ./web/src/components
• Pages (e.g. Main page, Dashboard) go into ./web/src/pages
• Styling goes in ./web/src/styles
  • Styles specific to a component go into ./web/src/styles/componentStyles
  • Styles for pages go to ./web/src/styles/pageStyles
  • index.css contains styles that are similar across all components e.g. the Work Sans font is imported and defined here
    • Note that index.css styling is overridden by more specific styles in componentStyles or pageStyles

Making a new component

• Have a read of the
• Make a new .tsx file in camel case with the name of the component capitalised e.g. SideNavbar.tsx
• Make a new .css file under the componentStyles folder e.g. SideNavbar.css
• Having separate CSS files prevents merge conflicts, although it will look a bit bulky
• You can test out the look of your component by adding a route in App.tsx, which just returns your component. Just remember to remove this before you make your PR