Creating a blogging platform using supabase and yoopta editor

Building a blogging platform can be complex, especially on choosing the tools or technology stack you will use. While block editors have been prominent now in our daily life, there is still a short number of open source libraries available in the market for this type of tool. Thankfully, Yoopta Editor is a block based editor tool that offers a wide range of blocks that can be utilized when creating a blog. 



Once I have chosen Yoopta Editor as the block based editor of my project, the second problem that I have to solve is where would I place all the data from each of my blogs. The idea of using Supabase comes when I have encountered a technical interview where I should use Supabase. In this context I have learned that Supabase is used across the industry due to its convenient features of being backend as a service. 



Together with these two technologies, I can create a blogging platform on my portfolio to showcase my experiences more over, my life as a Software Engineer through my blogs.



1. Creating a Supabase Project. 

If you don’t have a Supabase Project yet, you are missing out pretty much everything this BaaS platform can offer. Creating a Supabase Project is super easy, you just have to name your project, create a database password, set the region of this project, and viola!. You have now created your Supabase Project.





2. Integration of Supabase to a Next.js application

You can integrate Supabase in different technologies, as they offer tutorials to their supported tech stacks, but in this blog I will use Next.js, because if you may know this portfolio is built on Next.js although not the latest version yet. I recommend that you create a project first on your local machine before having a live project to avoid latencies when developing locally.



Connecting is easy to manage since Supabase provides enough instructions on how to connect the project with the application on different technologies.



3. Setting up Supabase Client

Creating a reusable Supabase Client to easily communicate with your Supabase Project. For complete reference, please read this article by Supabase on how to create clients for server environments and browser environments. 



4. Using Prisma as ORM for Supabase Database

Object Relational Mapping (ORM) makes it easy to communicate with the database because it implements strict typing for every data that we send to our database. In this project, I used Prisma since it has a good documentation on integrating Supabase as the datasource. Using Prisma also makes the database organized since it supports migrations, so that the database is in sync with the schema created using Prisma.



Implementing Prisma as ORM simply needs the Supavisor Session pooler string from Supabase and adding it on the schema configuration:

Assign the connection string for Supavisor Transaction Mode (using port 6543) to the DATABASE_URL variable in your .env file. Make sure to append "pgbouncer=true" to the end of the string to work with Supavisor.





This will be the schema of our blog whenever we create a new one from the blogging platform.



5. Configuring Supabase RLS Policy

Before we can create blogs on the database of Supabase, we need to setup the tables and create RLS policies.

Since I am the only user of this platform, I don't have to include the userId on the using statement. I just need to have the user to be authenticated.



Aside from the table itself, bucket or storage needs to be also ready since I am gonna need images or others resources for the contents of my blogs.



6. Yoopta Editor Initialization



Yoopta Editor is effortless to integrate, you just have to pass the need plugin configuration as props to the main component and it will be ready to use.



Yoopta plugin image configuration should also be connected to the Supabase Storage that I made earlier, this is my config for uploading and removing certain image to my Supabase Storage



7. Fetching from Supabase using Prisma

On fetching, what I did was to use Next.js server actions to fetch the data on the server because it helps the performance of my components since it is server rendered.



Including await connection() is essential receive the updates of blogs, because if this is omitted, the component will still be statically server rendered but I need it to be dynamically rendered.



After all these steps, the blogging feature of my portfolio is now working at hand. All I just is Yoopta Editor, Prisma, and Supabase for these platform to work and viola!



Written by, Lois Floro (Frontend Developer)