HZ.
←Back to Writing
December 28, 2025·7 min read

The Stack I Use to Build SaaS Products Solo

Building a SaaS product solo means every decision carries weight. There's no team to pick up the slack, no endless budget for experimentation. Your tech stack isn't just a collection of tools; it's your co-founder, your operations team, and your marketing department all rolled into one. This is the exact stack I use to build and ship SaaS products, and the reasoning behind each choice. It's for designers learning to code, and developers who want to understand the design-first approach.

React + Next.js: The Foundation for Speed and Scale

I start with React, but always layer Next.js on top. Plain React is powerful, but Next.js provides critical advantages for solo builders and growing products.

  • Why Next.js over plain React:
    • Routing: Built-in file-system based routing simplifies navigation and code organization.
    • SSR (Server-Side Rendering) / SSG (Static Site Generation): Essential for performance and SEO. My marketing pages need to be fast and discoverable, and my app needs to load quickly for users.
    • Deployment: Next.js integrates seamlessly with platforms like Vercel, making deployment a non-issue. It's the fastest path from code to live.

TypeScript: Catching Bugs Before They Ship

Some might see TypeScript as overhead for a solo project. I see it as a safety net and a time-saver. Even when I'm the only developer, mistakes happen. TypeScript catches a whole class of errors before I even run the code.

  • Why I use it even for solo projects:
    • Catches Bugs: Type errors are caught at compile time, not runtime. This means fewer surprises in production and less time debugging.
    • Self-Documenting Code: Explicit types make the codebase easier to understand and maintain, especially when returning to a project after a break.
    • Improved Developer Experience: IDEs provide better autocompletion and refactoring tools with TypeScript, speeding up development.

Tailwind CSS: Design Tokens in Code

Tailwind CSS is a game-changer for design engineers. It bridges the gap between design and code by allowing me to apply design tokens directly in my markup.

  • Why it works for designer-developers:
    • No Context Switching: I don't need to jump between CSS files and my component code. All styling is applied directly where it's needed.
    • Design Tokens in Code: My Figma design system translates directly into Tailwind's utility classes. This ensures consistency and makes it easy to implement design changes globally.
    • Rapid Prototyping: I can quickly build and iterate on UI without writing custom CSS, which is crucial for startup speed.

shadcn/ui: Customizable Components, Own the Code

I chose shadcn/ui over other component libraries like Material UI or Chakra UI for a critical reason: ownership and customization.

  • Why I chose it:
    • Customizable: It provides a set of beautifully designed, unstyled components that I can easily customize to match my brand's aesthetic.
    • Owns the Code: Unlike other libraries where components are imported as black boxes, shadcn/ui allows me to copy the component code directly into my project. This means full control, easy modifications, and no dependency lock-in.
    • Looks Good by Default: The default styling is clean and modern, providing a strong starting point that requires minimal tweaking.

Stripe: Payment Integration Lessons from Shotframe

For any SaaS product, payment processing is non-negotiable. Stripe is the industry standard for a reason.

  • Payment Integration Lessons:
    • Developer-Friendly APIs: Stripe's documentation and SDKs are excellent, making integration relatively straightforward.
    • Subscription Management: For SaaS, recurring revenue is key. Stripe's subscription features handle billing cycles, trials, and upgrades with minimal effort.
    • Security and Compliance: They handle the complexities of PCI compliance, allowing me to focus on my product.

Vercel: The Fastest Path from Code to Live

Vercel is my deployment platform of choice for Next.js applications. It's built for speed and developer experience.

  • Why it's the fastest path:
    • Zero-Config Deployment: Connect your GitHub repository, and Vercel handles the rest. No complex server setup or configuration.
    • Global CDN: My applications are fast for users worldwide, thanks to Vercel's global content delivery network.
    • Automatic Scaling: As my product grows, Vercel scales automatically, ensuring performance under load.

Figma: Still the Starting Point

Even when I code everything myself, Figma remains my starting point for conceptualization and visual exploration. It's where ideas take shape before they hit the browser.

  • Figma's Role:
    • Wireframing and Prototyping: Quickly sketch out user flows and test interactions.
    • Design System Definition: Define colors, typography, and component states that will be translated into code.
    • Collaboration (with myself): It's a visual sandbox to experiment before committing to code.

Framer and Webflow: When I Use These Instead of Custom Code

While I prefer custom code for SaaS products, there are specific use cases where Framer or Webflow are the right tools.

  • Framer: Best for highly interactive marketing sites, portfolios, or landing pages where animations and visual flair are paramount, and a CMS is not a primary concern. It's incredibly fast for shipping visually rich experiences.
  • Webflow: Ideal for content-heavy websites, blogs, or client projects where a robust CMS and strong SEO capabilities are required, and the client needs to manage content without touching code.

What I'd Add Next If Scaling

This stack is optimized for solo building and rapid iteration. If Shotframe were to scale significantly, here's what I'd add:

  • Database: A robust database solution (e.g., PostgreSQL with Prisma ORM) for more complex data management.
  • Authentication: A dedicated authentication service (e.g., Auth.js, Clerk) for advanced user management and security.
  • Analytics: More in-depth analytics tools beyond basic page views to understand user behavior and product performance.

Conclusion

This stack allows me to operate as a true design engineer: designing with taste, building with production-quality code, and shipping with startup speed. It's a lean, powerful setup that maximizes output and minimizes friction, proving that one person can indeed design it, build it, and ship it.