Our customer panel is the most important link between our customers and our services. Therefore, it needs to be fast and easy to use. When choosing the tech stack, we intentionally opted for React because we have extensive experience with this framework and it is particularly well suited for developing panels/dashboards. In combination with some special technologies and libraries, we were able to create efficient and user-friendly forms.

1. Using Create React App with TypeScript and Tailwind: To create a solid foundation for our customer panels, we use Create React App in combination with TypeScript and Tailwind. TypeScript allows us to statically type our React components, while Tailwind provides an extensive collection of CSS classes and templates to quickly and efficiently implement the design of our panels.
2. UI library for design support: To add additional visual elements and UI components to our panel, we use the UI library from shadcn. This library offers a wide range of pre-built components, such as buttons, modals, and alerts, which accelerate our development and improve the design of our panels.
3. Efficient form management with React Hook Forms and Zod: An important aspect of our customer panels is efficient form management. For this, we rely on React Hook Forms and Zod. React Hook Forms allows us to dynamically create forms and add or remove fields as needed. Zod, on the other hand, is a TypeScript library for validating form data. With this combination, we can easily create forms and ensure that the entered data is correctly validated.
4. Atomic saving of form data: To ensure that changes to form data are not lost and to enable efficient storage of individual fields, we use the concept of atomic saving. We automatically track changes to field values and save them either when the user leaves the field or when the last change was at least 2 seconds ago. Thanks to our event-driven microservice system, we can quickly and easily save individual fields without having to send the entire form as a large JSON body via API.
5. Panel login with Clerk: Login to our panel is implemented using Clerk, an authentication platform that we also use in the backend to verify tokens. With Clerk, users can not only log in but also create or join organizations to work for different customers. This switch between organizations is done with just one click, increasing the user-friendliness of the panel.
6. Choosing lean solutions: Zustand and React Hook Forms: Instead of relying on big players like Redux and Formik, we intentionally opted for leaner alternatives to focus on the essentials and avoid unnecessary overhead. Therefore, we use Zustand instead of Redux and React Hook Forms as an alternative to Formik. Both solutions provide us with sufficient functionality while conserving resources and simplifying development.
7. Testing: Of course, we don’t rely solely on our eyes and trial and error. Therefore, we write comprehensive tests using Jest. If changes cause issues, we quickly identify them through these tests, preventing these changes from making their way to our servers. If a test fails, the rollout of the changes is automatically stopped.

Conclusion: Thanks to the use of React and the mentioned technologies, we can develop a user-friendly customer panel. The use of React Hook Forms and Zod allows us to quickly create dynamic and well-validated forms. The combination of atomic saving and our event-driven microservice system enables efficient storage of form data without unnecessary overhead. By using Clerk for login and utilizing state and React Hook Forms, we can implement leaner solutions and focus on the essentials. Overall, we are very satisfied with our technology choices and the results, and we look forward to future developments of our customer panel.