Layout Builder

Amid frequently shifting customer demands and the persistent evolution of requirements, the engineering team consistently faced recurring challenges that were draining developers’ time. It became evident that an internal solution was necessary to address these issues.

Every customer had unique preferences for aligning web elements, including text, images, videos, and widgets.

The situation called for a solution to internalize and manage these recurring issues effectively. While catering to each customer’s unique preferences is essential for customer satisfaction, the need to strike a balance between customization and efficient development processes became evident. Addressing these challenges required a strategic approach to align individual client needs while optimizing the use of developer resources.

Solution

An in-house custom creation, our layout builder is a specialized tool integrated into our software and web development platform. It empowers users to craft and personalize the structure and design of web pages or content, all without the necessity of delving into complex coding. This tailored solution streamlines the creation of visually captivating and well-organized web pages. It accomplishes this by furnishing an intuitive interface where users can arrange elements—text, images, videos, widgets, and more—within predefined templates or grids.

Features:

Drag-and-Drop Interface: Users can drag and drop various elements onto a canvas to arrange them as desired.

Predefined Templates: Layout builders often offer a selection of pre-designed templates or grids to start from, providing a foundation for page design.

Customization Options: Users can customize elements’ appearance, size, position, and style to match their design preferences.

Responsive Design: Our layout builder supports responsive design, allowing users to create layouts that adapt to different screen sizes and mobile devices.

Content Blocks: Users can add and edit content blocks, such as text, images, headers, and multimedia, within the layout.

Real-Time Preview: Users can preview their layouts in real-time to see how they will appear to website visitors.

Conclusion

What initially began as a solution tailored specifically for one of the leading betting companies in the Asian market, targeting specific widgets within their B2B SaaS betting platform, has evolved into a versatile, generic solution with the capacity to seamlessly integrate into diverse domains. This transformation underscores the adaptability and scalability of the implemented solution, ultimately broadening its potential applications and solidifying its relevance across various industry landscapes.

Tech Stack

Frontend: Angular 13+, HTML5, CSS3, TypeScript

Backend: .NET Core, Entity Framework Core

Database: MSSQL Server, MongoDB

Real-Time Communication: SignalR, ZeroMQ for real-time updates and notifications