Setting up MongoDB Atlas

In our next step, we want to capture emails from people who are interested in our application.

Database

To capture emails and have access to them later we will need a database. A database lets our app read and write any data our application needs.

ShipFast is setup to create leads - people who enter their emails on your landing page in order to be contacted later. You can use this feature to send out emails to these interested users when your app is ready.

Create the database project

Head over to MongoDB and create an account. Then create a new project.

I always setup a new project for every ShipFast application I create. This lets me keep everything separate in case I later sell my app.

More importantly it allows me to create a free M0 database instance for each project. MongoDB limits the free database option to 1 per project.

Just fill in the name and hit Next. Same for the next screen, i.e. the defaults are fine.

Create the database instance

Now that we have a project, we need to create the actual database server inside that project. MongoDB calls this a “deployment”, so we’ll hit the big Create button.

There are many choices in size (with corresponding costs) for the server. We want to pick the M0 Free option on the right.

We start with the free option because we are just validating our idea and probably have very little data or users.

Also, we can always upgrade later.

The rest of the defaults are fine for us.

At the bottom click the Create Deployment button. This process might take a minute or so to finish.

Creating a database user

Next we’ll setup the database connection settings. You’ll be automatically brought to this after creating the deployment.

Enter a suitable user name for the database. This is the username that your application will use to connect to the database. This username will not be seen or used by the actual “users” of your application.

I usually make it a bit long and descriptive.

Usually the provided password is long and obscure enough to use what they give me. Feel free to change it though.

This username and password combination is very important. This is the only way you can connect to your database from your application and you should safeguard this information carefully.

If some guesses or gets a hold of this information (along with your database server address) they can access and change everything in your database.

Don’t forget to click the Create Database User before moving on.

Connecting our app

Hit the Choose a connection method button to continue with our setup. Then select the Drivers line.

We will then be brought to a screen with all the details on how to connect a Node application to the database. ShipFast has done most of this for us and we just need to copy the connection string. Look for item 3 and copy the connection string

Then in VS Code open up your .env.local file (you should have renamed .env.example to .env.local earlier) and paste in the connection string next to MONGODB_URI=

You should have something like the above. You’ll have different user, password and server parts though.

There is one change we need to make to this connection string. By default MongoDB will connect to a database inside this server with the name of “local”. I don’t like this so I always explicitly give it a database name in the connection string.

Put your server name right after the “/” at the end of the server name. There should be no spaces, all lower case, etc. I find this easier to keep things straight in my head.

Then copy and paste this connection string into Vercel’s Environment Variables.

The next time our application is built by Vercel, it will pick up these values (if you forget, you can always add it later and manually trigger a new build).

Network Access

The last setting we need to deal with in MongoDB Atlas is the network access.

MongoDB Atlas limits what computers (IP address) can connect to your database. By default they add your current IP address when you setup the server.

This is okay for developing locally, but it won’t work when your application goes live on Vercel.

Select Network Access from the left menu to fix this. And then hit the Add IP Address button.

Since Vercel can talk to your database from any of its servers around the world we have no idea what all the IP addresses are. Instead we’ll click the “Allow Access From Anywhere” button and get the screen below.

Hit the “Confirm” button to finish our setup.

Your database is now completely setup to work with ShipFast. The next time we push changes to GitHub our application will have access to this database.

Connecting Leads

When we last left off with our home page we had added the Hero section to our landing page. The Hero section has a button that currently does nothing.

We’d like to change that to a button that collects emails.

In VS Code, open up /components/Hero.js and look for the following lines

We want to replace this with a built in ShipFast component to collect emails.

Don’t forget to add an import for this component at the top or you’ll get an error.

You’ll now see a new input and button on the hero section.

Go ahead and enter your email and hit the button. You should see a little Thank You message at the top.

If you look at your database now, you’ll see an entry in the collection for Leads.

I’m using the free MongoDB Compass tool to look at my database. You can see my database name “ship-fast-tutorial” and the collection name “leads”.

You can now commit these changes to git and push to GitHub. Vercel will detect the changes and rebuild your application. Then you’ll try the same signup on your live site to make sure everything works.

Using Leads

Okay, so you can now collect emails of interested users. You might now be wondering, how can I use these emails?

There is no way currently in ShipFast to automate notifying the users when your app is ready. You’ll need to extract the emails from the database and send an email manually.

You can extract the emails using the free MongoDB Compass tool and then send them with your email app.

Other way to capture leads

There are many ways to capture leads for interest in your app. ShipFast provides the method above for a quick easy setup.

However, you might not want to do the “extract and manual send” very often. With lots of leads it might become time consuming.

An alternative is to use an app that’s dedicated to this, like Beehiiv or ConvertKit.

These 3rd party services offer a lot of functionality but they don’t integrate directly with your database. You’ll need to do the following:

• Extract your emails from your database and import them into the other tool (a one time job)

• Change your Hero.js file to replace the ButtonLead with the 3rd party form (browse their developer documentation for a way to embed their signup form on your site)

Conclusion

I’ve done this database setup for a bunch of apps now. Once you’ve gone through all the pieces once it will get easier.

Now our app is setup with a database to hold all our application’s data, not just email leads.

Next Steps

Next newsletter we’ll cover setting up user logins.

That’s it for our setup in level 5. Don’t forget to sync things to GitHub so the world can see your growing SaaS.

If you have questions or suggestions, please contact me by email, X, Discord, etc.