Frontend Technical Debt

[MohammedMaaz]

Since we are moving fast with feature development, it's crucial to be aware of the accumulated technical debt.

We can use this place to enlist all technical debt items related to the app's frontend. This will later serve as a backlog source for the issues under this project.

1. Introduce a global state management library (preferably redux toolkit) to handle global state and effects. (High)
2. Centralized place to define theme variables (colors, fonts, boredrRadius, etc.) and apply through antd. (Med)
3. Replace inline styling inside components with useStyles from react-jss. (Med)
4. Introduction of a centralized global error handling mechanism. For exceptions raised by components, use at least one global ErrorBoundary, for exceptions inside RTK thunks, use a global error handler middleware. (High)
5. Restructure folder convention. Move to module-based structure. (For ex: a folder named "Testsets" will have subfolders like pages, components, hooks, helpers, services, types, redux, etc. (Med)
6. Refactor components to Decouple UI code from data fetching and effects handling. Can be done after the introduction of RTK (redux toolkit). (Med)
7. Add missing types. Modify components to be type-safe and avoid TS errors. (High)
8. Avoid hardcoding of text strings. Translation files can be used along with a library like i18n. This will help if in the future we look to introduce new languages. (Low)
9. Write E2E test cases for core features (Testsets, Playground, Evaluations etc.). (Med)
10. Setup integration and unit testing of components using Jest + (Enzyme or React testing library). (Low)
11. Unit and integration tests for components. (Low)
12. Configure eslint rules to use best practices for react and typescript (Low)

This is an evolving list. Feedback from the Agenta community is encouraged regarding any modifications or additions.

[MohammedMaaz]

13. Convert the app to an installable PWA

[aakrem]

14. Move all logic preforming api requests to the appropriate location.
    we have api.ts but we still have some requests here and there. (high)