project
│
├─── src
│ ├─── api
│ ├─── components
│ | ui
│ | layouts
│ | views
│ ├─── models
│ ├─── pages
│ └─── utils
│ .env.example
│ .gitignore
│ .prettier
│ index.html
│ manifest.json
│ package.json
│ postcss.config.js
│ staticwebapp.config.json
│ tailwind.config.js
│ tsconfig.json
│ vite.config.ts
- All folders should be camel case UNLESS the Folder is the name of a React component. Though the children should be named index.tsx - this is so we can introduce individual testing files later if needed.
├─── components
| ├─── ui
├─── LoadingScreen
| index.tsx
We will utilizes TanStack/React-Query - This allows us to not need general state management.
These should be stateless ui elements that are used through out the application.
These should be the overarching component wrappers around the application, things like nav bars and search bars should be managed here.
These are stateful ui elements, typically expecting a greater context - such as an id on a route.
An example: The SearchBar component will use query parameters in the url.
This is where we should keep types, interfaces, and zod and yup schemas. Try to keep the naming convetion of every "Object" or "domain" gets a single folder.
An example:
Try to the naming convention of /pagename/subcomponent/....
.
An example:
pages
Home <- `/`
Clients <- `/Clients`
index.tsx
Client <- `/Clients/{id}` This route expects a id
index.tsx
Login <- `/Login`
This is where helper functions should go. Try to keep the naming convetion of every "Object" or "domain" gets a single folder.
This is where all your providers and services should be initialized.