The perfect stack for little (and big) SaaS projects
One of the issues I face the most when working on my side projects is motivation: it doesn’t last forever and it will plummet when there is no progress. For this reason, it’s crucial to find a stack that makes progress fast and visible. In the last year, I’ve been looking to find a stack with this precise goal in mind. This is what I found to be my favourite and the one that allows for faster progress.
Backend: Supabase
As a designer, it’s fairly easy to understand front-end development, but I still get frustrated when I have to deal with databases, APIs, and servers. I needed a tool to simplify this for me.
I briefly got into the world of full-stack frameworks with Ruby on Rails, after a friend recommended it to me. I was very impressed by how quickly I got a web app up and running. However, the time I saved thanks to RoR’s ease of use was spent figuring out how to get basic things done in Ruby, a language I wasn’t familiar with. Having spent years learning JavaScript, I wasn’t ready to drop it completely, so I looked for alternatives.
Then my attention was caught by Firebase, which takes care of exactly what I needed. Firebase is a Backend-as-a-Service by Google. It gives you a database, a GUI to manage it, and lets you access it through a simple and ready-to-use API with built-in CRUD operations. I don’t have a good experience with developer products by Google, so I opted for an open-source alternative called Supabase. Supabase is quickly catching up on the features offered by Firebase and, in my opinion, offers a way better user experience.
Frontend: Next.js
I had already developed my online portfolio using Next.js and I had a very good experience. Next.js is a framework that extends React and sets up your project in a way that works for most projects. For example, it gives a standardized way to take care of both static and dynamic routing.
It also sets up your project with Webpack, which bundles your JavaScript into a few big files that are compatible with older versions of JavaScript, PostCSS and a plug-in for PostCSS called Autoprefixer, which automatically adds vendor prefixes to your CSS.
Hosting: Vercel
Vercel is the company behind Next.js, and they also offer hosting that integrates perfectly with Next.js applications. It works very similarly to Netlify, but it enables you to deploy server-side-rendered apps.
As I said, I’m not an expert in backend development, and Vercel does a perfect job by letting me deploy apps without delving into the technicalities.
CSS: Tailwind
After being recommended by a lot of people, I put my skepticism aside and gave Tailwind a try. Tailwind is a CSS library that relies on non-semantic classes to style elements. That means instead of having to come up with a name for every element in your page, you can just style them using Tailwind’s predefined classes. There are classes for every CSS property, so you almost never have to create new classes.
I was initially skeptical because it meant I would have to memorize all the class names, which sometimes feel a bit arbitrary. However, the learning curve smooths out very quickly and I was able to speed up my styling by several times. I no longer have to continuously switch between JS and CSS and this helps me stay focused.
One problem with Tailwind is that it will make markup very verbose. One way to go around this is to use CSS Modules, another PostCSS plugin. However, I personally prefer to keep it simple and tolerate a bit of a messier markup.
The blessing of Tailwind is that it’s great for both small projects that need to be developed quickly, and big projects that need to scale.
In conclusion, this stack works perfectly for me because I was familiar with the patterns and technologies behind it. If you’re new to React, using Next.js might be just as hard as it was for me to digest the MVC (Model-View-Controller) pattern used in full-stack frameworks.
Although people usually pay a lot of attention to it, the framework for frontend is actually the least important part. It can be pretty much swapped for any other framework because the rest of the stack is framework-agnostic. Many people prefer to use Vue with Nuxt.js for example.
If you want to give Next.js a try, here’s an example by Vercel with this exact stack, already set up with payments and subscriptions. If not, Supabase has guides and examples for usage with other frameworks. Whatever framework you choose, stick to it and remember that a framework is only as good as the time it saves you.
