How to Connect Strapi to PostgreSQL
Tags: postgres, database, headlesscms, javascript
Published: 2021-07-19 13:42:37

In this article, we will learn how to connect Strapi to PostgreSQL. By default Strapi uses the SQLite for content storage and Strapi is not only limited to using SQLite as the database, it can be configured to use other databases like [MongoDB](https://masteringbackend.com/posts/mongodb-tutorial-the-ultimate-guide), MySQL, MariaDB, PostgreSQL, etc.

It is often confusing on how to connect a Strapi instance to a Postgres database, a lot of back and forth have always been associated with it, but in this article I will demystify the mystery behind all that. I will show with examples and images, how we can configure a Strapi instance to use a Postgres database.

We will also learn how to: 

- Create collections on Strapi.
- Setup a Postgres database in our machine.
- How to add API endpoints manually on Strapi.
- Create a Bank admin app in React to consume the Strapi API endpoints.

# **Strapi**

[Strapi](https://strapi.io/) is an open-source headless CMS based on Nodejs used in designing APIS and managing content.

Strapi helps us scaffold our [backend](https://masteringbackend.com/posts/backend-development-the-ultimate-guide) very fast, build APIs and consume the APIs from the client-side. The client can be mobile, web, desktop, cURL, etc.

The APIs are created from the Strapi UI admin panel. We create collections as single-types. A collection in Strapi maps to the endpoints:

- **POST** `/YOUR_COLLECTION_s`: Creates new content.
- **GET** `/YOUR_COLLECTION_s`: Gets all the contents.
- **GET** `/YOUR_COLLECTION_s/:ID`: Gets a single content based on its ID.
- **PUT** `/YOUR_COLLECTION_s/:ID`: Edits a content
- **DELETE** `/YOUR_COLLECTION_s/:ID`: Deletes a content.

By default, Strapi gives us RESTful APIs, but also we can create GraphQL APIs in Strapi. We can then use the GraphQL Playground in the browser to run the queries and mutations.
Setting up Strapi is very easy. We just run the below command:

```
    npx create-strapi-app strapi-api
    # OR
    yarn create strapi-api strapi-api
```

And we run the `yarn develop` command to start the server at `localhost:1337`. The API endpoints are consumed from the `localhost:1337` URL. Also, we can load the admin UI from the same URL at `localhost:1337/admin`.

Strapi contains both a server and a database all baked into it. The server hosts the APIs, and the database is used to store the application's content. Strapi uses the [Koajs](https://koajs.com/) framework for its server.

To verify this, go to `strapi-API/config/` folder.

We will see the following:

```
        config/
            functions/
                responses/
                    404.js
                bootstrap.js
                cron.js
            database.js
            server.js
```

This is where Strapi configurations are kept. The `404.js` file is used to return a custom 404 message.

```
    "use strict";
    
    module.exports = async (/* ctx */) => {
      // return ctx.notFound('My custom message 404');
    };
```

The `cron.js` file is where we can set our cron jobs on Strapi. These jobs are scheduled to run periodically based on the format we input: `[SECOND (optional)] [MINUTE] [HOUR] [DAY OF MONTH] [MONTH OF YEAR] [DAY OF WEEK]`.

```
    "use strict";
    
    module.exports = {};
```

The `server.js` is where we configure the Strapi server. We can set our host, port, and authentication. Strapi, by default, serves at `0.0.0.0` at port 1337. We can change them in this file.

```
    module.exports = ({ env }) => ({
      host: env("HOST", "0.0.0.0"),
      port: env.int("PORT", 1337),
      admin: {
        auth: {
          secret: env("ADMIN_JWT_SECRET", "9c8eb554ab87ab3e95d1e32ca140e304"),
        },
      },
    });
```

The `database.js` is where is the database to use is configured. The [database's client](https://masteringbackend.com/posts/top-10-database-clients-for-developers), hostname, port, etc., are set here.

```
    module.exports = ({ env }) => ({
      defaultConnection: "default",
      connections: {
        default: {
          connector: "bookshelf",
          settings: {
            client: "sqlite",
            filename: env("DATABASE_FILENAME", ".tmp/data.db"),
          },
          options: {
            useNullAsDefault: true,
          },
        },
      },
    });
```

You see here that these are the default database settings for Strapi. It is using the SQLite database, as we said earlier.


- The `defaultConnection` is the default connection for models to use in querying the database. The default value is the default. You can set it to any property keys in the connections object.
- The `connections` set the type of connections we can use to access a database. We have a default connection that connects to an SQLite database.
- The `client` is the database client to create the connection.
- The `filename` is the path to the database file.
- This `file` allows us to set our Strapi app to use PostgreSQL, MySQL, SQLServer, or MongoDB.

In the below section we will install the PostgreSQL binary.

# **PostgresDB setup**

We need to set up and install PostgreSQL. If you don't have PostgresSQL installed in your machine, go to [PostgresSQL downloads](https://www.postgresql.org/download/) and download the binaries for your machine.

- [Linux](https://www.postgresql.org/download/linux/)
- [macOS](https://www.postgresql.org/download/macosx/)
- [Solaris](https://www.postgresql.org/download/solaris/)
- [Windows](https://www.postgresql.org/download/windows/)
- [BSD](https://www.postgresql.org/download/bsd/)

After installation, start the Postgres server. Make sure you remember the Postgres port, username, password because we will use them in connecting Strapi to the Postgres.

Create a database in PostgreSQL, name it `bank` because we will be building a bank app to demonstrate further how to use PostgreSQL DB with Strapi.

Also, if you want to build the PostgreSQL from the source, download the source code from [here](https://www.postgresql.org/ftp/source/) and compile it.

# **Configuring PostgreSQL in Strapi**

To configure our Strapi to use our PostgreSQL, we will add some configurations in our `strapi-api/config/database.js` file.

Open the `strapi-api/config/database.js` and paste the below code in the file:

```
    // strapi-api/config/database.js
    module.exports = ({ env }) => ({
      defaultConnection: "default",
      connections: {
        default: {
          connector: "bookshelf",
          settings: {
            client: "postgres",
            host: env("DATABASE_HOST", "localhost"),
            port: env.int("DATABASE_PORT", 5432),
            database: env("DATABASE_NAME", "bank"),
            username: env("DATABASE_USERNAME", "postgres"),
            password: env("DATABASE_PASSWORD", "0000"),
            schema: env("DATABASE_SCHEMA", "public"),
          },
          options: {},
        },
      },
    });
```

- In the `connections` object, we have only a `default` connection.
- In this `default` connection, we set the `connector` to the bookshelf.
- In the `settings`, we set the `client` to `Postgres`. This client is the PostgresSQL database client to create the connection to the DB.
- The `host` is the hostname of the PostgreSQL server we set it to `localhost`.
- The `port` is set to 5432, and this is the default port of the PostgreSQL server.
- The `name` is set to the bank, and this is the name of the database we created in the PostgreSQL server.
- The `password` is the password of our PostgreSQL server.
- The `username` is the username of our PostgreSQL. It is set to `Postgres` because it is the username of our PostgreSQL server.
- The `schema` is the database schema, and it is set to the `public` here. This schema is used to expose databases to the public.

With this, our Strapi is using PostgreSQL to persist our API content. Now start Strapi.


    yarn develop

Strapi will load `localhost:1337/admin` on our browser. Now register and click on the `LET'S START` button, this will take you to the admin panel.

# **Building our collections**

Everything is ready to roll. We have connected our Strapi app to PostgreSQL. Now, we start building our collections. We are building a bank app, this is a bank admin app that bankers will use to manage accounts in Strapi, and the DB persistence will be PostgreSQL.

Let's write out the core functions of our bank app.

- New accounts can be created in the app.
- Transactions can be carried out, i.e., money can be sent from a user to another user.

So we will have two models: Account and Transact.

The Account holds the accounts in the bank, and the Transact holds the transactions carried out.

The Account model:

```
    Account {
        name
        balance
    }
```

The `name` field will hold the name of the account holder.
The `balance` will hold the balance of the account holder in Dollars.

The Transact model:

```
    Transact {
        sender
        receiver
        amount
    }
```

The `sender` field holds the name of the account holder that transfers the money.
The `receiver` is the beneficiary.
The `amount` is the amount the sender sends to the receiver.

So we begin creating the collections in our Strapi admin. We will start with the `Account` model.

Click on the `Create First Content Type` button and type in "account" for a collection name.

Now we add the fields for the `account` collection:

- Click on the `+ Add another field` button and select `Text` and type in `name`, and then click on the `+ Add another field` button to add another field.
- Select `Number` and on the `Number format` select `float (ex. 3.3333333)`, then type in `balance` and click on the `Finish` button.
- On the `Account` page that appears click on the `Save` button that is on the top-right corner of the page.

We generate the `Transact` collection:

- Click on the `+ Create new collection type` link, a modal will show up, type in `transact`. Click on the `+ Add another field` button.
- Add the fields: `sender`, `receiver`, and `amount`. The fields `sender` and `receiver` will be `Text` fields while `amount` will be a `Number` field with `float (ex. 3.333333)` Number format.
- After adding them click on the `Finish` button and the `Save` button.

Now we have created our collections.

# **Business logic**

We need to implement our business logic. This business logic will be an API endpoint to transfer money from a sender to the recipient.

The logic will be this:

- deduct the amount from the sender
- add the amount to the receiver
- add the transaction to transact collection

I want this to be done in the `/transfer` API, a POST method. A transfer HTTP request will look like this:

```
    http://localhost:1337/transfer
    Method: POST
    Body:
    {
        sender: nnamdi
        receiver: chidme
        amount:  10
    }
```

So we see that collections can't handle this. This is a single endpoint. The single-type does not do the job for me. I usually find it hard to create a single API endpoint from the Strapi admin panel, so I go to the project source code to add it.

APIs in a Strapi project are kept in the `api` folder. So we go to our `api` folder, we will see folders created for our APIs: `transact` and `account`.

```
    strapi-api
        api/
            account/
                config/
                    routes.json
                controllers/
                    account.js
                models/
                services/
            transact/
            ...
```

The `routes.json` file contains the endpoints contained in an API.

The `controllers` folder contains files that the user can use to customize the endpoints in an API. The user can apply his logic for an endpoint.

These two things are what we need in other to create our `transfer` API.
So we create a `transfer` folder in our `api` folder:


    mkdir transfer

Next, we create `config` and `controllers` folders inside the `transfer` folder.


    mkdir transfer/config transfer/controllers

Create a `routes.json` file inside the `config` folder:


    touch transfer/config/routes.json

Inside it, we define an `/transfer` endpoint and to be on POST HTTP method. Then, we will make the handler point to an `index` function that will export from `controllers`.

```
    {
      "routes": [
        {
          "method": "POST",
          "path": "/transfer",
          "handler": "Transfer.index",
          "config": {
            "policies": []
          }
        }
      ]
    }
```

Create a `transfer` file in the `controllers` folder.


    touch transfer/controllers/transfer.js

Here, we will export an `index` function. This function will be called when the `localhost:1337/transfer` HTTP request is made. The function will handle that request. This is where we will apply our business logic of sending money from an account to another beneficiary account.

See the code below:

```
    // strapi-api/api/transfer/controllers/transfer.js
    
    const { sanitizeEntity } = require("strapi-utils");
    
    module.exports = {
      async index(ctx) {
        const { sender, receiver, amount } = ctx.request.body;
    
        let entity;
    
        // deduct amount from sender
        // add amount to reciver
        // add the transaction to transact
    
        const senderAcc = await strapi.services.account.findOne({
          name: sender,
        });
        const receiverAcc = await strapi.services.account.findOne({
          name: receiver,
        });
    
        senderAcc.balance = parseFloat(senderAcc.balance) - parseFloat(amount);
        receiverAcc.balance = parseFloat(receiverAcc.balance) + parseFloat(amount);
    
        await strapi.services.account.update({ name: sender }, senderAcc);
        await strapi.services.account.update({ name: receiver }, receiverAcc);
        entity = await strapi.services.transact.create({
          sender,
          receiver,
          amount,
        });
        return sanitizeEntity(entity, { model: strapi.models.transact });
      },
    };
```

The `ctx` holds the `res` and `req` just like in Expressjs or Koajs. The `ctx` is an object that contains properties and methods for accessing the incoming message and for responding to the client.

See, we retrieved the `sender`, `receiver`, and `amount` from the `ctx.request.body`.
Notice we have a strapi object. Yes, it is a Strapi object that is global in a Strapi project. We use the object to access different properties and methods. 

Here we are using it to access the `.services` object, which contains methods to access the database. See the functions in it: `create`, `update`, `find`, `findOne`, etc. They are used to create data in the database, update the database, retrieve values from the database.

So, we retrieved the sender's account details and also the receiver's account details. We then made the transaction, subtracted the `amount` from the sender's balance, and added the receiver's balance.

Next, we updated the sender's and receiver's balances in the database with their new values.

Then, we created a new transaction in the `transact` table, and finally, we returned the result of the new transaction.

The `sanitizeEntity` function removes all private fields from the model and its relations.
Save the file and this will restart our Strapi server. You won't see the `transfer` API appear on the admin panel, and it is a standalone API, not a collection type.

# **Allow access**

Now, we will allow access to all our APIs.

Click on the `Settings` item on the sidebar menu, then on the `Roles` item on the second sidebar menu that appears. On the right section, click on the `Public` item and scroll down.
You will see all the APIs with their handlers. Click on the `Select all` checkbox and click on the `Save` button at the top. This will allow public access to all the APIs in our Strapi project:

- account
- transact
- transfer

# **Seed data**

Now, we seed our data.

Click on the `Accounts` in the sidebar. Click on the `+ Add New Accounts` button.

Add the data:


    name -> nnamdi
    balance -> 2000000

Click on the `Save` button and the `Publish` button.

Add another data:


    name -> chidume
    balance -> 1000000

Click on the `Save` button and the `Publish` button.

See our PostgreSQL UI, the contents were persisted on PostgreSQL:

![](https://paper-attachments.dropbox.com/s_0BA9C20C088A45BE65DF12B51336D9BE7ACA75ACC69E7432BED3DE1319758436_1622228864829_Screenshot+2021-05-28+at+20.05.16.png)

# **Build our frontend - bank admin**

Our front end will be a bank admin app. We will use Nextjs to build the app. So we scaffold our project.


    yarn create next-app strapi-bank

Our app will have two page routes:

- `/`
- `/account/[id]`

The index `/` route will display all the accounts on the system.

The `/account/[id]` route will display a particular account details. This is a dynamic route, the `id` can hold any value, its dynamic, and it will be the unique id of an account.

We will have components:


- `Header`: This will render the Header.
- `AccountCard`: This component will display a few of the account details in the `/` route.
- `AddAccountDialog`: This is a dialog that renders the UI we will use to add new accounts to the system.
- `TransactionDialog`: This dialog renders UI where transactions will be made, sending money from one Account to another.
- `TransactionCard`: This component will render the transactions of a user.
- `Accounts`: This is the page component for the `/` page. It displays all the accounts in the bank.
- `Account`: This is the page component for the `/account/[id]` page.

Our final app will look like this:


![](https://paper-attachments.dropbox.com/s_0BA9C20C088A45BE65DF12B51336D9BE7ACA75ACC69E7432BED3DE1319758436_1622226607024_Screenshot+2021-05-28+at+18.37.35.png)

![](https://paper-attachments.dropbox.com/s_0BA9C20C088A45BE65DF12B51336D9BE7ACA75ACC69E7432BED3DE1319758436_1622226607053_Screenshot+2021-05-28+at+18.37.49.png)

![](https://paper-attachments.dropbox.com/s_0BA9C20C088A45BE65DF12B51336D9BE7ACA75ACC69E7432BED3DE1319758436_1622226607075_Screenshot+2021-05-28+at+18.37.56.png)

![](https://paper-attachments.dropbox.com/s_0BA9C20C088A45BE65DF12B51336D9BE7ACA75ACC69E7432BED3DE1319758436_1622226607090_Screenshot+2021-05-28+at+18.38.04.png)


OK, so we start creating the components.


    mkdir components
    
    mkdir components/TransactionCard
    touch components/TransactionCard/index.js
    touch components/TransactionCard/TransactionCard.module.css
    
    mkdir components/TransactionDialog
    touch components/TransactionDialog/index.js
    
    mkdir components/AddAccountDialog
    touch components/AddAccountDialog/index.js
    
    mkdir components/AccountCard
    touch components/AccountCard/index.js
    touch components/AccountCard/AccountCard.module.css
    
    mkdir components/Header
    touch components/Header/index.js
    touch components/Header/Header.module.css
    
    touch styles/AccountView.module.css
    mkdir pages/account
    touch pages/account/[id].js

**Header**

This will be a simple UI, it will display the text `Bank Admin`. Paste the below code on `components/Header/index.js`:

```
    import { header, headerName } from "./Header.module.css";
    
    export default function Header() {
      return (
        <section className={header}>
          <div className={headerName}>Bank Admin</div>
        </section>
      );
    }
```

**AccountCard**
This component will be rendered by the `Accounts` component. It will display a mini detail of an account.

Paste the below code in `components/AccountCard/index.js`:

```

    import styles from "./AccountCard.module.css";
    import Link from "next/link";
    
    export default function AccountCard({ account }) {
      const { id, name, balance, created_at } = account;
    
      return (
        <Link href={`account/${id}`}>
          <div className={styles.account}>
            <div className={styles.accountdetails}>
              <div className={styles.accountname}>
                <h3>
                  <span style={{ fontWeight: "100" }}>Account: </span>
                  {name}
                </h3>
              </div>
              <div className={styles.accountbalance}>
                <span>
                  <span style={{ fontWeight: "100" }}>Balance($): </span>
                  {balance}
                </span>
              </div>
              <div className={styles.accountcreated_at}>
                <span>Created: {created_at}</span>
              </div>
            </div>
          </div>
        </Link>
      );
    }
```

It receives the `account` object in its `props` argument. Next, we destructure `id`, `name`, `balance`, `created_at` from the `account` object.
Yes, `id` and `created_at` are fields set by Strapi in each model content.

So, the `AccountCard` component renders the details.

**TransactionCard**
This component will render a specific transaction passed to it. It will display the `sender`, `receiver`, and the `amount` sent. The Account page component renders this component to show the transactions done by an account user—the debits and credits.

Paste the code below in `components/TransactionCard/index.js`:

```
    import styles from "./TransactionCard.module.css";
    
    export default function TransactionCard({ transaction }) {
      const { sender, receiver, amount, created_at } = transaction;
      return (
        <div className={styles.transactionCard}>
          <div className={styles.transactionCardDetails}>
            <div className={styles.transactionCardName}>
              <h4>
                <span>Sender: </span>
                <span style={{ fontWeight: "bold" }}>{sender}</span>
              </h4>
            </div>
            <div className={styles.transactionCardName}>
              <h4>
                <span>Receiver: </span>
                <span style={{ fontWeight: "bold" }}>{receiver}</span>
              </h4>
            </div>
            <div className={styles.transactionCardName}>
              <h4>
                <span>Amount($): </span>
                <span style={{ fontWeight: "bold" }}>{amount}</span>
              </h4>
            </div>
            <div className={styles.transactionCardName}>
              <h4>
                <span>Created At: </span>
                <span style={{ fontWeight: "bold" }}>{created_at}</span>
              </h4>
            </div>
          </div>
        </div>
      );
    }
```

It receives a `transaction` object in its props. The fields `sender`, `receiver`, `amount`, `created_at` are destructured from the `transaction` object. These are then rendered by the component.

**Accounts**
This component is rendered when the index page `/` route is navigated. This component will make an HTTP request to the Strapi backend to retrieve the list of accounts and render them.

Paste the below code on `pages/index.js`:

```
    import Head from "next/head";
    import styles from "../styles/Home.module.css";
    import Header from "../components/Header";
    import AccountCard from "../components/AccountCard";
    import { useEffect, useState } from "react";
    import axios from "axios";
    import TransactDialog from "../components/TransactDialog";
    import AddAccountDialog from "../components/AddAccountDialog";
    
    export default function Home() {
      const [accounts, setAccounts] = useState([]);
      const [showTransactModal, setShowTransactModal] = useState(false);
      const [showAddAccountModal, setShowAddAccountModal] = useState(false);
    
      useEffect(async () => {
        const data = await axios.get("http://localhost:1337/accounts");
        setAccounts(data?.data);
      }, []);
    
      return (
        <div className={styles.container}>
          <Head>
            <title>Bank Admin</title>
            <link rel="icon" href="/favicon.ico" />
          </Head>
    
          <main className={styles.main}>
            <div className={styles.breadcrumb}>
              <div>
                <span style={{ margin: "1px" }}>
                  <button onClick={() => setShowTransactModal(true)}>
                    Transact
                  </button>
                </span>
                <span style={{ margin: "1px" }}>
                  <button onClick={() => setShowAddAccountModal(true)}>
                    Add Account
                  </button>
                </span>
              </div>
            </div>
    
            <div className={styles.accountcontainer}>
              <div className={styles.youraccounts}>
                <h3>Accounts</h3>
              </div>
              <div>
                {accounts.map((account, i) => (
                  <AccountCard key={i} account={account} />
                ))}
              </div>
            </div>
            {showAddAccountModal ? (
              <AddAccountDialog
                closeModal={() => setShowAddAccountModal((pV) => !pV)}
              />
            ) : null}
            {showTransactModal ? (
              <TransactDialog
                closeModal={() => setShowTransactModal((pV) => !pV)}
              />
            ) : null}
          </main>
        </div>
      );
    }
```


We have three states:
`accounts`: is a state that holds the accounts retrieved from the `/accounts` endpoint. `showTransactModal`: This is a boolean state that toggles the visibility of the `TransactionModal`.
`showAddAccountModal`: this is also a boolean state used to display and remove the `AddAccountModal`.

The `useEffect` callback calls the `/accounts` endpoint, and the result is set in the `accounts` state.

The `accounts` array is rendered and each account is rendered by the `AccountCard` component, each account is passed to the `AccountCard` via its `account` props. 

See that we are conditionally rendering the `AddAccountDialog` and `TransactDialog` dialog components. The `Transact` button toggles the `TransactDialog` and the `Add Account` button toggles the `AddAccountDialog`.

See that we pass a function to each dialog via `closeModal` props. The function will enable the dialogs to close themselves from their components.

**Account**
This is a page component that is rendered when the `/account/[id]` route is navigated.
This component displays the account details and its transactions. We can delete an account from there also.

Paste the below code in `pages/account/[id].js`:

```
    import styles from "../../styles/AccountView.module.css";
    import { useRouter } from "next/router";
    import TransactionCard from "../../components/TransactionCard";
    import axios from "axios";
    import { useEffect, useState } from "react";
    
    export default function Account() {
      const router = useRouter();
      const {
        query: { id },
      } = router;
    
      const [account, setAccount] = useState();
      const [transactions, setTransactions] = useState([]);
      useEffect(async () => {
        const AccountData = await axios.get("http://localhost:1337/accounts/" + id);
        var transactsData = await axios.get("http://localhost:1337/transacts");
        transactsData = transactsData?.data?.filter(
          (tD) =>
            tD.sender == AccountData?.data?.name ||
            tD.receiver == AccountData?.data?.name
        );
        console.log(transactsData);
        setAccount(AccountData?.data);
        setTransactions(transactsData);
      }, [id]);
    
      async function deleteAccount() {
        if (confirm("Do you really want to delete this account?")) {
          await axios.delete("http://localhost:1337/accounts/" + id);
          router.push("/");
        }
      }
    
      return (
        <div className={styles.accountviewcontainer}>
          <div className={styles.accountviewmain}>
            <div style={{ width: "100%" }}>
              <div className={styles.accountviewname}>
                <h1>{account?.name}</h1>
              </div>
              <div className={styles.accountviewminidet}>
                <div>
                  <span style={{ marginRight: "4px", color: "rgb(142 142 142)" }}>
                    Balance($):
                  </span>
                  <span style={{ fontWeight: "600" }}>{account?.balance}</span>
                </div>
                <div style={{ padding: "14px 0" }}>
                  <span>
                    <button onClick={deleteAccount} className="btn-danger">
                      Delete
                    </button>
                  </span>
                </div>
              </div>
              <div className={styles.accountviewtransactionscont}>
                <div className={styles.accountviewtransactions}>
                  <h2>Transactions</h2>
                </div>
                <div className={styles.accountviewtransactionslist}>
                  {!transactions || transactions?.length <= 0
                    ? "No transactions yet."
                    : transactions?.map((transaction, i) => (
                        <TransactionCard key={i} transaction={transaction} />
                      ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }
```

The component retrieves the `id` from the URL. We have states `account` and `transactions`, that hold the account and its transactions respectively.

The `useEffect` hook callback calls the `/accounts/" + id` endpoint with the `id` value to get the account via its id. Next, it calls the `/transacts` endpoint to retrieve the transactions and filter out the transaction made or received by the current account user. The result is set in the `transactions` state while the account details are set in the `account` state.

The UI then displays the account details and their transactions.

There is a `Delete` button that when clicked deletes the current account user. It does this by calling the endpoint `/accounts/" + id` over the DELETE HTTP method with the account's id. This makes Strapi delete the account.

**AddAccountDialog**
This component is a dialog that we use to add a new account.

Paste the below code in `components/AddAccountDialog/index.js`:

```
    import { useState } from "react";
    import EpisodeCard from "../TransactionCard";
    import axios from "axios";
    
    export default function AddAccountDialog({ closeModal }) {
      const [disable, setDisable] = useState(false);
    
      async function addAccount() {
        setDisable(true);
        const accountName = window.accountName.value;
        const accountBalance = window.accountBalance.value;
    
        // add account
        await axios.post("http://localhost:1337/accounts", {
          name: accountName,
          balance: parseFloat(accountBalance),
        });
        setDisable(false);
        closeModal();
        location.reload();
      }
    
      return (
        <div className="modal">
          <div className="modal-backdrop" onClick={closeModal}></div>
          <div className="modal-content">
            <div className="modal-header">
              <h3>Add New Account</h3>
              <span
                style={{ padding: "10px", cursor: "pointer" }}
                onClick={closeModal}
              >
                X
              </span>
            </div>
            <div className="modal-body content">
              <div style={{ display: "flex", flexWrap: "wrap" }}>
                <div className="inputField">
                  <div className="label">
                    <label>Name</label>
                  </div>
                  <div>
                    <input id="accountName" type="text" />
                  </div>
                </div>
                <div className="inputField">
                  <div className="label">
                    <label>Balance($):</label>
                  </div>
                  <div>
                    <input id="accountBalance" type="text" />
                  </div>
                </div>
              </div>
            </div>
            <div className="modal-footer">
              <button
                disabled={disable}
                className="btn-danger"
                onClick={closeModal}
              >
                Cancel
              </button>
              <button disabled={disable} className="btn" onClick={addAccount}>
                Add Account
              </button>
            </div>
          </div>
        </div>
      );
    }
```


We have input boxes to type in the account name and its initial balance deposited. The `Add Account` button when clicked calls the `addAccount` function. This function retrieves the account name and balance and calls the `/accounts` endpoint via the POST HTTP with the payload: account name and balance. This creates a new account with this payload.

**TransactionDialog**
This component is where we send money from an account to another.

Paste the below code to `components/TransactionDialog/index.js`:

```

    import { useState } from "react";
    import TransactionCard from "../TransactionCard";
    import axios from "axios";
    
    export default function TransactDialog({ closeModal }) {
      const [disable, setDisable] = useState(false);
    
      async function transact() {
        setDisable(true);
        const sender = window.sender.value;
        const receiver = window.receiver.value;
        const amount = window.amount.value;
    
        await axios.post("http://localhost:1337/transfer", {
          sender,
          receiver,
          amount,
        });
    
        setDisable(false);
        closeModal();
        location.reload();
      }
    
      return (
        <div className="modal">
          <div className="modal-backdrop" onClick={closeModal}></div>
          <div className="modal-content">
            <div className="modal-header">
              <h3>Transaction</h3>
              <span
                style={{ padding: "10px", cursor: "pointer" }}
                onClick={closeModal}
              >
                X
              </span>
            </div>
            <div className="modal-body content">
              <div style={{ display: "flex", flexWrap: "wrap" }}>
                <div className="inputField">
                  <div className="label">
                    <label>Sender</label>
                  </div>
                  <div>
                    <input id="sender" type="text" />
                  </div>
                </div>
                <div className="inputField">
                  <div className="label">
                    <label>Receiver</label>
                  </div>
                  <div>
                    <input id="receiver" type="text" />
                  </div>
                </div>
                <div className="inputField">
                  <div className="label">
                    <label>Amount($)</label>
                  </div>
                  <div>
                    <input id="number" id="amount" type="text" />
                  </div>
                </div>
              </div>
            </div>
            <div className="modal-footer">
              <button
                disabled={disable}
                className="btn-danger"
                onClick={closeModal}
              >
                Cancel
              </button>
              <button disabled={disable} className="btn" onClick={transact}>
                Transact
              </button>
            </div>
          </div>
        </div>
      );
    }
```

The input boxes collect the sender and receiver names and the amount to transfer.

The `transact` function does the job. It retrieves the sender, receiver, and amount values from the input boxes, and then calls the endpoint `/transfer` via HTTP POST passing in the sender, receiver, and amount as payload. The `/transfer` endpoint will then transfer the `amount` from the `sender` to the `receiver`.

We are done building our components, let's test it.

# **Test**

**Add new account**

![](https://paper-attachments.dropbox.com/s_0BA9C20C088A45BE65DF12B51336D9BE7ACA75ACC69E7432BED3DE1319758436_1622226905242_Screenshot+2021-05-28+at+18.38.34.png)

![](https://paper-attachments.dropbox.com/s_0BA9C20C088A45BE65DF12B51336D9BE7ACA75ACC69E7432BED3DE1319758436_1622226924226_Screenshot+2021-05-28+at+18.38.43.png)

![](https://paper-attachments.dropbox.com/s_0BA9C20C088A45BE65DF12B51336D9BE7ACA75ACC69E7432BED3DE1319758436_1622226944937_Screenshot+2021-05-28+at+18.39.27.png)


**Do some transaction**

![](https://paper-attachments.dropbox.com/s_0BA9C20C088A45BE65DF12B51336D9BE7ACA75ACC69E7432BED3DE1319758436_1622226959115_Screenshot+2021-05-28+at+18.40.03.png)

![](https://paper-attachments.dropbox.com/s_0BA9C20C088A45BE65DF12B51336D9BE7ACA75ACC69E7432BED3DE1319758436_1622226985971_Screenshot+2021-05-28+at+18.40.21.png)

![](https://paper-attachments.dropbox.com/s_0BA9C20C088A45BE65DF12B51336D9BE7ACA75ACC69E7432BED3DE1319758436_1622227010065_Screenshot+2021-05-28+at+18.40.26.png)

![](https://paper-attachments.dropbox.com/s_0BA9C20C088A45BE65DF12B51336D9BE7ACA75ACC69E7432BED3DE1319758436_1622227022418_Screenshot+2021-05-28+at+18.40.34.png)


**Delete an account**

![](https://paper-attachments.dropbox.com/s_0BA9C20C088A45BE65DF12B51336D9BE7ACA75ACC69E7432BED3DE1319758436_1622227054544_Screenshot+2021-05-28+at+18.40.48.png)

![](https://paper-attachments.dropbox.com/s_0BA9C20C088A45BE65DF12B51336D9BE7ACA75ACC69E7432BED3DE1319758436_1622227079175_Screenshot+2021-05-28+at+18.40.53.png)

# Source code
- [Frontend code](https://github.com/strapi-prjs/strapi-postgresql-bank)
- [Backend code](https://github.com/strapi-prjs/strapi-postgresql-api)

# **Conclusion**

Strapi is great! It's freaking awesome! You see how we were able to integrate PostgreSQL into our Strapi project seamlessly.

We started by introducing Strapi and the goodies it brings to software development. Later on, we learned about the default DB it uses for data persistence.

Next, we introduced PostgreSQL and showed where to download and install it. We learned how to configure a Strapi project to use PostgreSQL as the database to store its application content.

We went further to build a bank app to demonstrate how to use PostgreSQL in Strapi to the fullest.

Always consider using Strapi in your projects. It is straightforward and highly configurable.