Step 1: Sign up and log in to your Softr Studio

Visit the Softr website and sign up for a free account here. Once you’ve signed up, you’ll be automatically redirected to your Softr Studio.

Step 2: Connect Softr to your PostgreSQL database

As illustrated in the image below, click on the “Data Sources” option at the top left side of your Studio and click again “Connect data source.”

I. Select where your data is stored

When you select “Connect data source,” you will be redirected to a pop-up that looks like the picture below. Select SQL as where your data is stored.

II. Select PostgreSQL as your data source

Once you select PostgreSQL as your data source, Softr will securely connect to your Postgres database.

III. Enter your database credentials

Fill in the required fields as I did in the image below with your PostgreSQL database credentials:

• Host: Your PostgreSQL server address.
• Port: Usually, PostgreSQL uses port 5432 unless you’re using an online PostgreSQL database service provider.
• Database name: Enter the name of your PostgreSQL database.
• Username: Enter your database username.
• Password: Fill in your database password.

You should get a confirmation message highlighted in the screenshot below:

P.S. Kindly note that you cannot connect your PostgreSQL database in pgAdmin to Softr because it is a “local app.” This means that your database in pgAdmin is local and therefore only exists on your computer. Therefore, connecting to Softr means providing a host and port that is live and online. I recommend hosting your PostgreSQL database online via a PostgreSQL database provider. For this tutorial, I hosted mine on Supabase.

Step 3: Create a new application

I. Still in your Softr Studio, select your preferred method for creating your app. For this tutorial, I’ll select the ‘Generate with AI” method.

II. After clicking on the “generate with AI” option, you’ll be redirected to a window that looks like this.

Since I created a sample PostgreSQL database for a bank, I selected building an “internal tool” designed to streamline its internal operations. It will allow bank employees to seamlessly manage customer relationships, monitor transactions, generate reports, and automate workflows, all from a single, easy-to-use interface in Softr.

III. Click on “Preview your app” after writing your prompt and watch Softr do its magic. Softr’s AI will create your app with an app name, plus allow you to select a theme and accent color (these can be changed later in the Studio if you don’t like the edits you made earlier).

IV. Once you’re done changing the app aesthetics, click on “Generate your app” as illustrated in the screenshot above. Your app should look like this:

Step 4: Design your Postgres web interface

I. Copy generated data to the data source: For each component you want to add, you’ll have to add it to your PostgreSQL data source. Click on the component in the right-hand panel (as illustrated in the screenshot below) and select where you want to copy the generated data source to.

I selected “Google Sheets” as the destination for storing my app’s data.

The table should now display the data from your PostgreSQL table.  

II. To add another table or page, click on the “add block” button as highlighted in the image below.

Select the type of block you want and connect it to a data source. For example, since I wanted to create a ‘Transactions table,” I selected “Transactions” for both the “documents and sheets” options.

To create other tables, go ahead and repeat the same process until you’re done!

III. Add components

Use the settings button at the bottom-left side of your PostgreSQL interface to customize the app to your desired requirements. You can also modify each table/block by selecting any of the options on the far-right side of your app’s interface.

Step 5: Add buttons for actions

For example, the “top bar button” allows you to create button components that allow users to open new pages, open an embedded URL, scroll to a page or an item, or add records(for logged-in users). The “items button” allows you to create buttons that appear on individual items.

You can also decide what happens when a user clicks on an item with the “item on click” component.

Step 6: Test and deploy your PostgreSQL web application

I. Select the ‘Preview” function at the top right side of your interface to see what it would look like before publishing. In this case, I’m viewing the customers' table as Guillermo, the manager.

II. Make any necessary adjustments or modifications to the components, queries, or visual settings based on what your app looks like after testing.

III. Once you’re satisfied with all changes made, select “Publish” to take your application live.