Additional tables

Make Supaboost your own, by adding your own tables and structure on top of the Supaboost boilerplate.


After you have configured your Supaboost, the next step is to make it your own. Maybe you want to create the new Tinder, a To Do app or something different. Point is, you need to store your data within you database, to be able to render it properly in your app.

Adding the correct columns to your table

There are some important topics that you need to remember when creating a new table in Supabase/postgres. When we look at the Supaboost To-do table, we can see most of these already.

to-do table in Supaboost - postgres

Let's dive a little deeper:

  • id: The identifier of the line. Needs to be unique
  • created_at: Not mandatory. Could be helpful to verify when it was created and if it is still relevant
  • title: Title of the to-do.
  • is_complete: Status of the to-do
  • user_id: Creator of the row in the table
  • company_id: Company id of the company that is linked to the creating user

id

The id column is also the primary key. Each table in your database need a unique identifier, also known as id. With Supabase, you can set the type to uuid and gen_random_uuid to make a unique identifier. This code is very hard to guess, as there are millions of possibilities with this string.

user_id & company_id

I added these together, because they are both important in Supaboost and the database structure. You want to make sure you add both information regarding the user and the company depending on what you want to achieve. Company is always required, while user_id can be used interchangeably.

The reason being, if there are more people in a company, they need to be able to see each others content (to-dos in this example). You also want to see who has created the to-do. While the company is most important, you can decide if you want to add the user also. Some examples to consider:

  • Table for messages from one company to another company
    • company_id: yes
    • user_id: not
  • Table that keeps track of tasks
    • company_id: yes
    • user_id: yes
  • Table for intercompany messages
    • company_id: yes
    • user_id: yes

created_at

Not mandatory at all. I added this to the to-do table as it seemed logical to add based on the to-do. You can also add a updated_at column, so you can keep track of when the last changes were.

title

Name of the to-do, or better a short description. This is also not mandatory, you could also add a title and description, so users can add more detail.

is_complete

Added to make sure I can filter out already completed to-dos. With Supabase queries you can add filters or match, to make sure the fetch only returns rows that have a given status.

Examples from the internet

Looking at just one example is not enough to create your own tables with the correct structure. To make it easier to understand, lets look at several webpages and define what a potential table could look like for Supaboost.

Supabase - preferences

supabase preferences page table explanation

  • id: uuid with gen_random_uuid - primary key
  • username: text, not nullable
  • email: text, not nullable
  • first_name: text, nullable
  • last_name: text, nullable
  • theme: text, not null, default = system
  • analytics: boolean
  • user_id: uuid, not null, foreign key to user.id
  • company_id: uuid, not null

Vercel - Import project

vercel import project page table explanation

  • id: uuid with gen_random_uuid - primary key, is unique
  • project_name: text, not nullable
  • framework_preset: text, default 'next.js', not nullable
  • root_directory: text, default '/', not nullable
  • build_command: text, default 'npm run build', not nullable
  • output_directory: text, default 'next.js default', not nullable
  • install_command: text, default 'npm install', not nullable
  • environment_variables: json, nullable, is an array
    • This could also be an external table that has the ID of the import_project table stored as their foreign key relation.
  • user_id: uuid and foreign key to user.id
  • company_id: uuid

As you can see, without knowing anything about a specific form or page, you can guess what the table structure should look like. If you can work out what your page should be, you know what information you need to store.

Best part is.. if you don't know it from the start, you can update it later and still have a valid database!

Key takeaways

  1. Add an identifier to your tables
  2. Make sure to add user_id (creator) and company_id to most tables so you can query them in your application and link it to the correct template
  3. Look at pages in the internet and check what the table structure could look like
  4. Start creating, then iterate on what you already have. It's easy to add additional columns and implement them in your app