cd /news/ai-products/how-we-built-webruno-a-website-ecomm… · home topics ai-products article
[ARTICLE · art-128532] src=dev.to ↗ pub= topic=ai-products verified=true sentiment=↑ positive

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

A development team built Webruno, a multi-tenant SaaS platform combining website building, ecommerce, and CRM capabilities on a Next.js, React, Node.js, and MongoDB stack. The platform uses structured component data rather than raw HTML for its visual editor and constrains AI features to operate within existing application components instead of generating arbitrary production HTML. The team reports that tenant-aware data isolation and integrating ecommerce events into broader CRM and automation workflows were among the central engineering challenges.

by read5 min views4 publishedSep 13, 2026

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 core Webruno stack includes:

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

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:

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.

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:

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.

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

A store needs to manage:

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.

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.

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:

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.

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.

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

A visual editor contains many reusable elements:

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.

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.

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

Businesses also need actions to happen automatically.

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.

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.

Today, Webruno combines several capabilities in one platform:

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.

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

── more in #ai-products 4 stories · sorted by recency
── more on @webruno 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/how-we-built-webruno…] indexed:0 read:5min 2026-09-13 ·