Let\u2019s start with the front-end stack. For our language, we\u2019ve decided to go with JavaScript and TypeScript. We chose the latter because we needed more safety but did not want to incorporate unit or E2E testing. There is a belief that TypeScript, in terms of human resources, would be less expensive for the project (worth mentioning that TypeScript cannot do all the work that tests do or can replace tests as such). As the main library framework, we have chosen React.<\/p>\n\n\n\n

Our UI library is Material UI because it is well-typed in TypeScript, provides a lot of useful components and approaches, and supports code-splitting and tree-shaking. And since Material UI comes with the Emotion solution, we also decided to go with it. From the very beginning, we actually knew that we would like to have enhanced code splitting support in our web app with a CSS-in-JS style solution. We also choose Redux Toolkit for our global state management, where we mainly store only UI-related stuff and some custom global UI states that do not relate to the back end. And, of course, we use React Router for our routing. As our fetch engine\/api sync mechanism, we have chosen React Query as it provides an elegant cache and fetches API to integrate with our back end common in their API design. As our fetch library, we use Axios for file uploading.<\/p>\n\n\n\n

We use React Hook Form for our form library because we wanted to try out something newer instead of Formik, but now, we see both of these libs share a lot in common in their API design. React Hook Form comes with some inner bugs and tricks due to its re-render optimizations, especially when some non-standard situations have a place. But still, that is an excellent tool in your project stack anyway.<\/p>\n\n\n\n

All these solutions are packed and built with Create React App to make the process as mainstream as possible to engage a big community alongside. That is exactly what we need in Trust Army development. And last but not least \u2014 we use Es-lint, Prettier, Husky, and Lint-Staged for code quality checks.<\/p>\n\n\n\n

Once we\u2019ve finished with the stacks and technologies overview, it\u2019s time to read further about implementations made within the last development sprint!<\/em><\/strong><\/p>\n\n\n\n

<\/p>\n\n\n\n