How I use Supabase for my Portfolio CMS

Hi everyone in this article I will show you how I use supabase for my portfolio CMS.

Currently, my portfolio has a lot of static content like work experiences, personal projects, and achievements. some times these kinds of data want to change.

some times I change these data from the code base and redeployed.

I find a solution for this. the solution is to connect CMS to my portfolio. I find a lot of CMS platforms. I know supabase is not a CMS platform but it works for my scenario.

In this article, we will take a look at how to do the following:

Setting up supabase project

To get started with Supabase, visit app.supabase.io. You can use your GitHub account to create a new account with Supabase.

From there, click on the New Project button to create a new project. You will need to select an organization. Once selected, the following page will appear

Give your project a name and password, then select the region that is closest to you.

It will take a couple of minutes to build the database and API. Once completed, go to Settings -> API and copy the URL and Public key for later

Create Database

Click on the table editor from the left panel to create a new table.

Then click on the “Create new table” button, fill in table details, and click Save to create your table. When saving a table is completed, you can preview it from the table editor page.

Now you are ready to add columns to your table. By default, you create a table with an id column.

In my project, I create the achievements, projects, and work tables.

Connect Supabase to a NEXT JS application

Now that we have created a new project in Supabase, let’s learn how to connect it to our Next JS application.

First, install the Supabase NPM library in your project.

npm install --save @supabase/supabase-js

Then, initialize a new Supabase client with the createClient function.

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

//initianlize supabase client
const supabase = createClient(
// replace with your URL and API key 
SUPABASE_URL, SUPABASE_ANON_KEY
);

and now I can fetch data from supabase database. I create this function to fetch my achievements data from the supabase.

const getAchievementsData = async () => {
    try {
      const { data, error } = await supabase
        .from("achivements") //Table Name
        .select()
        .order("id", { ascending: true });
      setAchievements(data); //set fetch data to my useState
      if (error) throw error;
    } catch (error) {
      console.log(error);
    }
  };

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

Now I can display my achievements data in my portfolio. I use the map function to iterate over an array and manipulate data items.

<div className={Styles.achivementCard}>
  {achievements.map((Achivement) => (
    <AchievementCard
      key={Achivement.id}
      title={Achivement.name}
      desc={Achivement.desc}
      image={Achivement.image}
      link={Achivement.link}
    />
  ))}
</div>

Here is the live link to my portfolio — https://bawanthathilan.vercel.app/

Thank you for reading. stay safe 👋