Folder structure and Practices

Folder structure

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

• Images (such as the WDCC logo) go into ./web/public/assets. In the actual code, the file path of public assets is /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 git cheatsheet if you're unfamiliar with git practices.
• 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
• Any changes you make will be automatically updated/refreshed on the website everytime you save a file, as long as you already have the backend and frontend running (like we did in the first meeting)