As someone who loves cutting-edge technology, I choose to build my first SaaS with a modern tech stack. With the rise of and architecture, I created with Next JS static generation for the frontend and the Node.js backend deployed to AWS. JAMStack serverless PostMage Because I'm a solo full-stack developer, my time and resources are extremely limited. In this article, I'll share all the technologies I use to : from programming language to development tools. You'll find how I overcome this challenge to build a SaaS as a solo developer. build my SaaS product Hope my story gives you the inspiration to create your SaaS products. TypeScript Everywhere For building my SaaS, I wrote every line of code in . Yes, all the code: Frontend, Backend and also, Infrastructure as code in TypeScript. TypeScript The whole project only uses one and unique programming language. No time to learn new languages and save time by making the code easy to maintain. Why did I choose ? It makes the development much more pleasant with strongly-typed and has better integration to IDE. So, if you are still a JavaScript developer, you should give it a try. TypeScript Frontend framework For the frontend, I use . It's a to build a complex application. The good news, Next JS supports TypeScript out-of-the-box. Next.js React framework I use styling the React components. As a developer, you usually build an ugly interface. With Tailwind CSS, you can have now build a not so ugly interface even if you aren't a designer. Tailwind CSS As a true believer of JAMStack, I have previously taken some time to try Jekyll, Hexo and 11ty for different projects. I choose to build my SaaS in . So, at build time, all the pages are generated and pre-rendered. Perfect for SEO, cheap hosting, fast, secure, and highly scalable. static generated mode using Next JS Static hosting I use as a hosting service for the frontend, it's a brand new alternative to Netlify or Vercel. Cloudflare has announced it in December 2020 in beta and released it to the public in April 2021. Cloudflare Pages There is some small missing feature (nothing big) in Pages. Until the Cloudflare team solve it, I've found temporary workarounds. So, it isn't a big deal. The good thing about is its generous free tier: unlimited bandwidth (Vercel and Netlify are limited to 100GB per month) and you can set up a password-protected website for free (not included for free in Vercel or Netlify). Cloudflare Page Serverless REST API On the backend side, I've built a REST API with and . To support TypeScript in , I use a plugin. Express.js needs another plugin to work with Serverless Framework named . Express.js Serverless Framework Serverless Framework serverless-bundle serverless-http For better developer experience, I've also used two other plugins: and . The first plugin is to support dotenv files and the second one is to run Serverless Framework on your local computer. serverless-dotenv-plugin serverless-offline As a solo developer, I choose serverless architecture for making my life easier with . No need to become a DevOps engineer: no need to SSH, make OS updates, configure proxy/webserver/load balancer/firewall, etc. easy deployment, low maintenance, and scalable backend Authentication The REST API is protected by the . It's AWS built-in feature to secure any AWS resources, in our case, API gateway and AWS lambda. It denies the API invocation when the user isn't connected to the SaaS application. So, when it's protected, external actors won't be able to invoke your resource. IAM authentication Because the API is deployed to AWS, I choose to use for authentication. The good thing is that Cognito saves a lot of time by providing everything you need to implement authentication for your SaaS. You get access without any effort to (Facebook, Google, Apple and Amazon). AWS Cognito Email authentication and Social sign-in The connection between AWS Cognito and React frontend is done through . Amplify provides React components and code for making your frontend integration to AWS easier and faster. AWS Amplify NoSQL Database Major and well-known databases like PostgreSQL and MySQL don't fit very well in Serverless architecture. Due to the nature of serverless, it can create a lot of connections to the database and exhaust the database connection limit. On most providers, even if you don't have any traffic on your SaaS, you still need to pay your DB instance. On the opposite, when your application starts to grow, your database can quickly become the bottleneck. As a solo full-stack developer, I wanted something extremely easy to manage and 100% compatible with serverless. So, I choose as a primary database. DynamoDB is a NoSQL database fully managed by AWS and I use it to store user states. They almost handle everything and I just need to focus on my code. DynamoDB Infrastructure as code As you can see, I use several AWS services for my SaaS app. It's extremely painful to set up manually cloud resources in each environment (development, staging or production) and hard to maintain consistency between them. AWS gives developers access to where you can define your cloud resources in . In one command, you can deploy to your AWS account and get everything provisioned. AWS CDK TypeScript Deployment Like many developers, I use for the version control of my code. Many modern hosting services like Vercel and Netlify, automatically build and deploy your code at each commit. If you work with Git branches, you can also preview the results without pushing them to production. Git and GitHub Cloudflare pages For the backend and the infrastructure, I use a third-party service named to deploy automatically at each commit. Like the frontend, it also builds and deploys the backend resources on AWS. Seed.run DNS and CDN As you can doubt, I use for DNS and CDN without any surprise ;) Cloudflare Pages automatically deploy your code in the Cloudflare network, I only need to point my domain to Cloudflare DNS server and they handle the rest. Using Cloudflare, you get plenty of security features like a firewall and a DDoS protection for your SaaS products. Cloudflare Error tracking I use as the error tracking solution. It automatically reports when something goes wrong with useful information like stack trace, breadcrumbs (a trail of events that happened before an issue), browser information, OS information, etc. It makes debugging in production much easier with enriched data: Sentry is only set up for the frontend and not for the REST API, I keep using the native solution. Indeed, with AWS lambda creates a lot of overhead and the setup wasn't straightforward. In the next section, you'll find the solution I use for error tracking in the backend. Sentry Sentry Logging, monitoring and alert AWS Lambda automatically sends logs to , so no need to use Sentry. Here is an example of logs stored in : AWS CloudWatch CloudWatch You also get access to your lambda metrics. Perfect to understand how your serverless functions behave and detect if there are any errors. I also use to have additional information for my logging and monitoring. The interface is easier to use compared to Cloudwatch: Lumigo You can also enable tracing in where you can visualize your AWS service and external API calls. It makes your debugging session easier by letting you know if there is an error in your code or it's from an external service. Lumigo Payment and subscription The last piece of a SaaS and the most important thing for a business is to accept payment. Accepting a one-time payment is hard but, the task for recurrent payment is much complex. Unfortunately, for a SaaS business, we need to handle the second case. Your customers need to choose the plan and enter their personal information when they subscribe for the first time. After that, your users should have a self-service portal where they can manage their plan: upgrade, downgrade, cancel, pause, resume their subscription plan. They sometimes also need to update their personal information. And, they also need access to their invoice history when needed. can manage everything I mention in this section, it hides all these complexities and makes the integration to payment easier. Stripe Conclusion It took me 5 months of development to build this full-stack React SaaS template. Instead of focusing on my business, I was solving these technical details. Building the first version of your SaaS should only take 1 month and not 5. By going through this long journey, I've learned so many things and I've made tons of mistakes. I hope others developers won't do the same mistakes, so I build . Nextless JS, React Boilerplate for SaaS products With Nextless.js, you get everything I mentioned in this article without you writing any line of code. Save you time, focus on things that matter and launch your SaaS faster.

Amazon

Apple

Facebook

Google

Sentry

Stripe

Trace

Why Learn Any Other Programming Language When You Can Learn Typescript?

Introducing Tailwind CSS: Pros and Cons of Tailwind

Premium React Templates with Next JS and Tailwind CSS

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Serverless

Nominated for 2022 - HackerNoon Contributor of the Year - Software Architecture

Too Long; Didn't Read

Make resilience your competitive advantage

The Tech Stack of a Solo-Developer to build a SaaS With React and AWS

The Tech Stack of a Solo-Developer to build a SaaS With React and AWS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Why Learn Any Other Programming Language When You Can Learn Typescript?

101 Stories To Learn About Cloud Infrastructure

10 Things in Engineering We Don't Spend Enough Time On

10 Things I Did To Increase CloudTrail Logs Security

10 reasons to give cloud computing a go

Why Learn Any Other Programming Language When You Can Learn Typescript?

101 Stories To Learn About Cloud Infrastructure

10 Things in Engineering We Don't Spend Enough Time On

10 Things I Did To Increase CloudTrail Logs Security

10 reasons to give cloud computing a go

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps