How to build SaaS and get $8,000 in Annual Recurring Revenue (ARR)?
I love being a software engineer because one of its charms is the ability to be a one-person team, capable of end-to-end problem-solving, from product design to development, deployment, and marketing. This article is a case study about launching a SaaS product, which will show you how to maximize the power of a one-person team using the right techniques.
Here's a record of new user registrations for my product while I was sleeping one day:
Welcome emails sent to new users
Background
My product is a tool for tracking Canadian immigration data. Due to the messy data provided by Immigration, Refugees and Citizenship Canada (IRCC), users spend a lot of time searching for and compiling statistics. So my product helps users track and analyze IRCC immigration data, essentially combining data scraping, email notifications, and data visualization.
Technology Stack
Frontend
Framework
For the frontend, I used the Next.js framework based on React for the following reasons:
- React Server Components (RSC): This reduces page rendering time by 20%-50%. For example, I can start backend API requests for data needed by Client Components before they are rendered. Additionally, compared to RSC, it's more favorable for Google crawlers to understand and optimize for SEO, bringing in organic traffic.
- TypeScript and backend tRPC integration: This allows me to maintain synchronization with backend type handling without using solutions like GraphQL, achieving not only compile-time type safety but also runtime type safety.
- Official deployment platform Vercel: As the parent company of Next.js, Vercel provides a very convenient deployment experience and has high integration with Github.
State Management
UI = f(data, state)
This quote comes from The Two Reacts, emphasizing the importance of state. For state management, I use the tRPC solution. Through tRPC's isPending and error handling capabilities, I can implement button loading states and error handling visualization on the frontend. Here's an example from my website:
State Management
CSS
I also used Tailwind CSS for the frontend. Its biggest advantage is that I no longer have to worry about naming CSS classes, after all, naming things is the hardest part for programmers 🤣.
Backend
tRPC
For the backend, I use tRPC for the following reasons:
- Type safety: Automatic synchronization of type definitions between frontend and backend, and runtime type safety.
- State management: As mentioned above, it works well with frontend state management capabilities.
- Fewer dependencies: Compared to GraphQL, tRPC is lighter and can be integrated with any frontend framework.
Database
I use Prisma as the database ORM for the following reasons:
- Type safety: Prisma deeply integrates with TypeScript, automatically generating type definitions for database models. This ensures type safety during development; when writing database queries, Prisma provides auto-completion and type checking features, reducing errors.
- Data migration (DevOps): Combined with Github Actions, Prisma can achieve automatic database migration. Each code push automatically migrates the production environment database.
Others
I also used Zyte for data scraping, which is built on Scrapy and provides a Python SDK. I use it to scrape immigration data from IRCC. Additionally, I used Vercel for website deployment and Resend for automated email notifications.
For visualization, I used VChart, an open-source project I contributed to. It has been tested by various ByteDance businesses, including TikTok, and is truly ready to use out of the box.
Dashboard created with VChart
Marketing Techniques
Since I provide a subscription service, the landing page conversion is crucial as it directly determines my subscription numbers. My landing page has a click-to-registration conversion rate of over 50%, sometimes even reaching 70%+ during certain periods.
I'll use my landing page as an example to explain how I improved the conversion rate. Here's the effect of my landing page:
Landing Page
The first design trick on my landing page is a pop-up. This pop-up simulates the feeling of my product sending users email notifications with the latest data, letting them have a good taste even before using my service.
On the landing page, I mainly divide it into these modules:
- Navbar logo, keep it small, no one cares about your logo
- Headline, big title, must be brief, directly stating what your product does or what benefits it brings
- Detailed introduction of your product features in smaller font
- After introducing the product, immediately provide a registration button
- Finally, add user experiences from other users. Note that you should never refer to your users as "User" or "Customer". Your users must have an identity, such as "immigration applicants" in my case. Your users might be "moms", "dog lovers", etc. Then use a sentence structure of "identity" + "verb" + "comparative" to showcase the value your product brings.
Profit Model
My business strategy is to let users subscribe to my product for free to increase the user base. Since my product is a data tracking tool, users also want to receive my emails. Then I just need to embed immigration-related ads in my emails to generate profit.
Challenges in Launching the Product
When putting a product into production, it's inevitable to attract malicious users, so strategies like rate limiting are often needed to restrict malicious user behavior. Therefore, I also adopted some measures to limit malicious user registrations. Since this involves a product in the production environment, I won't go into details in this blog post.
What I want to emphasize is that bringing a product from idea to launch is not that simple. For example, CI/CD and combating malicious users are issues we need to consider beyond the product itself.
Finally, I hope everyone can create the product they have in mind and create value for customers.