How We Built Webruno: A Website, Ecommerce & CRM Platform with Next.js, React, Node.js, and MongoDB

Idehweb — Sun, 13 Sep 2026 20:39:02 +0000

Building software for businesses is rarely about solving just one problem.

A business may need a website, an online store, product management, customer management, forms, payments, SEO, and automation. Traditionally, these capabilities are handled by several different products.

We built Webruno to bring these capabilities together in one platform.

Webruno allows businesses to create and manage websites and online stores while also providing CRM, ecommerce, payments, SEO, forms, customer management, automation, and AI-assisted workflows.

After several years of development, these are some of the engineering challenges and decisions behind the platform.

The technology stack

The core Webruno stack includes:

Next.js
React
Node.js
Express
MongoDB
Mongoose
Redux Toolkit
Tailwind CSS
Material UI

We chose technologies that allowed us to move quickly while keeping enough flexibility for a large, multi-tenant SaaS application.

1. Building a multi-tenant platform

One of the first major architectural challenges was supporting many businesses inside the same platform.

A single Webruno installation can contain data for many different businesses, including:

Websites
Pages
Products
Categories
Orders
Customers
Leads
Forms
Media
Domains
Users
Automations
Settings

Every piece of business data needs to remain isolated from other businesses.

We therefore designed our data models and application logic around tenant-aware operations.

A request that reads or modifies data must know which account or website it belongs to.

This becomes increasingly important as the number of models and relationships grows. A missing tenant constraint is not just a bug. It can become a security problem.

2. The website and page builder

A traditional website can be represented as HTML and CSS.

A visual website editor needs something more structured.

Instead of treating every page as a large block of HTML, we represent pages using structured components.

A simplified example could look like:

{
  "type": "section",
  "children": [
    {
      "type": "heading",
      "content": "Build your business online"
    },
    {
      "type": "button",
      "label": "Get Started"
    }
  ]
}

The editor modifies this structure, while the rendering system turns it into the actual customer-facing page.

This approach gives us several advantages:

Reusable components
Responsive layouts
Editable content
Consistent rendering
Easier component management
A structured foundation for AI-assisted generation

The difficult part is not creating a drag-and-drop interface.

The difficult part is creating a system where thousands of different combinations of components can remain stable across different websites, devices, and content types.

3. Ecommerce inside the same platform

Websites and online stores share many requirements, but ecommerce introduces another layer of complexity.

A store needs to manage:

Products
Categories
Inventory
Customers
Orders
Payments
Shipping
Discounts
Product variations
Order status

Instead of building ecommerce as a completely separate application, Webruno connects ecommerce data with the rest of the business platform.

For example:

Product
   ↓
Order
   ↓
Customer
   ↓
CRM
   ↓
Automation

This allows an ecommerce event to become part of a broader business workflow.

4. Connecting the CRM to the website

A major goal was to avoid treating the website as an isolated frontend.

A form submission can become a lead.

A lead can become a customer.

A customer can trigger an automation.

An order can update customer information.

A customer interaction can create a task for a team member.

This creates a system where the website is directly connected to business operations.

A simplified workflow looks like:

Website Form
     ↓
Lead
     ↓
CRM
     ↓
Automation
     ↓
Notification / Task / Customer Action

This is one of the main differences between a website-only product and a broader business platform.

5. AI-assisted website creation

AI became another layer of the platform rather than the foundation of the entire product.

Instead of allowing an AI model to generate arbitrary production HTML and hoping everything works, we use structured application data and existing components.

The AI can help determine things such as:

Business type
Website structure
Page sections
Content
Calls to action
Design direction
Product categories

The application remains responsible for validating and rendering the result.

This gives us more control over the output and makes the AI features easier to integrate with the existing platform.

The important lesson here is that AI works better when it operates within a well-defined product architecture instead of being allowed to control everything.

6. Why we chose Next.js

We chose Next.js because it provides a strong foundation around React while giving us routing, rendering, performance optimizations, and server-side capabilities.

Webruno contains both a complex application dashboard and customer-facing websites.

Next.js allows us to build these different parts within a consistent React-based ecosystem.

It also gives us the flexibility to choose the appropriate rendering strategy for different parts of the product.

7. Why we chose React

React's component-based architecture was particularly useful for the website editor.

A visual editor contains many reusable elements:

Text
Images
Buttons
Sections
Forms
Product components
Navigation
Layout components

Component-based development makes these elements easier to reuse and maintain.

It also gives us a good foundation for adding new components without rebuilding the entire editor.

8. Why we chose MongoDB

Website and business data can have very different structures.

One business may have a simple website with a few pages, while another may have hundreds of products, custom fields, forms, and different content structures.

MongoDB's document-oriented model gives us flexibility when working with this type of data.

Mongoose provides an additional layer for defining models, validation, and relationships within the application.

9. Automation

As the platform grew, we realized that simply storing business data was not enough.

Businesses also need actions to happen automatically.

For example:

New Lead
   ↓
Create Customer
   ↓
Send Notification
   ↓
Create Sales Task
   ↓
Follow Up

Automation connects different parts of the platform and reduces repetitive manual work.

This required us to think carefully about events, actions, conditions, and how different parts of the application communicate with each other.

10. The hardest lesson

The hardest part of building Webruno was not choosing a framework or database.

It was managing the complexity that appears when multiple products become one platform.

Website building, ecommerce, CRM, payments, automation, and AI all have different requirements.

Connecting them creates significant product and engineering complexity.

At the same time, we learned an equally important business lesson:

Building the technology is only half the job.

A technically capable product does not automatically get customers.

Distribution, positioning, onboarding, pricing, customer support, and sales are just as important as the architecture.

That has changed our focus significantly as we continue developing Webruno.

11. What we are building now

Today, Webruno combines several capabilities in one platform:

Business website creation
Online stores
Ecommerce management
CRM
Customer management
Forms and leads
Payments
SEO tools
Automation
Analytics
AI-assisted workflows

The goal is not to replace every piece of software a business uses.

The goal is to reduce the number of separate systems a business needs to build and operate its online presence.

Conclusion

Building Webruno has been a long process of solving problems that became more complex as the platform grew.

The biggest technical challenges have been multi-tenancy, the visual page system, ecommerce, CRM integration, automation, and connecting AI to an existing application architecture.

The biggest business lesson has been simpler:

A good product still needs distribution.

We're continuing to improve the technology while focusing more heavily on customer feedback, usability, and making the platform useful for businesses beyond our original market.

If you're building a multi-tenant SaaS product, website platform, ecommerce system, or business automation tool, the architectural problems are surprisingly similar.

Webruno: webruno.com

DEV Community: Idehweb