💡 Describe the Feature
Refactor the src folder structure to improve organization, scalability, and maintainability. This involves creating separate directories for pages, reusable components, and context providers to create a clear separation of concerns.
🤷♂️ Why is this Feature Needed?
Currently, all components—whether they are full pages, reusable UI elements, or state management logic—are mixed together in the src/components directory. As the application grows, this flat structure becomes difficult to navigate and maintain. A more organized folder structure makes the codebase cleaner, more intuitive for new contributors to understand, and easier to scale with new features.
🧩 Additional Context
I propose the following new structure within the src folder:
src/pages/: For top-level components that represent a full page or route.
HomePage.jsxDashboard.jsxGoalsPage.jsxAboutPage.jsxContactPage.jsx
src/components/: For smaller, reusable components that are used across different pages.
Footer.jsxGoalCard.jsxAddGoalModal.jsxAddTransactionModal.jsxConfirmationModal.jsxContributeToGoalModal.jsxTransactionPDF.jsx
src/context/: For all React Context providers.
TransactionContext.jsxCurrencyContext.jsx
🙋 Your Details
💡 Describe the Feature
Refactor the
srcfolder structure to improve organization, scalability, and maintainability. This involves creating separate directories for pages, reusable components, and context providers to create a clear separation of concerns.🤷♂️ Why is this Feature Needed?
Currently, all components—whether they are full pages, reusable UI elements, or state management logic—are mixed together in the
src/componentsdirectory. As the application grows, this flat structure becomes difficult to navigate and maintain. A more organized folder structure makes the codebase cleaner, more intuitive for new contributors to understand, and easier to scale with new features.🧩 Additional Context
I propose the following new structure within the
srcfolder:src/pages/: For top-level components that represent a full page or route.HomePage.jsxDashboard.jsxGoalsPage.jsxAboutPage.jsxContactPage.jsxsrc/components/: For smaller, reusable components that are used across different pages.Footer.jsxGoalCard.jsxAddGoalModal.jsxAddTransactionModal.jsxConfirmationModal.jsxContributeToGoalModal.jsxTransactionPDF.jsxsrc/context/: For all React Context providers.TransactionContext.jsxCurrencyContext.jsx🙋 Your Details