How I Made This Digital Garden

I’ve always wanted a space that sits between a blog and a notebook. Somewhere to share what I’m learning, building, experiments, thoughts, random notes, etc — without the pressure of writing polished, “finished” articles. My thoughts usually stay locked in Notion pages, scattered across projects nobody else sees, including myself.

I found the concept “Digital Garden”. A digital garden is basically a public collection of ideas at different stages of growth. Not everything needs to be finished. Some posts are seeds, some are fully grown. That’s the whole point.

So I decided to build this with this mindset.

Why I Didn’t Use a Template

I could’ve used WordPress. Or Medium. Or any other solution out there, but I always wanted to control every pixel. And as someone trying to learn to code with AI tools, I wanted to actually build something from 0 — not just customize a theme.

So I went with Next.js, Notion as my CMS, and Vercel for hosting. The whole thing is custom, no templates nor drag-and-drop builders.

The Stack

• Notion API — I already write everything in Notion, so I decided to use this as the starting poing. This was the decision that made the whole project click.
• Vercel — The hosting part. You push your code to GitHub and it just deploys. You don’t need to configure a server or upload manually your files to a hosting.
• Plain CSS — I didn’t use Tailwind. Just CSS is OK for me because when I run out of tokens I can code it myself and is easier for my level.
• Next.js 16 — Next.js is built for Vercel. I write the code, Next.js builds the app, and Vercel deploys it to the internet.

Connecting to Notion

This part is surprisingly simple. You need three things:

1. A Notion integration (you create it at notion.so/my-integrations)
2. A database in Notion with your posts
3. The @notionhq/client npm package

My Notion Database

The cool part of this is that I can have 50 drafts in Notion and only the ones marked Published show up on the site. Zero friction between writing and publishing.

If I need more variations or complex logic with the published content, I can create new properties and build new features on top of that in the future.

The Design

Two views.

Home — A clean and minimal table with dates and titles. Tag filtering on the side. Pinned posts at the top. No images, no previews, no cards. Just a list. I wanted it to feel like a directory.

Article — Content rendered from Notion with similar CSS styles but with some tweaks that make sense with the rest of the site.

I kept it minimal on purpose. The goal of this project is not the product itself but to show part of my thoughts, experiments and ideas in public and force me to shape them and explain them.

What Building This Taught Me

The most valuable lesson is that I designed this entirely without Figma. Without mockups, or prototypes — just the idea in my head and some style constrains based on the rest of the portfolio. Claude Code is really good for sculpting it in real time. It is so easy to make something, break it, iterate, fix it till you create something good in a very short time.

That said, I don’t think this scales to everything. For complex products Figma still wins. In my opinion you need the full picture before building. You need to explore variations, get feedback on multiple directions, iterate cheaply on pixels instead of burning tokens on back-and-forth tweaks in code.

If you are working in something like an experiment or an MVP for a user test, I think you just can build it this way. In the other hand, if you are working on a feature affecting thousands of users, or something that highly affects business, or a huge product with a lot of stakeholders, I think is better to design it first. And when I talk about designing im not only talking about designing screens from 0 in Figma. Im talking about thinking, exploring, collecting data, testing different options, discussing options in meetings, etc.

I think this design part of the process will never disappear, it can be faster with the new tools, but you always need to stop to think before building something good. In addition, at least by now, figma is way more cheaper for those things than hundreds of token-heavy iterations that might not even ship.

What’s Next

This garden is just a seed. I want to add more features but I would like to implement them only when I find the need in the process.

March 2026 — New Features

A few updates shipped since the first version:

• Image preview on hover — Posts can now have an image attached directly in Notion (Files & media property). On desktop, hovering a post with an image shows a floating preview that follows your cursor around the screen.
• Scroll-aware sidebar on mobile — The filter panel auto-hides when you scroll down and reappears when you scroll up, so it never gets in the way while reading.

If you want to build something similar: Next.js + Notion API + Vercel. It’s simpler than you think. And it’s a good project for learning how to use these new tools.