Indie Web Stack of the Future

What Makes a Great Stack

Let's say you're a solopreneur building a web-based software-as-a-service (SaaS) in 2023. You want to put together a tech stack that's going to be well suited to your specific needs as an indie developer. These goals are going to differ in meaningful ways from venture-backed and enterprise scale product building endeavors.

Given we're building on the web and targeting business-to-business (B2B), let's sketch out a rough outline of tech stack.¹

• We'll want to have some kind of backend that manages our business logic and statefulness,
• To complement this we'll want a web frontend that's likely presented as a dashboard, which consumes said backend.

This is a high-level and perhaps somewhat obvious structure. It's also incomplete, by design.² However as an indie hacker, it's worth tailoring our stack to our specific needs. Our goals and priorities our different so let's be sure to build around them.

• For instance, shipping quickly to validate ideas is at a premium for us and we should select for this capability,
• As well as taking care to minimize our costs along the way; we are bootstrapped after all.

Given these properties, let's dig into both the backend and frontend and propose a suite of technology that'll propel us into the future as we build our indie SaaS.

Backend Without Déjà Vu

Starting with the backend, high velocity means not having to rebuild functionality that's been solved many times over. For instance, user management.³ While web frameworks can help here, they still leave important infrastructure questions unanswered.⁴

This is where platform-as-a-service (PaaS) vendors like Heroku and backend-as-service (BaaS) vendors like Firebase have really shone. Especially Firebase, which provides an opinionated approach to application development and includes builtin user management, instrumentation, and storage. Having a platform take care of these things for us allows us to move quickly and focus on the parts of our product that drive value.

That said, there is a drawback to these services: they're largely proprietary systems which do come at a premium. Once you're locked in, then you're probably stuck forking over whatever Salesforce or Google demand. Further, with Google now overseeing Firebase, it's unclear what the future of the platform will be.

All that has led to a wellspring of innovation in the BaaS space. Today there's a cadre of fresh contenders including: AWS Amplify, AppWrite, NHost, Pocketbase, Supabase, and more. We won't go over each in detail and instead focus on Supabase as one of the standouts that aligns with our indie frame.

Supabase is a BaaS which provides a similar feature set to Firebase. It's built on top of PostgreSQL which means it provides some nice features like Row-Level Security for authorization and both REST and GraphQL APIs with handy SDKs.⁵ Additionally you can either leverage the managed service (available from a free tier) or self host. This means we can get started quickly with the managed service and then scale our costs later by opting to either continue or self host.

To leverage this in our indie stack, we'll use Supabase to provide user management and storage as well as other platform considerations like serverless functions and object storage. Then we'll encapsulate our business logic into an application. This could be written in whatever language we want, could be composed of multiple services, and so on.

Altogether Supabase provides a high velocity, low cost platform on which to build our SaaS.

The Holistic Frontend

Moving on to the frontend, here we maintain the same goal of product velocity: We want to spend as little time as possible reinventing user interfaces and integrating that with our backend. Fortunately, Supabase has fantastic support for what may be the most popular JavaScript UI framework of all time: React.

As a brief aside, React itself is not without its warts and drawbacks. There are plenty of alternatives which offer compelling paradigm shifts. That said, React continues to be the center of gravity and rather than spend our time going against inertia we can benefit from the ubiquity of React by adopting it.

React is itself a kind of building block and again in the interest of emphasizing time spent building, we want to select a framework built on top of React. Next.js will suit our needs here well. Further, Next.js presents some additional options for how we might build our application: with it we can build the business logic of our SaaS directly without needing to partition our frontend and backend.⁶

Deploying Next.js deserves some thought. Next.js is developed by Vercel, which provides a JAMStack cloud offering. There's some nice features here and it starts off free.⁷ It's worth noting that Next.js is being built such that it can be deployed across a wide array of providers including Cloudflare, Netlify, and of course anywhere Node runs, so Vercel is convenient but not a core piece of this stack.

However, that's really only half our frontend tech. We still need to consider how we'll design and implement the user interface. For this, we need React components and the last thing we want to be doing here is building these ourselves. There are many systems readily available, but Radix provides a headless solution that's quite comprehensive.

Now we'll need to give these components some paint. Tailwind CSS is a rising star in the world of CSS frameworks and while it's not without its critics, it enables a workflow that's relevant to our agenda: with it, you can quickly iterate on your UI. Minimal abstraction over CSS and co-location of the markup and styling unlocks something that was simply not possible before. We can tie Radix and Tailwind together with a convenient package.

Recapping our frontend tech, that leaves us with:

• Next.js for our web UI framework,
• Radix plus Tailwind CSS for our design system,
• And Vercel as the deployment surface (or any other number of cloud providers).

That about wraps up our frontend considerations. These choices are structured around our product velocity goals and aimed at yielding fast iteration with strong focus on core product development.

It's Never Been Better to Be Indie

With Supabase covering our backend and platform components and Next.js on the frontend, we have the foundation of an indie SaaS tech stack that suits our unique criteria of fast product velocity at a low cost. Leveraging a BaaS means we no longer need to spend our cycles building yet another user management system. Supabase specifically allows us to tap into the power of PostgreSQL and provides a powerful platform at minimal cost.

React and Next.js continue to be dominate forces in the JavaScript web UI space and as such are excellent candidates for our needs–we can reap the benefits of countless developer hours already having been spent on these projects. We pair these with Radix and Tailwind CSS to complete the frontend tech stack.

Hopefully this overview has been helpful and has given you some ideas for your own projects. Whether you use these pieces or entirely different things the fact that the quality of free and open source web technology continues to improve means that there's truly never been a better time to be an indie.

Happy hacking!

Footnotes

1. If you were instead building a business-to-consumer (B2C) product, you might take some of this stack and augment it with components more appropriate for e.g. mobile. We won't cover B2C product building in this overview but shoot me an email if you'd like some pointers. ↩

2. For a comprehensive deep dive into the structure of SaaS, see The Four Interfaces of SaaS Products. ↩

3. In fact, if you're still in the idea validation stage, you can very likely skip this altogether! ↩

4. Remember that ops is a full-time job. ↩

5. There's actually quite a bit here. One piece of functionality worth pointing out but that's largely beyond the scope of this article is real-time. Supabase provides facilities for this which when combined with other things could enable some quite powerful UI that historically would require large product and engineering teams to execute. ↩

6. Yes, our frontend can have a backend. This might actually be the ideal pattern for straightforward business logic. ↩

7. The analytics are pretty nifty and further integrations are available. ↩