Local DTOs are harmful

"The DTO pattern is often incorrectly used, DTO is meant to group remote calls.

DTOs are called Data Transfer Objects because their whole purpose is to shift data in expensive remote calls. They are part of implementing a coarse grained interface which a remote interface needs for performance. Not just do you NOT need them in a local context, they are actually harmful both because a coarse-grained API is more difficult to use and because you have to do all the work moving data from your domain or data source layer into the DTOs.

Some people argue for them as part of a Service Layer API because they ensure that service layer clients aren't dependent upon an underlying Domain Model. While that may be handy, I don't think it's worth the cost of all of that data mapping. As my contributor Randy Stafford says in P of EAA "Don't underestimate the cost of [using DTOs].... It's significant, and it's painful - perhaps second only to the cost and pain of object-relational mapping".

https://martinfowler.com/bliki/LocalDTO.html

Play around with flexbox positioning

 https://flexbox-positioning.netlify.app

MVC (Model-View-Controller)

The three parts of the MVC software-design pattern are:

• Model: Manages data and business logic.
• View: Handles the display
• Controller: Receives input from the user and converts it to commands for the model or view. It's a bridge between model and view (which don’t know about one another)

Note: in some versions of the pattern the model calls the view directly.