Blog Studio

Why I Built Blog Studio

Adding a blog to a website sounds simple until you actually have to build one.

For many client projects and portfolio websites, the frontend may already be finished, but adding a manageable blog introduces an entirely new set of requirements: a database, authentication, an admin dashboard, a rich-text editor, image uploads, publishing workflows, user permissions, and APIs for delivering the content.

I found that much of this work gets repeated from project to project. So I built Blog Studio as a reusable solution.

Blog Studio is an open-source headless CMS that provides the publishing infrastructure separately from the website consuming the content. Instead of rebuilding a CMS for every project, I can deploy Blog Studio and connect a frontend to its API.

A Headless Approach

The main idea behind Blog Studio is simple:

The CMS manages the content. Your frontend decides how that content looks.

Blog Studio provides public APIs for listing published articles and retrieving individual articles by their slug. The API returns structured JSON along with the formatted TipTap HTML content.

This allows a frontend to consume content directly:

const response = await fetch(
  "https://your-blog-studio.com/api/blog"
);

const data = await response.json();

The CMS is not tied to a particular frontend design. It can serve content to applications built with Next.js, React, Vue, Svelte, or other clients that can consume an HTTP API.

Building the Editorial Experience

I didn't want Blog Studio to be just a database with a few CRUD endpoints. I wanted the content-management experience to feel like a real publishing product.

I used TipTap 3 to build the article editor. It supports headings, text formatting, lists, links, blockquotes, code blocks, dividers, and inline images. It also provides live word counts, character counts, and estimated reading time while writing.

Images uploaded through the editor are stored in Supabase Storage. Blog Studio also handles cleanup when media is replaced or an article is deleted, helping prevent unused media from accumulating.

Authentication and Role-Based Access

Because the platform can be used by a team, I implemented role-based access control.

Admin users have full access to content and team management, while Manager users have editorial access for creating, editing, and publishing articles without access to team-management functionality.

Authentication uses HTTP-only JWT sessions with bcrypt password hashing.

Authorization is also enforced at the API level rather than relying only on hiding UI elements. Admins and Managers can create and update posts, while deleting posts and managing users are restricted to Admins.

Making Deployment Simple

Another goal was to make setup straightforward.

Blog Studio uses Supabase PostgreSQL for structured data and Supabase Storage for media. The project includes its database schema and an automated setup script that provisions the required tables, indexes, triggers, and storage bucket.

For production, the application can be deployed to Vercel and configured through environment variables. When a DATABASE_URL is supplied, the deployment can also run the database setup during the build process.

After deployment, the initial setup flow creates the primary administrator account, allowing the editorial team to sign in and start publishing.

Technology Stack

Blog Studio is built with:

• Next.js 16 — App Router, Server Components, and Route Handlers
• TypeScript — Fully typed application code
• Supabase PostgreSQL — Database
• Supabase Storage — Blog image and media storage
• TipTap 3 — Rich-text editor
• Tailwind CSS v4 — UI and responsive styling
• JWT + bcrypt — Authentication and secure password handling

The combination gives the project a modern full-stack foundation while keeping the architecture relatively simple.

What I Learned

Blog Studio became more than a CRUD application. Building it required thinking about the boundaries between a CMS and the applications consuming its content.

One of the most valuable parts of the project was designing the system so that content management and content presentation remain independent.

Blog Studio handles the editorial workflow, authentication, storage, permissions, and publishing APIs. The consuming application remains responsible for its own design and user experience.

That separation makes the platform reusable instead of tying it to a single website.

Open Source

Blog Studio is open source and available under the MIT License, allowing developers to study the codebase, customize it, self-host it, and use it as the publishing backend for their own projects.

GitHub: Blog Studio Repository