SHOPin Logo
Skip to main documentation content

Getting started

This documentation explains how to set up, run, and extend the SHOPin storefront accelerator.

Source code: github.com/creativestyle/shopin.

The SHOPin storefront accelerator is a modular monorepo with a NestJS BFF, Next.js storefront, and integration packages. It also includes optional demo packages for local data-source switching during development.

What is included

  • Workspace architecture — Separate BFF (apps/bff) and storefront (apps/presentation) applications.
  • Shared contracts and config — Common types, schemas, i18n, and tooling packages in core/ and config/.
  • Integration packages — Commercetools, Mock, and Contentful integrations under integrations/.
  • Developer tooling — Storybook and Typedoc apps for component and API documentation.

Key directories

apps/                    Applications
├── bff/                 NestJS Backend for Frontend
├── presentation/        Next.js storefront
├── storybook/           UI component docs & playground
└── typedoc/             TypeScript API docs

core/                    Shared modules
├── contracts/           Shared interfaces and types
├── i18n/                Translations and language utilities
├── eslint-config/       Shared ESLint config
├── prettier-config/     Shared Prettier config
└── typescript-config/   Shared TypeScript config

integrations/            Data sources
├── mock-api/            Mock data provider
├── commercetools-api/   Commercetools API integration
├── commercetools-auth/  Commercetools auth provider integration
├── contentful-api/      Contentful CMS integration
└── contentful-migration/ Contentful model/content migrations

config/                  Centralized configuration
└── constants/           Shared constants (e.g. data source, i18n)

demo/                    Optional; safe to remove for production
├── data-source-selector/
├── data-source-header-reader/
└── mocked-payment-service-provider/