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 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
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
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)