How I start every SaaS project - 14 step guide

Author

Isaac A
June 04, 2024

What’s up guys? First ever newsletter. There are a million and one newsletters out there on the web so I’m not going to waste any of your time. Based on your feedback, this newsletter will mainly be about how I use A to do C.

I will show you exactly how I build and market all of my SaaS projects, as well as what skills you actually need to land a remote software engineering job in 2024. No, ChatGPT isn’t going to take all of the software engineering jobs and no you don’t need to spend 100s of hours on LeetCode.

(I may also sprinkle in some B because most of you know me from MyLiftLog, but we’ll see.)

In this article I’m going to assume that you have a basic understanding of how to code. You should be able to:

  • Open a terminal

  • Run simple git commands

  • Write some basic HTML, CSS, and JavaScript

That’s it.

We’ll be using Laravel on the backend. Yes, it’s written in PHP but I do not think the learning curve is very steep coming from JavaScript. Laravel makes writing PHP a piece of cake so you can simply look up any syntactical differences in the Laravel documentation or use ChatGPT.

When I started out coding, there was nothing more frustrating than watching tutorials and someone quickly glossing over a step or editing it out of the video/article entirely. I promise you I will do my absolute best to actually break this down step-by-step.

And I want you to know, this is the exact same setup that I use every single time I start a new app for a client or when I build a new SaaS.

Step 0: Pre-reqs / system requirements

As I said, we’re going to be working with Laravel in this article which uses Composer, a PHP dependency manager. If you’re a beginner, don’t worry too much about what the heck a “dependency manager” is right now. Simply open your terminal and run the following command from your Desktop directory: 

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" php -r "if (hash_file('sha384', 'composer-setup.php') === 'dac665fdc30fdd8ec78b38b9800061b4150413ff2e3b6f88543c636f7cd84f6db9189d43a81e5503cda447da73c7e5b6') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" php composer-setup.php php -r "unlink('composer-setup.php');"

This may take a few minutes to install on your machine. Afterwards, your terminal should look something like this.

(I use a Mac. If you’re on Windows and this command gives you some trouble, please reach out and I’ll do my best to help you.)

If you’re curious about that command you just ran, or you want to learn more about Composer, you can go here: https://getcomposer.org/download/

Step 1: Create your project

Open your terminal and run the following command from the Desktop directory:

composer create-project laravel/laravel name-of-your-project

Remember to replace name-of-your-project with the actual name of your project. You can change the name of this at any time so don’t worry if you don’t have a name for your project yet. You can simply name it: test-app, foo-bar, or app-that-will-help-me-quit-my-job 😉

The domain name I purchased is xhalloffame.com, so this is what my terminal looks like:

Press “enter” and let things run. Once it’s done, your terminal will look (something) like this.

Take a look at the last message there. “Running migrations.” If you’ve never worked with the backend before, this is a good learning opportunity and I’d encourage you to take your first look at the Laravel documentation here: https://laravel.com/docs/11.x/migrations

Migrations are essentially a way for you to easily update and change the structure (tables and columns) of your database.

Step 2: Open your project

In the same Desktop directory as Step 1, run this command:

cd your-project-name

If you named your project app-that-will-help-me-quit-my-job in Step 1, you would run:

cd app-that-will-help-me-quit-my-job

My project is called x-halloffame so my terminal looks like this:

(Tip for beginners: cd here stands for “change directory.” Every “folder” you see on your desktop is essentially a “directory.” This is just programmer talk.)

Press “enter” and you’re now inside of your new app.

Step 3: Install Sail

Run this command from inside your app:

php artisan sail:install

Your terminal should look like this (but with your project name):

I’m sure you’re wondering, “What’s Sail?” Well, it’s essentially how you Docker-ize your Laravel app. Again, you might be wondering, “What’s Docker?” Just like the migrations above, this is another good learning opportunity and I’d recommend you take a few minutes to read the following documentation and watch this quick video:

100 second video on what Docker is: https://www.youtube.com/watch?v=Gjnup-PuquQ

After you’ve read that documentation and watched the video, press “enter.”

Step 4: Pick your database

These are your database options. I personally use mysql for almost all of my projects but pgsql (postgreSql) is another very, if not more, popular option. If you’re just starting out, I don’t think you should spend much time at all thinking about the differences between the two or which you should use. But, if you’re super curious, here is a link to a short video on each:

mysql: https://www.youtube.com/watch?v=Cz3WcZLRaWc

You might be wondering why both end in “SQL.” This stands for Structured Query Language. This is the standard for “communicating” with relational databases. Here’s a video on that as well: https://www.youtube.com/watch?v=zsjvFFKOm3c

When you’re ready to move forward, choose “mysql” by pressing enter.

Afterwards, your terminal will look something like this.

Pay attention to the last 2 lines above:

  • ./vendor/bin/sail up

  • ./vendor/bin/sail artisan migrate

These are going to be our next 2 steps. If you had to make an educated guess, what do you think these do? We already talked about what Sail is… and we already discussed what a migration is. Think.

If you don’t know, it’s fine. But, you should get in the habit of paying attention to what your terminal tells you. I know the terminal can be scary, and might feel like the Matrix, but I promise you that it’s going to be your best friend.

Step 5: Download Docker desktop

If you already have Docker installed, skip ahead to the next step.

You can download Docker desktop here: https://www.docker.com/products/docker-desktop/

After downloading, make sure Docker is open and running before going to the next step.

Step 6: Start up Sail

In your terminal, run the following command:

 ./vendor/bin/sail up

This is the command we discussed above in Step 4. This simply runs Sail and starts up our “containers” inside of Docker. If you watched the Docker video in Step 3, you already know what a “container” is.

Afterwards, your terminal should look something like this.

And you should see something like this inside of the Docker Desktop app.

Step 6B: Run your migrations in Sail

Open a new tab in the terminal (CMD + T on Mac. Sorry Windows users, no idea what it is for you) and run the following command:

./vendor/bin/sail artisan migrate

Awesome. Now our backend is 99% up and running. We’ll make a few small tweaks later on but we’re going to focus on the Frontend now.

Step 7: Install a Frontend “Starter Kit”

Inside that new 2nd tab in the terminal, run this command:

composer require laravel/breeze --dev  

Important, make sure you run this in the NEW terminal tab that we created in Step 6B.

Look at the image below. On the left, below the first red arrow, you can see the terminal we were working in before is still there doing its thing. Sail is running there. You should not touch the first tab again unless you want to shut down the app and work on something else.

Press “enter” and let things run. Afterwards, your terminal should look something like this.

Step 8: Install “Breeze”

What the heck is “Breeze”, Isaac? Well, I’m glad you asked. In programmer land, we have a famous saying: “don’t reinvent the wheel.” If you want to spend time writing your own authentication, login/logout, session management, etc. then be my guest. But, if you’re anything like me, you probably want to just start building the thing you want to build ASAP. Nobody likes writing boilerplate code.

This is where Breeze comes in. It’s simply a package that handles all of the above. If you want to learn more about Breeze, and see what other starter kit options that Laravel offers, go here: https://laravel.com/docs/11.x/starter-kits#laravel-breeze

Run the following command in the terminal:

 php artisan breeze:install

You’re going to be prompted with some options again just like in Step 5 when we chose a database.

My personal favorite is “React with Inertia.” The remainder of this article will assume you choose this option but if you have some experience and feel comfortable, go ahead and choose whatever you prefer here.

Unless you have worked with Laravel before, or another MVC (model-view-controller) framework like Rails, it might be hard for you to understand what makes working with Inertia so great. This topic could probably be an entire article on it’s own but the TLDR is that you don’t need to build an API.

From the frontend, you simply route to a controller action, e.g. post(route(‘some-route’)), do some business logic, then send your data directly to a component on the frontend as a prop. Magic.

If you want to read more about Inertia you can do so here: https://inertiajs.com/

Step 8B (Optional): Choose add-ons

If you’re a dark mode person, this will add in tailwind classes that handle that.

Press “enter.” Choose what testing library you want.

Press “enter” again and let things run. After it’s finished, it should look something like this. We’re almost done!

Step 9: Run the frontend 🚀

In the terminal, run:

npm run dev

Remember, you should run this in the 2nd terminal. Pay close attention to the image below, ./vendor/bin/sail is still chugging along there in the first terminal. Again, do not touch that first terminal unless you’re wanting to shut down your project and work on something else (or you want to look at some error logs.)

Your terminal should look something like this. Look at the last line there in the terminal:

You should be able to just click that and open your app. If not, go ahead and paste http://localhost into whatever browser you prefer. You should see this:

Voilà! Our frontend is up and running. We’re ready to go.

Step 10: Click “register” in the top right.

You know what to do here.

After you sign up, you’re taken to this dashboard. Click around a bit. In the top right, you can see a small dropdown with a “Profile” option. A user can update their name, email, password, and/or delete their account there. What a Breeze (pun intended).

Step 11: Open a 3rd terminal tab

Run the following command: code .

This assumes you are using Visual Studio Code and have the “code” command installed in your PATH. If you don’t, no worries. Open Visual Studio Code and press CMD + SHIFT + P. You should see something like the below image. Press “enter” to add it to your PATH.

Go back to your terminal and run the above command. Now, you can do this inside of any directory going forward and easily open Visual Studio Code.

Again, just to hammer this home and make sure we’re not leaving anyone behind, the above command should be run in a 3rd terminal tab. The 1st tab is the Backend. The 2nd tab is the Frontend. And the 3rd tab is what we’ll call our “Sandbox.” While you’re working on this project, you will almost never touch the 1st or 2nd tab unless you’re looking for error logs/messages.

If you don’t want to use the code . for whatever reason, or can’t get it to work, simply open your new project in Visual Studio Code like this:

Step 12: Edit some code

Inside of Visual Studio Code, press CMD + P and type Dashboard. You should see the following:

Press “enter” and then you should see this file. You can now edit what you see at localhost/dashboard

Hack away.

If this is your very first time using Laravel, spend some time clicking around through all the directories you see on the right and getting a feel for how things are set up. Every single Laravel project looks exactly like this.

For now, I’d say the most important folders are: app, database, resources, and routes.

Step 13: (Optional): Setup Table Plus

Table Plus is a Database GUI (graphical user interface). Do you remember the migrations we talked about in Step 2? Well, to put things as simply as possible, Table Plus will allow you to more easily see the changes to the database you’ve made in said migrations.

Go here to download Table Plus: https://tableplus.com/

After you download Table Plus, open it. You’ll see a screen like this. Click the “+” button to open a new connection.

You’ll see a screen like this. Assuming you chose “MySQL” in Step 4, click “MySQL.” It goes without saying, if you chose “PostgreSQL” in Step 4, click that instead.

After you click “MySQL”, you’ll see this screen. Go ahead and enter the values you see below.

Name: Enter whatever you want here. I usually put “LOCAL.”

Host: 127.0.0.1 is the default. Leave this as is. Don’t touch it.

User: sail

Password: password

Database: laravel

Click “Test” and make sure everything turns green like the image above. After that, go ahead and click “Connect.” Now you can literally see your database. The tables are on the left and when you click into a table you’ll see it’s columns on the right. There’s the user (me) we created when we registered a few steps back.

Isaac, where the heck do these values come from? I’m glad you asked. It’s good to get in the habit of not simply copying and pasting things.

Let’s go back over to Visual Studio Code. Let’s use our handy-dandy new shortcut that we just learned, CMD + P to open the search bar.

Type in: .env

Click “enter” and then you’ll see a file like this:

This file is where we store our environment variables. Just like inertia, this topic could probably be an article all on it’s own. If you’re interested, here is a pretty good one that I found on Medium: https://medium.com/chingu/an-introduction-to-environment-variables-and-how-to-use-them-f602f66d15fa

The variables we’re interested in right now though for setting up Table Plus are on lines 22-27: DB_DATABASE, DB_USERNAME, and DB_PASSWORD

DB_USERNAME is what we input into User in Table Plus.

DB_DATABASE is what we input into Database in Table Plus.

DB_PASSWORD is what we input into Password in Table Plus.

Step 14: Start building!

You have a blank canvas in front of you. Go build something great. If you have any trouble with this guide, feel free to send me a DM anytime on X/Twitter or email me at: [email protected]

What’s next?

In my next few article(s), I will go over:

  1. How to deploy a project to a custom domain on a live server using Laravel Vapor

  2. Inertia, Routing, Models, and Controllers (MVC)

  3. Setup Stripe to accept payments

  4. Get your first few users (and convert them to paying customers)

And of course I’ll be doing all of this with real world examples from MyLiftLog, Keepsake Kid (launching end of June), as well as the project from this article: “X Hall of Fame”

Isaac

💪