Front-end Technical Debt Reduction.md

Front-end Technical Debt Reduction

Testing

Components must be tested behaviourally before any changes can be made.

Consistent state management

• Maintain consistent implementation of component state, redux store and cookies/session storage
• Make difference between component state and redux store more explicit (naming conventions, both are referred to with state name)

Improve readability

• Formatting (spacing, re-examine linting)
• Variable naming (more explicit)
• Code flow (reduce conciseness in favour of readability)
• Functional programming (less mutating)
• More consistent component code layout

Re-examine application structure

Component based structure vs functionality based structure.

Types

• Ensure types are used as much as possible (remove anys)
• Refactor and unify duplicate types that are used for redux and the rest of the application

Configuration

• Remove ambiguous behaviour (database config being reset in an unintuitive way based on higher level configs)
• Make naming more explicit (local-dev vs dev)
• Turn off auth for local development (offline dev becomes possible)

Redux store

Re-examine structure of the store and refactor to more accurately match use in code (review queues state management is under reporting due to initial use of same component). Ensure everything in the store is still required and used by the application.

Third party libraries

Ensure all installed modules are still being used, and that none are significantly impacting performance.

Add unique identifiers to important elements

This will assist in end to end testing by making the tests easier to write and allow old features that haven't been changed more consistently despite new changes