DEV Community

Cover image for Building a Scalable Multi-Tenant SaaS? Stop Leaking Business Logic to the Client
Himadri Ganguly
Himadri Ganguly

Posted on

Building a Scalable Multi-Tenant SaaS? Stop Leaking Business Logic to the Client

If you’re building a modern SaaS application, you’ve probably hit this wall: your frontend starts out clean, but within months, it transforms into a bloated mess of API orchestration, complex state management, and tightly coupled business logic.

When you are dealing with multi-tenant data, automated workflows, and an expanding web of microservices, letting your Single Page Application (SPA) talk directly to backend services is a recipe for technical debt.

Enter the Backend-for-Frontend (BFF) pattern.

The Backend-for-Frontend (BFF) pattern is an architectural design where a dedicated backend service is built for each specific user interface

The Neev-SAAS open-source organization provides a masterclass on how to structure this correctly. By splitting the stack into a dedicated Vue.js frontend boilerplate and a robust TypeScript BFF, the project delivers enterprise architecture without the usual enterprise complexity.

Let's break down how this architecture works and why it might be the blueprint for your next big project.

The Architecture: Why a BFF?

In a traditional setup, your frontend makes direct calls to various microservices. This means the client has to handle data aggregation, deal with CORS issues across multiple domains, and securely manage authentication tokens in the browser.

The Neev-SAAS architecture introduces a middleware layer—the BFF. This dedicated server sits between the Vue.js frontend and the underlying microservices or databases.

Here is exactly how the two repositories under the Neev-SAAS umbrella divide and conquer the workload.

1. The Presentation Layer: neev-web-frontend

Modern SaaS Frontend Boilerplate built with Vue.js, TypeScript, reusable components, authentication, responsive dashboards, and scalable architecture for startups and enterprise applications.

The neev-web-frontend repository is a modern boilerplate built with Vue.js and TypeScript.

Instead of bogging down the client with data processing, this frontend is purely focused on what it does best: rendering a snappy, responsive User Interface.

Key Features:

  • Component-Driven: Highly reusable UI components that ensure a consistent design language across complex dashboards.

  • Dumb Components, Smart Routing: Because the heavy lifting is moved to the backend, the frontend components simply consume clean, pre-formatted JSON.

  • Scalable Architecture: Designed explicitly for startups scaling into enterprise applications, keeping the directory structure flat and manageable.

2. The Orchestrator: neev-web-bff

Neev Web BFF is the Backend-for-Frontend that sits between your frontend and microservices, handling authentication, API orchestration, business workflows, session management, and secure communication. Built for modern teams that want enterprise architecture without enterprise complexity.

The magic happens in the neev-web-bff repository. This TypeScript-based layer acts as the ultimate gatekeeper and orchestrator.

Key Features:

  • API Orchestration: If a single dashboard view requires user profile data, subscription limits, and recent activity logs, the frontend makes one call to the BFF. The BFF then fans out the requests to the respective microservices, aggregates the data, and returns a single, clean payload to the client.

  • Workflow Integration: When tying in complex automation—like triggering n8n webhooks or coordinating multi-step business logic—the BFF handles the execution state. The frontend never needs to know the intricacies of the automation pipeline.

  • Ironclad Security & Auth: Session management is handled on the server side. Secure, HttpOnly cookies can be utilized to ensure sensitive tokens never touch the browser's local storage, drastically reducing the risk of XSS attacks.

Why This Stack Wins for Multi-Tenant SaaS

Building a multi-tenant application requires strict data isolation. When your routing logic and data fetching sit on the client, you risk accidental data exposure.

By routing everything through neev-web-bff, you can enforce tenant boundaries at the server edge. The BFF can inspect incoming requests, attach the correct tenant ID context to the headers, and securely route the request to the correct localized database.

Furthermore, this separation of concerns makes local development incredibly smooth. You can spin up your local databases and the BFF via Docker, giving your frontend a single localhost endpoint to communicate with, perfectly mimicking production.

The Takeaway

If you want to build fast but avoid rewriting your entire application when you land your first enterprise client, you need boundaries. The Neev-SAAS repositories offer a fantastic starting point for isolating your UI from your business logic.

Want to dive into the code?

Check out the repositories and give them a star:

Frontend: neev-web-frontend

BFF: neev-web-bff

Have you implemented a BFF in your SaaS architecture? Let’s discuss the pros and cons in the comments below!

Top comments (0)