Storefront

Why you should choose Precomposer storefront. This frontend is designed as a headless application to work optimized with the other components of Precomposer. These are the points we have focused on:

• Includes best practices for usability and user experience
• Search engine optimized (SEO)
• Layout is adapted for different devices (mobile first)
• Performance and page speed

In addition, there are further aspects which are related to operation and development:

• Scalable
• Component based
• Conformity with standards
• Maintainable
• Developer Experience (DX)
• Security

Architecture

Overview

Precomposer storefront uses a monorepo architecture. Advantages of the monorepo: The monorepo offers many advantages for developers. First, all applications can be organized in a single repository, making it easier to maintain and update applications. Second, developers can use a component library to create reusable components and use them in different applications. This saves time and improves development efficiency. In addition, Monorepo provides faster builds and improved collaboration. Turborepo is used to manage the monorepo, as it is designed to make this easier by automating some of the typical challenges.

Folder structure

├── apps
│   └── storefront
├── docker-compose.yml
├── package-lock.json
├── package.json
├── packages
│   ├── eslint-config-custom
│   ├── precomposer-data
│   ├── precomposer-env
│   ├── precomposer-ui
│   ├── stylelint-config-custom
│   ├── tailwind-config
│   └── tsconfig
└── turbo.json

• In the root folder you will find all the files that are needed for project setup and start of the application.
• The apps folder contains all Next.js applications like storefront or docs.
• The packages folder contains all internal packages:
  1. eslint-config-custom global eslint config
  2. precomposer-data provides all data from epc-aggregator-api
  3. precomposer-env provides all runtime environment variables
  4. precomposer-ui UI component library
  5. stylelint-config-custom global stylelint config
  6. tailwind-config global tailwind config
  7. tsconfig global Typescript configuration

Technology stack

The Precomposer storefront mainly uses open source software. This offers a range of benefits such as: Cost-Effectiveness, Security and Transparency, Community Collaboration, Rapid Innovation and Customizability.

Turborepo

Turborepo is a monorepo platform from Vercel that allows developers to organize and manage their applications in a single repository. This platform offers many benefits such as faster builds, better collaboration, and increased efficiency.

Next.js

Next.js is a React framework that helps in developing web applications. It provides an easier way to implement server rendering and static rendering of React applications.

Tailwind

Tailwind CSS is a utility-first CSS framework that streamlines web development by providing a set of pre-designed utility classes that can be directly applied to HTML elements. Its advantages include rapid prototyping, efficient styling, and consistent design, as well as the flexibility to create custom designs while maintaining a compact and optimized final CSS output.

Apollo GraphQL client

Apollo Client is a comprehensive state management library that enables us to manage local data with GraphQL. We use it to fetch and cache the application data, all while automatically updating the UI.

Internal packages

Precomposer UI

The @precomposer/ui package contains the outsourced, reusable React UI components. Together they are the component library. Outsourcing React components to a component library separates responsibilities between the different parts of the application. This makes it easier to maintain and update the components and simplifies the management of the entire application.

Precomposer Data

Precomposer Data package (name: @precomposer/data) lets developers interact with epc-aggregator-api GraphQL API using custom React Hooks.

Checkout types

In the application, two distinct checkout solutions are implemented. The first is a custom-developed checkout system, internally developed as part of Precomposer. The second is an external solution provided by Commercetools. For more details about the Commercetools Checkout solution, please visit the official site: Commercetools Checkout (opens in a new tab).

During the installation process, users are given the flexibility to switch between these two checkout options. To better understand the architecture, refer to the diagram provided below.

Best practice

tbd.