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:
- Component based
- Conformity with standards
- Developer Experience (DX)
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.
│ └── storefront
│ ├── eslint-config-custom
│ ├── precomposer-data
│ ├── precomposer-env
│ ├── precomposer-ui
│ ├── stylelint-config-custom
│ ├── tailwind-config
│ └── tsconfig
- In the
rootfolder you will find all the files that are needed for project setup and start of the application.
appsfolder contains all Next.js applications like storefront or docs.
packagesfolder contains all internal packages:
eslint-config-customglobal eslint config
precomposer-dataprovides all data from epc-aggregator-api
precomposer-envprovides all runtime environment variables
precomposer-uiUI component library
stylelint-config-customglobal stylelint config
tailwind-configglobal tailwind config
tsconfigglobal Typescript configuration
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 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 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 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.
@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
Precomposer Data package (name:
@precomposer/data) lets developers interact with epc-aggregator-api GraphQL API using
custom React Hooks.