Frontend

Perhaps the most complex part of the system

For end users, the frontend (web, phone, desktop, report, etc.) is the "entire application". What information is displayed there, how it is displayed, and how it can be updated determine whether the application is good or bad. The user interface also gives the application a "style", which forms the first impression or lasting impression of the application. The user interface is often also "the part" of the system that the customer is able and wants to influence.

In addition to mere visuals, user interface design provides tools to understand what kind of concepts and the relationships between them the system should support. This provides a good basis for designing data models and thereby also for designing a database model. Data models also play a significant role in defining REST/SOAP/"something else" API interfaces.

Due to the above, it might be a good idea to design the user interface before starting the implementation.

How?

As with application development in general, there is no single right way to do this. The plan can be made on paper, by coding pages or with a design tool such as Figma. It may also be possible to make visual user interfaces without programming in development tools (IDE). What is essential is that the plan can be made and the tool used to make it is easy enough and does not take time to learn. When the plan is ready, it must be coded into a working application. Choosing the right design tool can potentially make this "design to code" phase easier. When choosing, it is good to consider the following aspects:

- what devices the application will be used on (web, phone, desktop app, etc.)
- is a web/PWA (Progressive Web Application) sufficient or do we need a "more native solution"
- the choice of programming language is influenced by
  -> language used in previous applications
  -> availability of experts
  -> language usability on different devices, etc.
  -> how big and complex the UI implementation will be (routing, state management, etc.)
- is it possible to automatically generate code for the selected language from the design (e.g. Figma)
- etc.

It is difficult to find an easy end-to-end solution from design to code. More important than the tool is finding a process to manage the implementation of the design into code and to manage changes made to the design. 

All of this makes the frontend perhaps the most complex part of the system.