Open jtucholski opened 1 week ago
@calisio What do you think about a folder structure like this? Maybe it gets the conversation started.
Most of the application is grouped by features. We could define Pages and Components for each feature group. Here's an example:
/src
/features
/dashboard
/pages
- Dashboard.tsx
- AdminDashboard.tsx
- StudentDashboard.tsx
/components
- StatsCard.tsx
/user-management
/pages
- UserActivity.tsx
- ManageUsers.tsx
/components
- UserTable.tsx
- UserActivityMap.tsx
/resources
/pages
- ResourcesManagement.tsx
/components
- ResourcesCategoryCard.tsx
- ResourcesSideBar.tsx
- EditResourceCollectionForm.tsx
/provider-platform
/pages
- ProviderPlatformManagement.tsx
/components
- AddProviderForm.tsx
- MapUserForm.tsx
- ShowImportedUsers.tsx
/auth
/pages
- Login.tsx
- ResetPassword.tsx
- Consent.tsx
/components
- LoginForm.tsx
- ResetPasswordForm.tsx
- ConsentForm.tsx
/notifications
/components
- NotificationCard.tsx
- NotificationSideBar.tsx
/errors
/pages
- Unauthorized.tsx
- Error.tsx
/common
/components
- Navbar.tsx
- Pagination.tsx
- Modal.tsx
- ThemeToggle.tsx
- Toast.tsx
/charts
- MonthActivityChart.tsx
- MilestonesBarChart.tsx
- TopProgActivityPieChart.tsx
/inputs
- TextInput.tsx
- DropdownInput.tsx
- SearchBar.tsx
- SubmitButton.tsx
/pills
- GreyPill.tsx
- RedPill.tsx
- DarkGreenPill.tsx
- TealPill.tsx
- YellowPill.tsx
- LightGreenPill.tsx
Files could be better organized in the frontend by the use of folders. We should research a best way to organize these as our codebase will only grow from here.
Moreover, to make importing components from the same folder simplified, we should include an
index.js
file, especially in the/Components
folder. This should export all components in that folder so they can then be imported in the same line wherever they are used.