Build SaaS with AI: Part 2

Part 2: Tech Stack & Dev Tools

Author

Sabrina Ramonov
August 06, 2024

This is part 2 of my series Build SaaS with AI — where I go from Idea to MVP with AI-driven coding!

In Part 1, I shared my fantastical grand product vision and scoped it down to a feasible version 1 MVP.

Before we code, we need to set up our tech stack and dev tools.

This is crucial because the right tools make a big difference.

For example, AI models know far more about TypeScript than ClojureScript, due to the sheer volume of training data in StackOverflow, forums, open source codebases, libraries, etc. related to TypeScript.

The quality of code and answers you get from AI will vastly differ depending on your tech stack and the amount of training data pertaining to it.

Here’s the Youtube version of this post:

Tech Stack

Here’s my usual tech stack for MVPs:

These choices aren’t set in stone; they happen to work for me.

If you’re well-versed in Ruby on Rails, or something else, go with that instead.

My dev tools are:

In this series, I use Claude 3.5 Sonnet with Cursor AI, not Claude Artifacts.

Because issues usually arise when I start a project in Claude Artifacts and then migrate over to Cursor. Claude Artifacts wants to build out the project one way, while Cursor + Claude 3.5 Sonnet wants to build out the project a different way.

Let’s start by installing dev tools.

Install Warp.dev and Cursor AI

First, install the terminal.

Go to the website Warp.dev and download it for your operating system. Unfortunately, it's not available for Windows yet.

Note — using Warp isn’t required. You can use any terminal, but I still highly suggest playing with it. I think it’s a great example of applying AI to improve developer productivity.

Once installed, open it up. It should look pretty like this:

Now, you can type a natural language question directly in the terminal:

"How do I create a Next.js project?"

Then, Warp calls OpenAI ChatGPT to answer your question!

So, you don’t have to google it separately.

Less context switch, yay!

Next, download Cursor AI code editor.

Once installed, open it up and you'll see an interface where you can open an existing project, if you have one. It should look like this:

Setup Next.js Prerequisites

Next, we’ll setup prerequisites for Next.js.

Open Warp and ask:

“What are all the steps and prerequisites to install next.js?”

Warp walks you through the process.

First, you need Node.js and npm (Node Package Manager).

If you don't have them installed, simply ask Warp:

Whenever you get stuck, simply ask AI!

👆️ That’s the biggest takeaway in all of my AI educational content.

LLM-generated answers can save you countless hours, reading through StackOverflow and documentation, piecing answers together. Especially if you’re not a full-time software engineer by trade and don’t have the muscle memory to be productive coding without a lot of googling.

Create Next.js Project

Now, let’s spin up a project.

Run this command in the Warp terminal to create a new Next.js project, and replace my-next-project with your project’s name: 

npx create-next-app@latest my-next-project

Select all the default options:

Select the DEFAULT underlined options in blue

Create Firebase and Vercel Accounts

Finally, create accounts for Firebase and Vercel.

I like to use Firebase as my database.

For deployment, I like to use Vercel, but Heroku is another fine option.

You don’t need to do anything else at this point.

With Vercel and Heroku, you’ll be able to deploy the MVP on one of their URLs for testing purposes. So, you don’t really need to purchase a domain yet.

Up Next…

  • Use Cursor AI-powered code editor to build out v1 spec

  • Iteratively add a few more features

Did I miss anything?

Have ideas or suggestions?

Message me on LinkedIn 👋

Sabrina Ramonov

P.S. If you’re enjoying my free newsletter, it’d mean the world to me if you share it with others. My newsletter just launched, every single referral helps. Thank you!