Build a KPI Dashboard for your Supabase App with Dashbase

Dashbase is the perfect tool to build a KPI and Metrics dshboard for your Supabase app. In this tutorial, we will show you how to connect Dashbase to your Supabase app and build your first Dashboard visualizations.

If you are looking for a fast and easy way to understand the usage of your Supabase app, measure your performance and track your KPIs, Dashbase is the right tool for you. You can use AI to quickly craft queries and create charts, build a beutiful dashboard and share it with your team.

What is Supabase

Supabase is an open source Firebase alternative. It is a service that provides a set of tools to help developers build modern web and mobile applications. It is built on top of Postgres and provides a set of tools to help developers build modern web and mobile applications. Supabase let's you quickly and easily set up the entire backend for your app, including authentication, database, storage, and more. Learn more about Dashbase.

Prerequisites

• A Supabase account and an existing Supabase project. If you don't have one, you can create a new Supabase project by following the instructions here.
• A Dashbase account. If you don't have one, you can create a new account by following the instructions on the Dashbase signup page.

Step 1 (optional): Create a Read Only User in your Supabase Project

To connect Dashbase to your Supabase project, you will need to provide Dashbase with credentials to your Supabase project's database. While you can use the admin user credentials that Supabase provides for you, it is recommended to create a read only user for Dashbase to use. This is a best practice to avoid sharing credentials with admin privilages to your database, and ensure that Dashbase can only read data from your database and not modify or delete anything.

To create a read only user in your Supabase project, open your supabase project and open the SQL editor. Run the following SQL query to create a new read only user:

CREATE USER dashbase_readonly WITH ENCRYPTED PASSWORD '<<INSERT A GOOD PASSWORD HERE>>';
GRANT supabase_read_only_user TO dashbase_readonly;
GRANT pg_read_all_data TO dashbase_readonly;
ALTER USER dashbase_readonly WITH BYPASSRLS;

These 4 statements create a new user called dashbase_readonly with a password, grant it read only access to your Supabase project, and grant it read access to all tables in your database. The last statement ALTER USER dashbase_readonly WITH BYPASSRLS is required to allow the user to bypass Row Level Security (RLS) policies, which are used by Supabase to control access to rows in your database. This is required because Dashbase needs to be able to read all rows in your database to create visualizations.

Step 2: Connect to your Supabase Project in Dashbase

Next up, open up dashbase.ai/app and select the workspace you want to use. If you don't have a workspace yet, you can create a new one by clicking on the "Create Workspace" button. Inside the workspace, click the "Workspace Settings" button on the top right corner and find the data sources section. Click "Add Source" and fill in the connection details for your Supabase database.

Here are the details you'll need to fill in:

• Name: A name for your connection. This can be anything you want, it's just for your reference.
• Type: Select "PostgreSQL" from the dropdown.
• Host: This is the hostname of your Supabase database. You can find this in your Supabase project settings under the "Database" section. It'll look something like aws-0-us-west-1.pooler.supabase.com depending on your projects region.
• Port: This is the port number of your Supabase database. It's usually 6543 but you can find this in your Supabase project settings under the "Database" section. Make sure you use the port for the "Transaction" mode and not "Session" mode, as it'll be more efficient for Dashbase to use.
• Username: This will be the username of the read only user you created in Step 1, plus ..<<supabase.project_id>>. In our example, it's dashbase_readonly.<<supabase.project_id>>. If you want to use the default admin user, you'll find the username in your Supabase project settings under the "Database" section.
• Password: This will be the password of the read only user you created in Step 1. If you want to use the default admin user, you'll use the password you created when first setting up your Supabase project.
• Database: This is the name of your Supabase database. You can find this in your Supabase project settings under the "Database" section. It's usually "postgres".
• Schemas: This is the schema(s) where your data resides in the database. The default schema is usually "public", but you can add more if you have data in other schemas (like stripe or auth). You can leave this blank if you're not sure.

Once you've filled in all the details, click "Test Connection" to make sure everything is working. If it is, click "Save" to save the connection. You should now see your Supabase database listed as a data source in your workspace.

Step 3: Create your first Dashboard

That's it, you have successfully connected Dashbase to your Supabase project! Now you can start building your first dashboard. Click on the "Create Dashboard" button in the top right corner of the workspace to create your first dashboard.

Conclusion

In this tutorial, we showed you how to connect Dashbase to your Supabase project and build your first dashboard. We hope you found this tutorial helpful and that you are now able to build beautiful KPI dashboards for your Supabase app. If you have any questions or need help, feel free to reach out to reach out to the Dashbase Team.