<aside> ➡️ The pages under the Engineering page are currently curated by the company's chief technical officer (CTO). To contribute, please leave a comment. How to comment?

</aside>

https://embed.notionlytics.com/wt/ZXlKd1lXZGxTV1FpT2lJd1pXVTRZVGcwTnpabVpUYzBNbVF5T1RBd1lqWTRNbU5oTXpnME1UaGxNU0lzSW5kdmNtdHpjR0ZqWlZSeVlXTnJaWEpKWkNJNklrbGpiM1pzV2pOcU1VUnBRM1ZUUm1WNFRtdHlJbjA9

What is an application architecture?

An application architecture describes the patterns and techniques used to design and build an application. The architecture gives you a roadmap and best practices to follow when building an application so that you end up with a well-structured app.

What is a technology stack of ScandiPWA?

ScandiPWA is a complex application. At the first glance, it is a frontend application, thus it should be nothing more than some templates and layouts. In reality, existing CSR (What is CSR?) requirements complicate the application considerably.

Just to display information in the browser ScandiPWA requires a set of the following technologies:

• React - a technology that enables CSR (What is CSR?). It is capable of managing the render of an entire page in the browser.
• Redux - a state-management library that allows sharing state between React components (Why is state sharing important?).
• React Router - a technology that allows building SPA (What is SPA?). It manipulates the history of the browser to emulate the navigation.

What are the technology stack requirements?

Given a set of technologies empowering ScandiPWA, it is no wonder the application bootstrap process requires the initialization of each library. In order for them to work, they require some specific approaches to be implemented. ScandiPWA provides these:

• A set of components is ****required for React to render a page. Components are encapsulated pieces of UI and logic, these can be: Header, Footer, ProductCart, etc.

  <aside> ➡️ These are located in the src/component folder

  </aside>

• A set of action reducers is required for Redux. An action reducer is a function that, given some action produces a state modification. Redux hosts an internal "global" state inside, the reducers are needed to update it. Actions allow implicitly updating parts of the application.

  <aside> ➡️ These are located in the src/store folder

  </aside>

• A set of routes is required for React Router to work. A route is a React component that defines a URL (or URL pattern) that it will render on.

  <aside> ➡️ These are located in the src/route folder

  </aside>

What is the architecture of ScandiPWA?

First, review a schema that depicts the complete architecture of ScandiPWA:

How is the UI and business logic designed?