Product Configurator Boilerplate

• Setting up your project
• Instructions for running the project
• Accessing the development site
• The folder structure of the boilerplate
• Setting up the 3D model
• Livestream video

There are two ways to set up the project. One would be to directly clone the repository. Another, better one is to use the Crystallize CLI. Open your terminal and run the following command:

npx @crystallize/cli-next@latest install ~/my-projects/product-configurator

The CLI gives you the option to bootstrap your tenant with all of the furniture store demo data.

Before running the project, make sure to provide your Crystallize credentials in the .env file, which will later be used for the authentication of the Shop API.

CRYSTALLIZE_ACCESS_TOKEN_ID=<your access token id>
CRYSTALLIZE_ACCESS_TOKEN_SECRET=<your access token secret>

Install packages and run the project:

pnpm install & pnpm dev

Once the development server is running, you will be able to browse to http://localhost:3000.

The app is contained within the src folder.

src/app

Since the project is using the NextJS app router, the app folder is the place were we have our routes: home and product. Each route may contain a `components` folder to store all components used by the route.

src/components

The components folder under the src folder contains all reusable components that are shared among all routes, like the Cart in this case.

src/context

The context folder has the shared context for the app. For now, this is only the Cart context so we can access the cart from any place in the app.

src/actions

The actions folder has all NextJS server actions used in the app. They serve as an endpoint between the UI and the Core/Crystallize.

src/middleware.ts

The middleware is the one place where we authenticate against the Shop API by providing our Crystallize credentials. In return, we receive a JWT token which we can use later to make requests to the Shop API.

src/core

This is where all the framework and server-side specifics are organized.

src/use-cases

This is all the “Use Cases.” Everything that is business related, you can see that as the “Domain” folder. There is no connection to the UI or to the Framework in this folder. You will mainly find functions that do meaningful actions like `getProduct`, `createOrder`, etc.

The ModelView component located at src/app/product/components/model-view renders the 3D model. You will need to provide a glb file as a source to the model-view .