# Building an Investor List App with Novu and Supabase

> Building an Investor List App with Novu and Supabase

Canonical: https://novu.co/blog/building-an-investor-list-app-with-novu-and-supabase/

Markdown: https://novu.co/blog/building-an-investor-list-app-with-novu-and-supabase.md

Last updated: 2024-03-15T17:12:56.000Z

Building an Investor List App with Novu and Supabase

Authors: Prosper Otemuyiwa

Published: 2024-03-15T17:12:56.000Z

Category: How to

[Supabase](<https://supabase.com/>) is an impressive open-source alternative to Firebase. It provides multiple tools that enable you to build comprehensive backend systems, including features for authentication, databases, storage, and real-time updates.

In this article, I’ll guide you through the process of integrating your Next.js Supabase app with Novu. This integration will allow for a seamless, quick, and stress-free notification experience.

[Novu](<https://novu.co/>) is an open-source notification infrastructure designed to assist engineering teams in creating robust product notification experiences.

We’ll create an **AI investor list app**. This app will enable users to add details of angel investors interested in funding AI startups at the Pre-seed, Seed, and Series A stages. It will also announce and send in-app notifications when new investors are added.

## Prerequisites

Before diving into the article, make sure you have the following:

- Node.js installed on your development machine.

- A Novu account. If you don’t have one, sign up for free at [**the web dashboard**](<https://web.novu.co/>)**.**

- A Supabase account. If you don’t have one, sign up for [free at the dashboard](<https://supabase.com/dashboard/projects>).

If you want to explore the code right away, you can  [**view the completed code**](<https://github.com/novuhq/novu-supabase-app>) on GitHub.

## Set up a Next.js App

To create a Next.js app, open your terminal, `cd` into the directory you’d like to create the app in, and run the following command:

```bash
npx create-next-app@latest supabase-novu
```

Go through the prompts:

`cd` into the directory, `supabase-novu` and run to start the app in your browser:

```bash
npm run dev
```

## Set up Supabase in the App

Run the following command to add Supabase to the project:

```bash
npm i @supabase/supabase-js
```

Ensure you have signed up and **created a new project** on Supabase. It takes a couple of minutes to have your project instance set up on the dashboard. Once done, it should look similar to the image below:

We’ll go ahead to create a database table, **investors**, in our newly created project. Click on the **SQL Editor** on the dashboard and add the following SQL query to the editor.

```sql
CREATE TABLE investors (
 id bigint generated by default as identity primary key,
 email_reach text unique,
 name text,
 website text,
 funding_amount text,
 funding_type text,
 inserted_at timestamp with time zone default timezone('utc'::text, now()) not null
);

alter table investors enable row level security;

create policy "Investors are public." on investors for
   select using (true);
```

It should look like so:

Click on **“Run”** to run the query, create the table and apply a Policy.

This will go ahead to create an `investors` table. It also enables **row level permission** that allows anyone to query for all investors. In this article we are not concerned with authentication. However, this is something you should consider if you are to make it a production grade app.

You should be able to see your table created successfully!

Next, we need to connect our Next.js app with our Supabase backend.

## Connect Supabase with Next.js

Create a `.env.local` or `.env` file in the root of the Next.js app and add the following environment variables:

```sql
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
```

Please replace the placeholders here with the correct values from your dashboard.

Click on the **“Project Settings icon”** at the bottom left and click on **“API”** to show you the screen below to obtain the correct values.

Create an `utils` folder inside the `src` directory of our Next.js project. Then go ahead to create a `supabase.js` file in it. Add the code below:

```javascript
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);
```

This is the Supabase client that we can use anywhere in our app going forward. The `createClient` function that we imported from the supabase library makes it possible.

Next, let’s set up our UI components and wire them to the Supabase backend.

## Build UI to Interact with Supabase

Open up the `src/pages/index.js` file. We will modify it a lot.

Replace the content of the file with the code below:

```javascript
import Image from "next/image";
import { Inter } from "next/font/google";
import { supabase } from "@/utils/supabase";
import { useEffect, useState } from "react";

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  const [investors, setInvestors] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchAllInvestors();
  }, []);

  async function fetchAllInvestors() {
    try {
      setLoading(true);
      const { data, error } = await supabase.from("investors").select("*");

      if (error) throw error;
      setInvestors(data);
    } catch (error) {
      alert(error.message);
    } finally {
      setLoading(false);
    }
  }

  async function addInvestor(
    email_reach,
    name,
    website,
    funding_amount,
    funding_type
  ) {
    try {
      const { data, error } = await supabase
        .from("investors")
        .insert([
          {
            email_reach,
            name,
            website,
            funding_amount,
            funding_type,
          },
        ])
        .single();
      if (error) throw error;
      alert("Investor added successfully");
      fetchAllInvestors();
    } catch (error) {
      alert(error.message);
    }
  }

  function handleSubmit(e) {
    e.preventDefault();

    const email_reach = e.target.email_reach.value;
    const name = e.target.name.value;
    const website = e.target.website.value;
    const funding_amount = e.target.funding_amount.value;
    const funding_type = e.target.funding_type.value;

    addInvestor(email_reach, name, website, funding_amount, funding_type);
  }

  return (

          NOVU SUPABASE DASHBOARD
        </p>

          "
            target="_blank"
            rel="noopener noreferrer"
          >
            By{" "}

          </a>
        </div>
      </div>

              Name:</label>

            </div>

              Email Reach:</label>

            </div>

              Website:</label>

            </div>

              Funding Amount (Up to X USD):</label>

            </div>

              Funding Type:</label>

            </div>

              Submit Investor Details
            </button>
          </form>
        </div>

          {investors?.length === 0 ? (

              There are no investors yet</p>
            </div>
          ) : (

              Here are the investors available: </p>

                  {investors?.map((item) => (

                      Name </th>
                    Email Reach</th>
                    Website</th>
                    Funding Amt</th>
                    Funding Type </th>
                  </tr>
                </thead>
                {item.name}</td>
                      {item.email_reach}</td>
                      {item.website}</td>
                      {item.funding_amount}</td>
                      {item.funding_type}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>

        "
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >

            Docs{" "}

              ->
            </span>
          </h2>

            Find in-depth information about Next.js features and API.
          </p>
        </a>

        "
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >

            Learn{" "}

              ->
            </span>
          </h2>

            Learn about Next.js in an interactive course with quizzes!
          </p>
        </a>

        "
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >

            Templates{" "}

              ->
            </span>
          </h2>

            Discover and deploy boilerplate example Next.js projects.
          </p>
        </a>

        "
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >

            Deploy{" "}

              ->
            </span>
          </h2>

            Instantly deploy your Next.js site to a shareable URL with Vercel.
          </p>
        </a>
      </div>
    </main>
  );
}
```

Let’s go over some sections of this code block:

```javascript
function handleSubmit(e) {
    e.preventDefault();

    const email_reach = e.target.email_reach.value;
    const name = e.target.name.value;
    const website = e.target.website.value;
    const funding_amount = e.target.funding_amount.value;
    const funding_type = e.target.funding_type.value;

    addInvestor(email_reach, name, website, funding_amount, funding_type);
  }
```

This function handles the submission of the form. It grabs the value from the form fields and passes it to the \`addInvestor\` function.

```javascript
async function addInvestor(
    email_reach,
    name,
    website,
    funding_amount,
    funding_type
  ) {
    try {
      const { data, error } = await supabase
        .from("investors")
        .insert([
          {
            email_reach,
            name,
            website,
            funding_amount,
            funding_type,
          },
        ])
        .single();
      if (error) throw error;
      alert("Investor added successfully");
      fetchAllInvestors();
    } catch (error) {
      alert(error.message);
    }
  }
```

The `addInvestor` function takes in the right arguments and makes a query to supabase to insert the values into the `investors` table.

This function also calls the `fetchAllInvestors()` function that retrieves all data from the `investors` table.

```javascript
async function fetchAllInvestors() {
    try {
      setLoading(true);
      const { data, error } = await supabase.from("investors").select("*");

      if (error) throw error;
      setInvestors(data);
    } catch (error) {
      alert(error.message);
    } finally {
      setLoading(false);
    }
  }
```

As you can see from the code above, the `fetchAllInvestors()` function makes a SELECT query to the `investors` table to return and all the investors to the frontend.

```javascript
const [investors, setInvestors] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
  fetchAllInvestors();
}, []);
```

When the page loads up, it calls the `fetchAllInvestors()` function by default.

Run your app with `npm run dev`. It should look like this:

Add some investor details and submit. Your app should look like this now:

As we add items, they are saved to the Supabase database and displayed on the screen.

Inspect the table on Supabase. The data should appear as follows:

Next, we’ll set up notifications in the app. Our goal is to alert everyone when a new investor is added to the database. This is where Novu comes into play!

## Set up Novu in the App

Run the following command to install the Novu node SDK:

```javascript
npm install @novu/node
```

Run the following command to install the Novu Notification Center package:

```javascript
npm install @novu/notification-center
```

The Novu Notification Center package provides a React component library that adds a notification center to your React app. The [package is also available for non-React apps](<https://docs.novu.co/notification-center/introduction#ui-libraries>).

Before we can start sending and receiving notifications, we need to set up a few things:

1. Create a workflow for sending notifications,

1. Create a subscriber – recipient of notifications.

## Create a Novu Workflow

A workflow is a blueprint for notifications. It includes the following:

- Workflow name and Identifier

- Channels: – Email, SMS, Chat, In-App and Push

Follow the steps below to create a workflow:

1. Click **Workflow** on the left sidebar of your Novu dashboard.

1. Click the **Add a Workflow** button on the top left. You can select a Blank workflow or use one of the existing templates.

1. The name of the new workflow is currently **“Untitled”**. Rename it to `notify users of new investors`.

1. Select **In-App** as the channel you want to add. ![https://mintlify.s3-us-west-1.amazonaws.com/novu/images/in-app-react.png](<https://mintlify.s3-us-west-1.amazonaws.com/novu/images/in-app-react.png>)

1. Click on the recently added **“In-App”** channel and add the following text to it. Once you’re done, click **“Update”** to save your configuration.

The `{{name}},{{funding_amount}}` and `{{email}}` are custom variables. This means that we can pass them to our [payload](<https://docs.novu.co/quickstarts/general#pass-the-subscriber-information-in-the-trigger-quickest>) before we trigger a notification. You’ll see this when we create the API route to send notifications.

## Create a subscriber

If you click **“Subscriber”** on the left sidebar of the [**Novu dashboard**](<https://web.novu.co/subscribers>), you’ll see the subscriber list. As a first time Novu user, it will be an empty list. Subscribers are your **app users.**

Open your terminal and run the following script to create a subscriber:

```bash
curl --location '' \\
  --header 'Content-Type: application/json' \\
  --header 'Accept: application/json' \\
  --header 'Authorization: ApiKey ' \\
  --data-raw '{
    "firstName": "John",
    "lastName": "Doe",
    "email": "johndoe@domain.com",
    "phone": "+1234567890"
    }'
```

**Note:** You can get your NOVU API Key from the [settings section](<https://web.novu.co/settings>) of your Novu dashboard.

Refresh the Subscribers page on your Novu dashboard. You should see the recently added subscriber now! You can also add a subscriber to Novu by running this [API endpoint](<https://docs.novu.co/api-reference/subscribers/create-subscriber>).

The best option to add a subscriber is via code in your backend. With Node.js code, you can run the following code to create a subscriber:

```javascript
import { Novu } from "@novu/node";

// Insert your Novu API Key here
const novu = new Novu("");

// Create a subscriber on Novu
await novu.subscribers.identify("132", {
  email: "john.doe@domain.com",
  firstName: "John",
  lastName: "Doe",
  phone: "+13603963366",
});
```

## Set up Novu Notification Center in the App

Head over to `scr/pages/index.js`. We’ll modify this page again to include the following:

- Import and display the Novu Notification Center.

- A function to trigger the notification when a new investor is added.

Import the Notification Center components from the Novu notification center package like so:

```javascript
...
import {
  NovuProvider,
  PopoverNotificationCenter,
  NotificationBell,
} from "@novu/notification-center";
```

Display the notification center by adding the imported components like so:

```javascript
...
return (

          NOVU SUPABASE DASHBOARD
        </p>

              {({ unseenCount }) => (

              )}
            </PopoverNotificationCenter>
          </NovuProvider>
        </div>
      </div>

      ...
```

Now, your app should display a notification bell. When this bell is clicked, a notification user interface will pop up.

**Note:** The [NovuProvider root Component ships with many props](<https://docs.novu.co/notification-center/client/react/api-reference#novuprovider>) that can be used to customize the Notification Center to your taste. The floating [popover component](<https://docs.novu.co/notification-center/client/react/api-reference#popovernotificationcenter>) that appears when clicking on the [**NotificationBell**](<https://docs.novu.co/notification-center/client/react/api-reference#notificationbell>) button. It renders the [**NotificationCenter**](<https://docs.novu.co/notification-center/client/react/api-reference#notificationcenter>) component inside its content.

Add the following Novu env variables to your `.env.local` file:

```javascript
NEXT_PUBLIC_SUBSCRIBER_ID=
NEXT_PUBLIC_NOVU_APP_ID=
NEXT_PUBLIC_NOVU_API_KEY=
```

The **Novu API Key** and **APP ID** can be found in the [Settings](<https://web.novu.co/settings>) section of your Novu dashboard.

The Subscriber ID too is on your dashboard. Earlier in this article, we created a subscriber. We need that ID now.

**Note:** Adding the Subscriber ID to the env file is only for the purpose of this article. Your subscriber ID is the user ID obtained from an authenticated user. When a user logs in, their ID should be the value passed to the **subscriberId** property of the **NovuProvider** component.

## Develop a Simple API to Trigger Notifications

Create a `send-notification.js` file in the `src/pages/api` directory. Add the code below to it:

```javascript
import { Novu } from "@novu/node";

const novu = new Novu(process.env.NEXT_PUBLIC_NOVU_API_KEY);

export const workflowTriggerID = "notify-users-of-new-investors";

export default async function handler(req, res) {
  const { email, name, amount } = JSON.parse(req.body);

  await novu.trigger(workflowTriggerID, {
    to: {
      subscriberId: process.env.NEXT_PUBLIC_SUBSCRIBER_ID,
    },
    payload: {
      name: name,
      funding_amount: amount,
      email: email,
    },
  });

  return res.json({ finish: true });
}
```

The `workflowTriggerID` value is obtained from the workflow dashboard. Earlier, when we set up a workflow titled `notify users of new investors`, Novu created a slug from this title to serve as the trigger ID.

You can see it here:

The block of code below triggers the notification via the Novu SDK:

- Accepts the workflow trigger ID to determine which workflow to trigger.

- Accepts the subscriber ID value to identify the notification recipient.

- Accepts a payload object that represents the parameters to inject into the workflow variables.

```javascript
await novu.trigger(workflowTriggerID, {
    to: {
      subscriberId: process.env.NEXT_PUBLIC_SUBSCRIBER_ID,
    },
    payload: {
      name: name,
      funding_amount: amount,
      email: email,
    },
  });
```

Next, we need to set up one more thing on the frontend before we test the notification experience in our app.

## Add a Notification Function to Index.js

Create a function inside the `Home()` function to call our recently created API like so:

```javascript
async function triggerNotification(email_reach, name, funding_amount) {
    await fetch("/api/send-notification", {
      method: "POST",
      body: JSON.stringify({
        email: email_reach,
        name: name,
        amount: funding_amount,
      }),
    });
  }
```

Call the `triggerNotification` function just after the `addInvestor` function within the `handleSubmit` function.

Your `handleSubmit` function should now appear as follows:

```javascript
function handleSubmit(e) {
    e.preventDefault();

    const email_reach = e.target.email_reach.value;
    const name = e.target.name.value;
    const website = e.target.website.value;
    const funding_amount = e.target.funding_amount.value;
    const funding_type = e.target.funding_type.value;

    addInvestor(email_reach, name, website, funding_amount, funding_type);
    triggerNotification(email_reach, name, funding_amount);
  }
```

Run your app again and submit a new investor detail. You should get an instant In-App notification with the details of the new investor.

## A Step Further – Notify All Investors

We currently have a database containing investor emails. This is valuable data. Let’s consider adding a feature to email these investors about new investment rounds from startups seeking funding.

We will not add a UI for the save of brevity. You can add a UI as an improvement and challenge.

Create a new file, `email-investors.js` within the `pages/api` directory.

Add the code below to it:

```javascript
import { Novu } from "@novu/node";
import { supabase } from "@/utils/supabase";

const novu = new Novu(process.env.NEXT_PUBLIC_NOVU_API_KEY);

export const workflowTriggerID = "new-opportunities";

export default async function handler(req, res) {
  /**
   * Grab all investors
   */
  const { data, error } = await supabase.from("investors").select("*");

  /**
   * Map into a new array of subscriber data
   */
  const subscriberData = data.map((item) => {
    return {
      subscriberId: item.id.toString(),
      email: item.email_reach,
    };
  });

  const extractIDs = (data) => {
    return data.map((item) => item.subscriberId);
  };

  const subscriberIDs = extractIDs(subscriberData);

  /**
   * Bulk create subscribers on Novu
   */
  await novu.subscribers.bulkCreate(subscriberData);

  /**
   * Create a Topic on Novu
   */
  await novu.topics.create({
    key: "all-investors",
    name: "List of all investors on our platform",
  });

  /**
   * Assign subscribers to Topic
   */
  const topicKey = "all-investors";

  /**
   * Add all investors to the Topic
   */
  await novu.topics.addSubscribers(topicKey, {
    subscribers: subscriberIDs,
  });

  /**
   * Trigger workflow to the Topic
   */
  await novu.trigger(workflowTriggerID, {
    to: [{ type: "Topic", topicKey: topicKey }],
  });

  return res.json({ finish: true });
}
```

There are a series of events happening in this file. I’ll explain the steps below:

1. Fetch all investors data from Supabase

1. Return an array of objects of the supabase data with “subscriberId” and “email”.

1. Create all the investors as subscribers on Novu. Thankfully Novu has a \`bulkCreate” function to create hundreds of subscribers at once instead of doing a complex loop yourself.

1. Create a topic on Novu. Topics offers a great way of sending notifications to multiple subscribers at once. In this case, it’s perfect for us. Here, we created a “all-investors” topic and then proceeded to add all the investors as subscribers to the topic.

1. The last step is what triggers the notification to all the investors. This is a simple syntax that triggers notifications to a topic. This means every subscriber belonging to that topic will receive a notification!

This block of code is where I set the trigger ID of the new Email workflow i created.

```javascript
export const workflowTriggerID = "new-opportunities";
```

If you haven’t, go ahead and create an email workflow on Novu. Name the workflow and use the corresponding trigger ID like I did.

Add content to the email workflow and save.

**Note:** At this stage, it’s crucial to ensure that an email provider has been selected from the **Integrations Store.** This allows Novu to identify the email provider to use for delivering the email.

Run the API:

-&gt; `/api/email-investors`.

The investors should get an email like this:

## Conclusion

The combination of two robust open-source tools, Novu and Supabase, enables the rapid development of apps with a rich notification experience.

I hope you enjoyed building this simple investor list app as much as I did. Novu offers different channels such as Email, SMS, and Push, gives you a [detailed activity feed](<https://docs.novu.co/activity-feed/introduction#viewing-a-specific-subscribers-activity>) to help debug your notifications and much more!

Do you have an idea or an app you’d like to build with Novu and Supabase? We are excited to see the incredible apps you’ll create. Don’t hesitate to ask any questions or request support. You can find us on [Discord](<https://discord.gg/novu>) and [Twitter](<https://twitter.com/novuhq>). Please feel free to reach out.