Container Customization Builder

Industry

Construction

Region

USA

Year

2024

Services
Backend
Frontend
Technologies
Canvas
JavaScript
Laravel
Next.js
PHP
Complexity
Conexbuilder cover
Development time

10 months

Team

1 TM, 1 PM, 1 Frontend, 1 Backend , 1 QA

Project status

The project continues to evolve and scale

About the client

Client: A US-based company specializing in providing solutions for customizing shipping containers. The company transforms containers for various purposes: for transportation, offices, warehouses, and other spaces.

Target Audience: Private individuals, transportation, logistics, and other enterprises in need of mobile and portable solutions for cargo containers. Also, users seeking a convenient tool for configuring containers.

The Situation

The company has been in the market for a long time, and for the convenience of its clients, a constructor was previously developed. However, over time, it ceased to meet current requirements, and maintaining and updating it with new features became problematic.

Task

The client approached us to enhance their current container builder, which no longer meets modern requirements. They requested the development of a Canvas-based builder that allows for the use of a large number of elements while maintaining high performance. Additionally, the builder should meet the following requirements:

1. Visually pleasing and user-friendly interface;

2. Easy management of elements and their variations;

3. Fast and responsive performance;

4. Easily scalable for future enhancements.

Conexbuilder banner

Solution

The decision was made to create a new, modern builder based on Canvas technology to ensure high performance and the ability to utilize a large number of elements.

Artem belyakov pm
Artem Belyakov
Project Tech Lead

We’ve delivered an outstanding project, showcasing our proficiency in working with new technologies and bringing valuable changes to our client’s operations. Additionally, within our collaboration, we’re simultaneously engaged in four projects, each playing a crucial role in the company’s overall system.

Our role extends beyond developing quality products; we integrate them into a unified ecosystem, enhancing our client’s business process efficiency. Our client highly values our professionalism, quick response to requests, and flexibility in meeting their business needs. It’s worth noting that the solutions we’ve developed have significantly impacted the improvement of the marketing and sales departments’ operations, as well as overall business efficiency. We take pride in our achievements and strive to further enhance our collaboration’s success.

Read completely

Builder Capabilities

Conexwest personal account

Personal Account Screens

Personal Account

The user has the ability to create a personal account for convenient management of previously created projects. The personal account functionality allows users to create new projects, edit existing ones, and track the statuses of current projects.

Project creation screens

Project Creation Screens

Starting from Scratch or Based on a Template Project

When a user wants to create a new project, the system offers to start from scratch or use pre-made templates (common projects that are frequently ordered). Additionally, when creating a new project, the system provides the option to choose between a used container or a new one, as well as the desired container size.

Project creation screen interface

Project Creation Screen Interface

Convenient Workspace

The main workspace of the builder features a variety of elements that allow users to “assemble” their desired container. The container itself is positioned in the center of the workspace, with the ability to view it from 5 different angles, as well as the option to display both the interior and exterior views.

Container elements

Container Elements

Variety of Elements

Thanks to Canvas technology, the builder allows interaction with a wide range of elements, such as doors, windows, ventilation, air conditioners, and more, which can be added and customized on the container. The builder also offers a wide palette of colors for painting the container, with a total of 63 colors to choose from.

Moving container elements

Moving Container Elements

Ease of Element Movement and Adjustment

Users can easily interact with elements by dragging them, resizing them, and changing their colors and settings in real-time. Each element can be placed at the desired height and distance relative to other elements. The calibration process is facilitated by alignment guides.

Integration with crm system

Integration with CRM System

Sending a Project from the Personal Account to the CRM System

Once the project is ready, the user can send it to sales managers for estimation by providing company information including address and additional comments. The builder is integrated with the CRM system used by sales managers.

Project link creation screen

Project Link Creation Screen

Project Sharing Capability

We’ve implemented a convenient feature that allows users to share their projects with others. The system automatically generates copy links and provides the option to send the link directly via email or messenger apps. By clicking on the link, the project opens in view-only mode. Users can register to make changes to the project.

Stages of work

01.

Requirements Gathering and Design

During the requirements gathering stage for this project, we analyzed the business objectives and studied the needs of the target audience.

The team conducted market analysis of containers, collected user feedback, and identified key parameters such as adding elements, resizing, and painting containers. Technical requirements were defined considering the choice of Canvas technology to ensure high performance.

We also considered the product’s mobility and flexibility in creating various functional spaces. This stage laid the foundation for developing an enhanced web builder.

02.

Frontend

During the frontend development stage of the web builder, we used the Next.js framework with Canvas technology. Next.js facilitated the creation of a reactive web application, while Canvas enabled the creation of an interactive container builder.

The development focused on high performance, responsiveness, and visual appeal, ensuring responsive interaction with the builder on various devices.

03.

Backend

In the backend development for the project, we used Laravel to create a convenient and multifunctional personal account.

04.

Testing

During the testing phase of the project, analysis was conducted to identify errors and bugs. Any detected issues were promptly addressed, and optimization of the main Builder functions was performed to improve performance and ensure more stable operation.

Results

The project is currently in the final stage before release: additional features and elements are being implemented.

For example, we are currently working on translating drawings into DWG format for further work in AutoCAD. To automate production processes, a robot for laser cutting has been installed, which cuts holes for windows, doors, and other elements on containers based on the drawings. Therefore, this feature will help streamline the production process and make it faster.

Did you like the case?

    This website uses cookies.

    This website uses cookies.

    I agree to the Cookies Policy