Organize components into folders & export components in index.js file

[jtucholski]

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.

[jtucholski]

@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

[calisio]

@jtucholski Initially I really liked the idea of this. After thinking about it more, I had a few hesitations. One hesitation is that a lot of our components will be moving around from page to page as we evaluate what we need/don't need, so putting them in folders that separate them by page seems inefficient. Because React really prioritizes creating components that are reusable across pages, I think we should keep a similar structure as to what we have now but with a bit more refinement within the existing folders (while also adding a few more folders). I did some research on common folder structures for larger scaled projects, and I liked this one . With the update to the routes that has partially already happened/will continue to develop, I liked the idea of a /Data folder, /Routes, /Context, etc. I think these will be great as the platform continues to grow. In terms of organizing the /Components folder a bit more, we could take some inspiration from what is included in that article too. I think we are off to a good start with /forms, /inputs, /pills, but we could also add /charts like you mentioned, /cards, /notifications, /toggle and others. I also think we should think about coming up with universal naming conventions so things are easier to find (for example, I like how all pills have "Pill" in their filename).