Aggie's codebase is built on pretty old legacy code (in 2024 terms). be careful when pulling from tutorials as they may not work for our stack. the best way is to directly read documentation for the versions we are using.
The primary limitation is that the React SPA is built using react-scripts, an old, abandoned project. this limits our react version to 17 and typescript to 4.5.
i've included docs specific to our versions. make sure you are reading the right docs as the latest versions work quite different from ours
The general rule of thumb is that folders define scope. Place files as near as they can be to where those files are called.
eg. the file useReportsMutations.ts exists in /pages/Reports/, as it's only used within that folder even though its not a page component.
./
├── src/
│ ├── api/
│ │ └── api name/
│ │ ├── /index.ts -> axios endpoints to backend
│ │ └── /types.ts -> type definitions for endpoint responses
│ ├── components/
│ │ └── global components
│ ├── fonts/ -> here instead of /public due to annoying react-scripts limitation
│ ├── hooks/
│ ├── pages/ -> file structure should match router structure
│ ├── utils/ -> pure ts utility functions
│ ├── app.tsx -> router logic and session check logic
│ ├── index.tsx -> react entry file
│ ├── /objectTypes.d.ts -> [LEGACY] old type definition file.
│ └── /helpers.tsx -> [LEGACY] old helpers file.
├── /public -> static files
├── tailwind.config.js
├── package.json
└── .env
as this is legacy code, there are many outdated / unused / irrelevent code. To insure nothing breaks, make sure to keep a copy of the old code. if names conflict, rename the old file with _old, or _untyped. We will eventually do cleanup during downtime.