Our experience with SaaS stacks has led me to discover a combination that has proven highly successful. During the development process, I prioritized the following key factors:
- Initial affordability: I aimed to avoid excessive costs when validating a simple idea. Therefore, I sought solutions that were either free or extremely budget-friendly.
- Scalability: It was crucial for the stack to offer automatic and seamless scalability, ensuring smooth growth without any roadblocks.
- Streamlined maintenance: The stack should be manageable by a single individual, both presently and in the future. I aimed to minimize the need for extensive coding expertise.
- Leveraging existing tools: Rather than reinventing the wheel, I focused on solving the core business problem of my SaaS, leaving tasks such as authentication and billing APIs to established solutions.
If these criteria resonate with your goals, I encourage you to explore the following details.
Core Platforms
- Webflow: For the primary website, I chose Webflow. Since marketing is the main purpose of consumer-facing sites, I opted for a no-code solution. This allows easy handover to freelancers or marketing teams when necessary. Webflow also provides a variety of wireframes and templates for convenient copy-pasting. Typically, I can develop such a website in a day or two.
- Outseta: To handle billing, user and team accounts, CRM, user-oriented billing dashboards, and automated email marketing, I rely on Outseta. It performs heavy lifting in these areas. While it’s the only tool in the list without a free tier, its extensive functionalities and minimal 1% sales fee make it well worth the investment. Outseta offers many other features, but these are the aspects I primarily utilize.
- Sanity: For the admin dashboard and database, I employ Sanity. It serves as a database with an intuitively clean and customizable dashboard interface. While I used Firebase in the past, switching to Sanity was necessary when I needed to hand over control to non-technical individuals.
- Next.js: Next.js is my framework of choice for building the user dashboard and APIs. I integrate Outseta for gated dashboard content and fetch data from Sanity, including API keys and user information, catering to various needs your application might have.
Although there are additional tools I often use, these four platforms are my primary go-to solutions for nearly every SaaS project. Now, let’s delve into optional components.
Architecture
In most cases, I opt to divide the frontend across multiple subdomains. Depending on the specific requirements of the SaaS, the frontend typically consists of the following sections:
example.com: This subdomain houses the main marketing website, built using Webflow.app.example.com: Next.js powers the user dashboard in this subdomain. It requires an Outseta login and fetches data from Sanity.admin.example.com: The admin dashboard resides here, developed with Sanity. It serves as a centralized location to access user information and make necessary data edits.docs.example.com: For technical documentation, I use Docusaurus to build a dedicated documentation site. However, if the product is non-technical and doesn’t require features like syntax highlighting, I incorporate the documentation directly into the Webflow site.
Dividing the site into smaller subdomains offers considerable flexibility for startups, making it easy to pivot when needed. If changes are necessary for the blog section, for example, there won’t be any unintended effects on documentation, e-commerce, or landing pages. For startups, agility is of utmost importance, allowing frequent adjustments based on valuable user feedback.
Some argue that such an architecture results in a disjointed user experience throughout the stack. However, I counter this by emphasizing that the UI should adapt to cater to users at different stages of their journey. For instance, paying customers who engage with the dashboard likely don’t need redundant calls-to-action (CTAs) in the navigation since they are already subscribed. In fact, overwhelming users with irrelevant paths can potentially decrease conversion rates. Keeping the path to conversion simple, clear, and tailored to customers’ needs at that precise moment is vital.
Infrastructure
To manage both the user dashboard (Next.js) and the admin dashboard (Sanity), I house them within a monorepo. This setup offers easier management and enables code reuse when necessary.
- GitHub: I rely on GitHub for source code management and scheduling tasks using GitHub Actions for long-running workflows.
- Vercel: Vercel hosts the user dashboard.
- Namecheap: For domain registration and email server needs.
- Cloudflare: I use Cloudflare as a DNS registrar and sometimes leverage its CDN caching capabilities.
- Gmail: As my email client, I connect it to a $0.91/mo Namecheap email server using Gmail Fetcher.
- Stripe: Outseta requires payment processing capabilities, and I rely on Stripe for that purpose. However, I avoid direct integration with Stripe to reduce the need for extensive custom code and to benefit from Outseta’s time-saving features, such as team management and CRM integration.
Languages & Frameworks
- JavaScript: JavaScript serves as the programming language for both the frontend and backend. It powers Next.js and Sanity.
- React: As the leading UI framework, React is my framework of choice for developing user interfaces. It is extensively used by both Next.js and Sanity. Leveraging the popularity of React allows easy integration with various open-source projects, significantly saving development time.
- Tailwind CSS: Although I am generally skeptical of CSS frameworks, I have recently adopted Tailwind CSS due to its ability to fulfill most of my requirements. It offers a broad range of existing components, including those available in Tailwind UI, which can be effortlessly copied and pasted into projects.
Optional Components
While not always necessary, the following components can be beneficial in specific situations:
- Crisp: For a chat widget, I utilize Crisp. It supports multiple brands and offers a mobile app that simplifies helpdesk management.
- Sendgrid: When transactional emails are needed for complex scenarios beyond the capabilities of Outseta, I rely on Sendgrid’s email API.
- Gumroad: Instead of Outseta, I sometimes employ Gumroad. It is ideal for simpler products like e-books or source code, eliminating the need for a comprehensive dashboard for customers.
- Docusaurus: For technical products, I write documentation in markdown and generate a dedicated documentation site using Docusaurus. However, for non-technical products that don’t require advanced features like syntax highlighting, I incorporate documentation directly into the Webflow site.
- Cloudinary: While it’s possible to upload images to Sanity, Cloudinary may offer cost advantages at high volumes when dealing with numerous user-generated images.
Summary
Typically, my monthly overhead ranges from $40 to $60, depending on usage. Initially, only the domain name and Outseta subscription require payment. Other services remain free until usage surpasses their respective free tiers. However, by properly pricing your product, ongoing revenue should cover usage costs. Ideally, your pricing structure should ensure that a single customer’s contribution covers your entire monthly overhead.
An additional advantage of this stack is its rapid development time. Leveraging low-code solutions enables fast development cycles. Naturally, the duration can vary significantly depending on the project’s complexity. However, in general, I can quickly build or replicate a Webflow site using templates, define the necessary schemas in Sanity, and integrate APIs, forms, and tables in Next.js for user data access and manipulation. This approach eliminates the need to manually build an admin dashboard, implement authentication, or create a marketing website from scratch based on a mock-up. Typically, I can have a minimum viable product (MVP) up and running in a matter of weeks, or even days.
It’s important to note that this is the stack that has proven successful for me. It’s essential to consider your own judgment, skills, and experience when making decisions regarding your specific requirements. If you are working on behalf of a client, tailor your choices to align with their skills and needs.
