I hit Notion's paywall, so I built my own note app: BH Notes

Bulus Hamnu — Mon, 12 Oct 2026 08:29:24 +0000

Back in 2022, I started using Notion and loved it.

I loved the flexibility of nesting pages inside other pages. It did not feel like opening an old school word document just to write down an idea. It felt like a clean personal space where I could organize my thoughts and projects.

Then I hit the limits on the free plan.

When the paywall came up asking for hundreds of dollars a year, I could not justify it. For a developer living in Nigeria, paying that much every single year just to take notes was simply too expensive.

So I decided to build my own solution: BH Notes.

What I built

I did not want a bloated clone with a thousand buttons nobody uses. I wanted the fast, clean parts of Notion that actually matter for daily thinking.

Here is what is inside:

Nested pages: Put pages inside other pages, as deep as you need.
Block editor: Paragraphs, headings, code blocks, tables, to-do lists, and bullet points.
Images and files: Drag and drop images and files straight into any note.
Sharing and live collaboration: Invite someone by email to collaborate on a note, or publish a note to the web with a public link.
Zero AI bloat: No unwanted AI popups or autocomplete distracting you while you type. Just your thoughts.
Full data export: You can back up your whole workspace into a neat Markdown ZIP folder whenever you want. Your notes belong to you.

The technical side

Building a block-based editor from scratch taught me a lot:

Uncontrolled block editing: To keep typing snappy with zero input lag, text blocks stay uncontrolled in the DOM while dirty blocks autosave in the background with local drafts for offline safety.
Structured data: Pages and blocks are stored separately so notes can be searched, backlinked, and organized without saving one massive HTML blob.
Security and privacy: File attachments live in private storage with short lived signed links. Public pages are served through strict database security functions so private drafts stay completely protected.

It is live today

I just launched BH Notes, and you can try it for free:

👉 BH Notes

As developers, what is the one thing you look for most in a note taking tool: speed, organization, or privacy? Drop your thoughts in the comments below, I would love to hear your feedback!

I thought I was just improving my portfolio.

Bulus Hamnu — Fri, 07 Aug 2026 21:08:47 +0000

Sometimes the best learning happens when you're trying to solve a completely different problem.

A few weeks ago, I decided to redesign my portfolio. At first, it seemed like a simple project. I wanted to improve the design, add a Services section, and make it better represent the kind of software engineer I'm becoming.

Then I thought, "Why not improve the SEO while I'm here?" I expected to spend an hour adding a few meta tags. Instead, I ended up learning much more than I expected.

It started with the basics

I began reading about how search engines understand websites and quickly came across concepts like Meta tags, Open Graph, Twitter Cards, Structured Data (JSON-LD), Canonical URLs, robots.txt, and sitemap.xml. None of these were things I had learned while learning React.

As I added them one by one, I felt like my portfolio was finally becoming something that search engines and social media platforms could understand, not just browsers.

Then I noticed another problem. Social previews weren't working

When I shared my portfolio link on social media, the preview wasn't what I expected. Sometimes it didn't update. Sometimes the image didn't appear. Sometimes the title was wrong. That sent me down another rabbit hole.

React Helmet

While trying to fix the problem, I discovered React Helmet. It allows React applications to update the contents of the document , making it possible to set page titles and meta tags dynamically.

At first, I thought this solved everything. Then I learned it wasn't that simple.

The problem wasn't React Helmet itself. The problem was that my portfolio is a Single Page Application (SPA).

Like most React applications, the browser first loads a single HTML file, then JavaScript builds the rest of the page. Browsers have no problem with this, but I discovered that not every crawler behaves like a browser.

Some search engines and social media platforms don't execute JavaScript the same way, or don't wait for it to finish before reading the page. That means they might never see the meta tags generated by React Helmet, even though everything looked perfectly fine in my browser.

That was probably the biggest thing I learned during this whole process.

Looking for solutions

After realizing the problem wasn't React Helmet, I started looking into different ways people solve this. That's when I came across Pre-rendering, Static Site Generation (SSG), and Server-Side Rendering (SSR).

I even tried finding a pre-rendering solution that would work with my Vite project, but I quickly realized it wasn't as straightforward as I expected. Some solutions were no longer actively maintained, while others just weren't the right fit for my project.

While reading more about these approaches, I finally understood why frameworks like Next.js exist.

Before this, I honestly thought Next.js was just React with extra features. Now I understand that one of its biggest advantages is generating HTML before it reaches the browser, making SEO and social media previews much more reliable.

What I learned

I didn't set out to learn about SEO. I just wanted a better portfolio.

Instead, I ended up learning how search engines discover websites, how social media platforms generate previews, why Single Page Applications have SEO limitations, and why technologies like SSR and SSG exist.

That's one of the things I enjoy most about software engineering. You start solving one problem, and before you know it, you've learned five other things you weren't even looking for.

Looking back, improving my portfolio taught me far more than just SEO. It completely changed the way I think about how modern web applications work behind the scenes, and that's a lesson I'll carry into every project I build from now on.

of my portfolio with SEO metadata such as Open Graph, Twitter Cards, and meta tags." width="800" height="406">