DEV Community

Cover image for How I Built a Production Multi-Tenant SaaS Starter Kit with Laravel 12 + React 18 + TypeScript
Tenantx
Tenantx

Posted on

How I Built a Production Multi-Tenant SaaS Starter Kit with Laravel 12 + React 18 + TypeScript

I've spent the last few years building a multi-tenant SaaS product from scratch. Real paying customers. Real production traffic. Real architectural mistakes that cost months to fix.
After going through that process I realized something — the hardest part wasn't the features. It was the foundation. Multi-tenancy, roles, permissions, admin portal, billing, notifications, file storage — all of it had to be figured out before I could build what actually mattered.
So I packaged everything I built and battle-tested into TenantX.

What is TenantX?
TenantX is a Laravel 12 + React 18 + TypeScript B2B SaaS starter kit. Not a tutorial project. Not a side experiment. Extracted from a real production SaaS with real paying customers.
Stack:

Laravel 12 + PostgreSQL + Sanctum
React 18 + TypeScript + TanStack Query
shadcn/ui + Tailwind CSS
Spatie Permissions (team-scoped)
Docker ready

The architecture problem nobody talks about
Most Laravel boilerplates give you two levels — a user belongs to a team. That works for simple SaaS.
But real B2B SaaS needs more. Think of how tools like Slack, Notion, or Linear work:
Platform Admin
└── Organization (e.g. "Acme Corp")
└── Workspace (e.g. "Marketing Team")
└── User
This is 3-level multi-tenancy — and almost no Laravel boilerplate ships with it out of the box.
Getting this wrong early means refactoring your entire data model six months in, after you already have customers. I know because I've been there.

Why React + TypeScript instead of Livewire?
This is the question I get asked most.
Laravel's ecosystem has excellent Livewire tooling. But when I looked at what real B2B SaaS products need — the answer was clear.
Laravel officially shipped a React starter kit in February 2025. Spatie, the company behind 300+ Laravel packages, standardized their stack on Laravel + Inertia + React + TypeScript. The ecosystem is moving. Most boilerplates haven't caught up yet.
React + TypeScript gives you:

Type safety across your entire frontend — catch bugs at compile time, not runtime
A codebase junior developers can safely contribute to
The ability to add a mobile app later without rebuilding your API
Familiar tooling for the largest developer community in the world

With Livewire you're learning a new paradigm. With React you're using what your team already knows.

What's included
TenantX ships with everything a real B2B SaaS needs from day one:

✅ 3-level multi-tenancy (Platform → Organization → Workspace → User)
✅ Deep platform admin portal (plans, subscriptions, orgs, usage, files)
✅ Roles & permissions via Spatie (team-scoped)
✅ In-app help center
✅ Activity logs + login audit trail
✅ File storage system
✅ Notification system
✅ In-app translation editor
✅ English + Arabic with full RTL support
✅ Docker ready
✅ AGENTS.md + Cursor rules for AI-assisted development

The RTL story
One thing I haven't seen any other Laravel boilerplate ship — RTL support.
Building for Arabic-speaking markets meant supporting a right-to-left interface from the ground up. RTL typically adds 25–35% extra development cost to any SaaS project when added after the fact.
TenantX ships with English and Arabic out of the box — full RTL included. If you're building for Arabic markets there is literally no other Laravel boilerplate that covers you.

What I learned extracting production code into a kit
This was harder than building the original features.

  1. You discover how many implicit assumptions live in your codebase. Things that "just worked" because of your specific data or environment break immediately when you try to generalize them.
  2. Seeders are harder than migrations. Getting a demo seeder that works cleanly across fresh installs — with the right roles, permissions, organizations, and workspaces — took longer than expected.
  3. Documentation is a product. Shipping the code is 50% of the work. Writing AGENTS.md and Cursor rules so developers can actually understand and extend the architecture took the other 50%.
  4. The extraction process revealed dead code. Features that made sense for the original product didn't belong in a general starter kit. Cutting them was painful but necessary.

Who TenantX is for

Laravel developers building B2B SaaS who need multi-tenancy without architecting it from scratch
Agencies who want to standardize their SaaS foundation and quote faster timelines
Indie hackers who want to ship and charge customers this week, not next quarter
CTOs who need a production-ready foundation their team can trust

What's next
TenantX is launching at $399 founding member price at tenantx.dev.
A live demo is coming — log in as platform admin, create an organization, add a workspace, manage users, and see the full flow without installing anything.
I'll be writing more about the technical decisions behind TenantX — multi-tenancy architecture, React + TypeScript + Laravel, and building in public as a solo founder.
Follow along if that's useful.

https://tenantx.dev

Built from real production code. Extracted so you don't have to start from scratch.

Top comments (0)