Refactoring of frontend architecture and new design

[jzakotnik]

To implement a new design of trubudget, the proposal is to combine it with a re-write of the UI based on newer frameworks and removing technical debt. For example Redux, Sagas, etc.

As a next step, we need to define architecture decisions for the rewrite and then implement it separately from the existing solution.

[MartinJurcoGlina]

There are several possibilities how to proceed with frontend refactoring:

1. use of modern frameworks like NextJS (recently new major version 15 released) or Remix

• Both are in many ways similar and competing each other and used by several big companies
• Next has larger community, Remix rapidly increasing in popularity
• Next utilize hybrid rendering combining server side, static page generation, client side rendering whereas Remix prefers server side rendering
• Remix initially has smaller size build
• both options would need adjustments to our app architecture/devops as they would need NodeJS service to host the frontend

2. option to rewrite frontend in React with modern principles in mind, like using hooks, getting rid of Redux and Sagas, also without Create-react-app as it is not maintained
3. implement just the new designs in current frontend and try at least to use latest version of Material UI and set it according to guidelines

When it comes to what CSS lib/framework to use with first option:

• Material UI, it is harder to initially set with Next and Remix but can be done
• Tailwind with DaisyUI (component library)
• something different?

More on Next and Remix differences, advantages and disadvantages here:
https://hygraph.com/blog/remix-vs-next