Back to Articles
Backend

Building a Headless CMS with Notion API and Angular

August 3, 20265 min read

The Problem with Traditional CMS

When building my portfolio, I wanted a dedicated blog section. The traditional approach would be to spin up a MongoDB instance, write CRUD endpoints in Node.js, and build a custom admin dashboard just to write articles. But that felt like over-engineering for a personal blog.

The Notion API Solution

Instead of building an admin panel from scratch, I realized I already spend half my day organizing my life and projects in Notion. Why not use it as a database?

By leveraging the official @notionhq/client in a Node.js serverless environment (Vercel API routes), I created a secure backend that fetches rows from a Notion database.

How It Works:

  1. The Backend: A Vercel serverless function queries the Notion Data Source, filters for "Published" status, and securely manages the NOTION_TOKEN away from the client.
  2. The Frontend: My Angular application calls this API. Using modern Angular features like Signals and @for control flow, the data is rendered into a clean, responsive Tailwind CSS grid.
  3. The Content: When a user clicks a post, the Notion blocks are parsed and converted to Markdown using notion-to-md, which Angular then renders beautifully.

It’s fast, free, and means I can write new blog posts directly from the Notion app on my phone. Development should be about working smarter, not harder!

Thanks for reading. Browse more articles →