Wiki page about architectural decisions, folder structure

[leonardonegrao]

Explain the decisions and inspirations behind the structure of the project:

• The basics: use of src folder and initial folders
  • Absolute paths
  • The theme folder
  • The pages folder
  • The models folder
  • The infra folder
  • The components folder
• Important components
  • Why Link and Image components encapsulating the one's from Next
    • Application agnostic when using these components (don't care about Next's implementation)
    • Common configuration and styling (mostly for the Image)
• The wrappers and screens: why this way?
  • Bootcamp Front-end Avançado
  • Separation of concerns between application and framework (less use of _app.tsx for example)
• The component recipe: how components are structured
  • What is a component for this application: A piece of code that is independent of it's siblings, that if a repair is needed, the developer is able to focus almost atomically, only on that node of the Component Tree and it's children. While this advice was not necessarily followed, it was kept in mind.
  • Inner components folder
    • The Angular way
    • Less entropy
    • Layers
  • Building Resilient Frontend Architecture by Monica Lent (GOTO 2019)
  • How that turned into Prop Drilling, but why Prop Drilling was part of the architecture (State Management)
    • Prop Drilling not as issue, but as solution (lifted state and how it was necessary as getStaticProps only works on the pages level)
    • Why not Context API, or component composition: Lifting State is a good solution