Tech stack for SaaS: what I use to build Flow

Filed under Guide

By Gerald · 6 July 2026

Choosing a tech stack is the first real decision you make when building a product, and it is also the decision you will live with the longest. I have rebuilt stacks before. I have migrated databases, replaced build tools, and regretted early choices that seemed clever at the time. When I started Flow, I wanted a stack that would stay out of my way, scale without drama, and not drain my credit card before I had customers.

This is the complete stack I use, what each layer costs, and what I would change if I were starting again today.

The best SaaS stack is the one you can build and ship with alone. Every fancy tool that requires a dedicated ops person is a liability when you are the only person building.

The full stack at a glance

That is nine tools across nine layers. Some are free at my current scale. Others are not. I will break each one down, explain why it was chosen over the alternatives, and tell you where the hidden costs live.

Frontend: React, Vite, TypeScript, Tailwind CSS, and shadcn/ui

React and TypeScript

I have built with Vue and Svelte, plus plain JavaScript. I keep coming back to React because the ecosystem is the deepest, the hiring pool is the widest, and the patterns are familiar enough that I do not waste mental energy on framework quirks. TypeScript is non-negotiable. The time it saves catching type errors before they reach production is worth every extra keystroke.

React is not perfect. The ecosystem moves fast, and some patterns from two years ago are already considered outdated. But for a solo founder, the ability to copy a Stack Overflow answer, install a well-maintained library, or find a contractor who knows the stack is a real advantage.

Vite

I moved every project to Vite after years with Webpack. The development server starts in under a second. Hot module replacement is fast enough that you stop noticing it. Production builds are clean and tree-shaken. The configuration file for Flow is about twenty lines.

Vite handles TypeScript, JSX, and CSS, plus static assets out of the box. I added only a plugin for environment variables and one for SVG imports. That is the full plugin list. For a deeper look, see my full Vite review.

Tailwind CSS

I used to write custom CSS for every component. Now I reach for Tailwind first. It removes the decision fatigue of naming classes, organizing stylesheets, and maintaining a design system. The utility-first approach feels verbose at first, but it makes UI iteration fast because every style change happens in the component file you are already editing.

The tradeoff is that your markup gets noisy. A complex component can have twenty utility classes on a single element. I accept that tradeoff because the speed of iteration matters more than the cleanliness of the HTML when you are shipping alone.

shadcn/ui

shadcn/ui is a collection of accessible, customizable components built on Radix UI and Tailwind. You copy the component code into your project rather than installing it as a dependency. That means you own the code, you can modify it freely, and you are not waiting for a package maintainer to fix a bug.

Flow uses shadcn/ui for dialogs, dropdowns, tables, plus form inputs. It saved me weeks of building accessible components from scratch. The components are well-designed defaults that you customize to match your product, not a rigid design system you fight against.

Backend: Convex

I have managed Postgres and MySQL, plus Firebase backends. Convex is the first backend where I spend almost no time thinking about infrastructure.

Convex is a reactive database with built-in functions, auth, file storage, and scheduled jobs. You write queries and mutations as TypeScript functions. The frontend subscribes to those queries, and every connected client updates automatically when the data changes. I do not write websocket handlers. I do not manage cache invalidation. I write the query, and Convex handles the live behavior.

For Flow, this means moving a task on a kanban board updates every open tab instantly. Editing a note propagates to every device without me writing a single line of sync logic. That is not a premium feature or a plugin. It is how Convex works by default.

The TypeScript integration is tight. The CLI generates types that flow directly into the React client. Change a function argument, and the frontend shows a type error immediately. There is no REST schema to maintain, no GraphQL type generation step, and no API documentation to keep in sync.

The honest downside is cost at scale. Convex is free for development and small apps. Paid plans start at $25 per developer per month plus usage-based charges for storage, function calls, and bandwidth. For a solo builder with real users, that can add up faster than a simple VPS and Postgres setup. I wrote a full Convex review after months of production use, and my opinion has not changed: the developer experience is excellent, but you should model your costs before committing.

If you want to understand the broader backend decision, my article on what is Convex explains the platform in plain terms, and my Convex vs Supabase comparison covers the main alternative.

Deployment: Vercel

Flow deploys through Vercel. I push to GitHub, and the site builds and deploys in under a minute. Preview deployments appear automatically for every branch. SSL and CDN are handled without configuration.

The free tier covers most early-stage projects. The Pro plan is $20 per user per month with 1 TB of bandwidth. Bandwidth overages cost $40 per 100 GB, which can surprise you if your site serves large assets. For now, Flow lives comfortably on the free tier. If traffic grows significantly, I will need to watch the bandwidth meter or move static assets to a separate CDN.

I evaluated Cloudflare Pages and Netlify during the build. Vercel won on speed of setup and Vite support, not on price or portability. My Vercel review covers the full breakdown, including when Netlify or Cloudflare Pages make more sense.

Email: Resend

I have used SendGrid and Mailgun, plus AWS SES. Resend is the first email service that feels like it was built by people who actually ship code.

The API is clean. The Node.js SDK is small and typed. Authentication is a simple API key. The dashboard shows sends, deliveries, bounces, plus clicks without demanding your attention. Webhooks POST clean JSON that you can parse without a utility function.

Resend integrates natively with React Email, which lets you build email templates as React components. Flow's password reset emails, admin invites, and newsletter confirmations all live in the codebase as components. That means version control, type checking, and code review apply to email the same way they apply to everything else.

Pricing is simple. The free tier includes 3,000 emails per month. Pro is $20 per month for 50,000 emails. There are no hidden charges for dedicated IPs or webhook calls. My full Resend review goes deeper, and my comparison of Resend vs SendGrid explains when each makes sense.

Payments: Stripe and Lemon Squeezy

Flow has two payment paths. For credit card subscriptions, I use Stripe. For one-time purchases, I use Lemon Squeezy.

Stripe is the default for a reason. The APIs are well-documented, the dashboard is thorough, and the ecosystem of third-party tools is enormous. Stripe handles subscriptions, invoicing, tax collection, and payout scheduling. The downside is complexity. Stripe can do everything, which means you spend time learning which features you actually need and ignoring the rest.

Lemon Squeezy is simpler. It handles one-time sales, license key generation, and basic tax compliance with less configuration. The fees are higher than Stripe in some cases, but the reduced setup time is worth it for a product that does not need Stripe's full depth.

Using two payment providers is not ideal. It means two dashboards, two sets of webhooks, and two tax records to reconcile. I accept that because each tool fits its specific job better than the other.

Version control: GitHub

I have used GitHub since 2012. Flow's codebase, issues, plus CI/CD pipeline all live there.

GitHub Actions handles automated testing on every push and triggers deployments. The integration with Vercel is seamless: push a branch, get a preview URL, merge to main, go live. I also pay for GitHub Copilot because the coding assistance saves real time on boilerplate and repetitive patterns.

The honest cost is that GitHub's pricing has crept upward. Copilot Pro is $19 per user per month. Team plans are $4 per user per month. For a solo founder, that is manageable. For a growing team, it adds up. My GitHub review covers the full picture, and my Git workflow for solo founders explains how I use it day to day.

AI: OpenAI API and Vercel AI SDK

Flow uses AI for smart features like text summarization, task suggestions, and content generation. The OpenAI API is the engine. The Vercel AI SDK is the interface layer that handles streaming, error boundaries, and client-side state.

The Vercel AI SDK makes it easy to stream responses to the UI without managing websocket connections or custom loading states. You define a server action, call the OpenAI API, and stream the response back to the component. The SDK handles the rest.

The cost is usage-based and can spike quickly. A single GPT-4o request costs fractions of a cent, but if every user generates content multiple times per session, the monthly bill becomes real. I monitor usage closely and fall back to cheaper models for simple tasks.

Other tools: Cloudinary and Cloudflare

Cloudinary hosts Flow's images and generates responsive sizes automatically. You upload one image, and Cloudinary serves it in WebP, resized for the requesting device, from a global CDN. The free tier is generous for most projects.

Cloudflare manages DNS, DDoS protection, and caching rules for the domain. It sits in front of Vercel, which adds a layer of control over traffic and security without adding latency. The free plan handles everything a small SaaS needs.

What the stack costs per month

At Flow's current scale, the monthly bill looks like this:

The fixed infrastructure cost is roughly $25 per month, mostly Copilot and occasional AI API usage. The variable costs are payment processing fees and AI usage, which scale with revenue and feature use.

This is one of the real advantages of building a SaaS in 2026. The free tiers of modern tools are generous enough that you can build and launch, plus acquire your first paying customers without a monthly infrastructure bill. The costs arrive only when you have the revenue to justify them.

Honest regrets: what I would change

If I were starting Flow again today, I would keep most of the stack. There are only two things I would do differently.

First, I would think harder about the payment stack before committing to two providers. Stripe and Lemon Squeezy each do their job well, but maintaining two integrations creates real overhead. If Flow were purely subscription-based, Stripe alone would be enough. If it were purely one-time, Lemon Squeezy might handle everything. The dual setup made sense for offering both models, but it complicates accounting, webhook handling, and customer support.

Second, I would set stricter AI usage limits from day one. It is easy to add AI features that feel magical in demos but cost more than expected in production. Users will generate content more frequently than you anticipate. Without rate limiting and cost monitoring, a single busy day can produce a surprising bill. I now cap individual user usage and route simple tasks to cheaper models automatically.

Everything else has held up. Vite is still fast. Convex still stays out of the way. Vercel still deploys in seconds. Resend still sends email without drama. The stack has not become the work, which is the highest compliment I can give it.

Who this stack suits

This stack is built for a specific profile.

It fits if:

• You are a solo founder or a small team shipping a web-based SaaS
• You value developer speed over infrastructure control
• Your product is frontend-heavy with reactive, real-time features
• You want to launch without a monthly infrastructure bill
• You are comfortable with TypeScript and React

It does not fit if:

• You need complex SQL reporting or business intelligence queries
• You are building a mobile-native app rather than a web app
• You have strict data residency requirements that conflict with cloud platforms
• You want to self-host everything for compliance or philosophical reasons

Frequently asked questions

What is the best tech stack for SaaS? There is no single best stack. The right choice depends on your team's skills, your product's requirements, and your budget. For a solo founder building a reactive web app, the combination of React, Vite, TypeScript, a modern backend like Convex, and a frontend host like Vercel is hard to beat for speed of development.

How much does it cost to run a SaaS? At small scale, you can run a SaaS for under $50 per month using free tiers. As you grow, expect to pay for database hosting, email volume and bandwidth, plus AI usage. The key is that modern platforms let you delay most costs until you have revenue to cover them.

Should I use Next.js or Vite? Use Next.js if you need server-side rendering, static site generation, file-based routing, or API routes built in. Use Vite if you are building a client-side rendered single-page application and want full control over routing and state management. For Flow, Vite was the right choice because the app is a reactive SPA. For a content site that needs SEO-friendly server rendering, Next.js would be better.

What backend should I use for SaaS? If you want SQL, complex joins, and a large ecosystem, use Postgres on Supabase or a managed service like Railway. If you want reactive real-time sync, TypeScript everywhere, and minimal backend code, use Convex. Firebase is still viable if you are deep in the Google ecosystem. The honest answer is to build one real feature on each candidate and see which stays out of your way.

Is it worth paying for developer tools when free alternatives exist? Sometimes. GitHub Copilot saves me real time, so I pay for it. Vercel's free tier handles my deployment needs, so I do not pay yet. The rule is simple: pay for tools that remove work you would otherwise do yourself, and stay on free tiers for everything else until the limits become real blockers.

Can I build a SaaS alone? Yes. The tools available in 2026 make it possible to build and deploy, plus operate a SaaS as a single developer. The stack described here is designed for that exact scenario. The challenge is not technical capability. It is focus and time, plus the willingness to make decisions without a committee.

Related reading

• Vite review: why I moved every project to it
• Convex review: a backend that stays out of your way
• Vercel review: great for Next.js, but not the only choice
• Resend review: email for developers who have tried everything else
• GitHub review: still the default, still worth it?
• Why I built Flow
• Self-hosted note-taking: own your data without running a server

My verdict

The best tech stack is the one that lets you ship. Not the one with the most features, the newest framework, or the loudest community. The one that removes decisions, reduces friction, and stays out of your way while you build something people want.

This stack has done that for Flow. It is not perfect, and it will not be the right choice for every product. But for a solo founder building a modern web app in 2026, it is a solid, proven foundation that costs almost nothing to start and scales honestly as you grow.