Karthikeyan’s
Space

Portfolio

 

🚀 Using Notion Database as a Backend for My Portfolio

Notion has always been my go-to app for note-taking 📝, and its database, table view, and board view have been game-changers for tracking and managing my notes. While building my portfolio, I thought: Why not use Notion’s table database as a backend?
Here’s how I made it work (and you can too):
 

Retrieving Notion Table Database :

Step 1: 🔑 Get API Access

1️⃣ Head to the Notion Developer Portal and generate your API Key.
2️⃣ Go to your Notion table’s page, navigate to Connections, and allow access to your project.

Step 2: 🛠️ API Testing

Use Postman’s Notion API Workspace to test your API calls. This helped me explore how to fetch and manipulate data from Notion.

Step 3: 📦 Using the Notion SDK

I integrated the official Notion SDK into my project for seamless API requests. Pro tip:
  • Use server-to-server API calls to avoid CORS issues.
  • Transform the server response into UI-friendly data for rendering on the client side.

✨ Rendering Notion Pages as JSX Components :

I discovered the amazing react-notion-x library (unofficial). This library allows rendering private Notion pages as fully interactive JSX components. Here's what I did:
1️⃣ Get authentication tokens:
  • Open DevTools → Application → Cookies → Copy token_v2 and notion_user_id.
  • Use these values as authToken and activeUser.
2️⃣ Fetch and render data:
  • Use the library’s notion.getPage(pageId) function to retrieve the page’s recordMap.
  • Pass the recordMap as a prop to the <NotionRenderer /> component:
  • Customize it with several available properties.

Why I Loved This Setup ❤️

Every table entry in Notion is an individual page where I can write notes, add embeds, images, code snippets, and more. Using the Notion API, I fetched table contents, retrieved page IDs, and rendered the pages beautifully in my React/Next.js application.
Now my portfolio backend is powered by Notion, blending functionality with creativity! 💡