Essentials

📄️ Project Repository Structure

This topic provides details about the directory structure of the composable-ui code repository and the different files within the repository. Before you can start developing your commerce integrations or solution, you must get access to the composable-ui repository and complete the setup as described in the README file.

📄️ Mono-repository

The composable-ui repository is a mono-repository managed by pnpm workspaces and Turborepo. With a mono-repository, you can isolate code into manageable packages, and share the code between multiple applications.

🗃️ Composition

3 items

📄️ Application Configuration

Environment Variables for Composable UI

📄️ Layouts

In React and Next.js, a layout refers to a reusable structure or template that is used to define the common look and feel of multiple pages or components in an application. A layout usually contains a header, footer, and other shared UI elements that are used across multiple pages. By creating a layout, developers can easily maintain a consistent design across their application. Changing a layout reflects the changes in all the pages that use that layout.

📄️ Routing

Composable UI leverages dynamic routes in Next.js to manage the Product Display Pages (PDP) and Product Listing Pages (PLP), based on a given product or category identifier.

🗃️ Authentication

1 items

📄️ Internationalization

Composable UI uses the react-intl library for internationalizing the application. You can display text, numbers, dates and currencies in a localized format by using this library.

📄️ Data Flow

Composable UI, uses Next.js API routes as a middle layer between the frontend and third-party services. This architectural approach helps us to keep the code organized and maintain a consistent data flow throughout the application, by separating the frontend logic from the server-side logic.