Discuss your project
Projects / Product customisation

CaseShop Constructor

A browser configurator for personalised phone cases.

We built a phone-case configurator that connects the selected model and base with an editable design. Customers arrange photos, decorative elements and text on the product preview, then review the finished case alongside their order details.

01 / Product choice

The phone model defines the product being customised.

CaseShop Constructor: Start page

Start page

The entry page asks for the phone model before opening the editor. This choice defines the product shape used throughout customisation.

CaseShop Constructor: Base and colour

Base and colour

The base selector presents the case material and available colours. The chosen product remains listed beside the canvas, keeping the physical item separate from the artwork added to it.

02 / Image, decoration and text

Photos, decoration and typography in a shared editor.

CaseShop Constructor: Photo editor

Photo editor

The photo editor supports image upload, positioning, rotation and resizing on the selected case. Each adjustment is visible in the product preview.

CaseShop Constructor: Decorative elements

Decorative elements

Stickers and decorative elements become part of the same canvas. Selection and layer controls let the customer work on the intended element.

CaseShop Constructor: Text and fonts

Text and fonts

Text controls set the font, colour and style beside the product preview. The project’s typography library included more than 600 Google fonts.

03 / Design and order

The finished design stays with the checkout details.

CaseShop Constructor: Checkout

Checkout

Checkout retains the finished case preview, phone model, selected base and price beside the contact and delivery form. The customer can check the composition and purchase details before submitting the order.

Technology stack

The technology behind CaseShop Constructor.

The browser editor, application services and file storage behind product customisation.

Design editor

AngularJS and TypeScript support the browser interface, with SCSS for its presentation.

  • AngularJS
  • TypeScript
  • SCSS

Application services

C#, Microsoft .NET and ASP.NET MVC form the server-side application stack.

  • C#
  • Microsoft .NET
  • ASP.NET MVC

Records & files

T-SQL, Entity Framework Core and Dapper provide data access. Azure File Storage is part of the file-storage infrastructure.

  • T-SQL
  • Entity Framework Core
  • Dapper
  • Azure File Storage

Hosting & delivery

Azure Web Application Server and Azure DevOps support application hosting and delivery.

  • Azure Web Application Server
  • Azure DevOps
Your product. Their design.

Make customisation part of the buying experience.

If your products depend on a customer’s images, text or choices, we can build the configurator around them. We define the editing tools, product rules and the information your team needs to fulfil the order.

Discuss a product configurator