How we built a 400+ pattern library with $0 monthly spend (and saved a Super.so license)
Hi PH Community! đź‘‹
With the launch of PATTTTERNS v2.1, I wanted to share a behind-the-scenes look at the tech stack. As a solo maker and Design Ops Lead, my goal was to build something highly scalable but with zero monthly overhead.
We managed to hit 13,000+ users on the beta while keeping our infrastructure costs at $0/mo. Here is how we did it:
1. Notion as the Headless CMS đź§
Instead of building a complex custom backend, we use Notion as our primary database.
Why: It’s the ultimate tool for curation. Organizing 400+ UI patterns with tags, categories, and technical metadata is as simple as dragging a row.
The Win: It’s 100% free and allows for instant content updates without touching the code.
2. The Parser: Next.js + react-notion-x ⚙️
The secret sauce is how we turn those Notion pages into a high-performance web app.
We use Next.js for the frontend to ensure lightning-fast SEO and performance.
We utilize react-notion-x as our parser. It’s the best-in-class wrapper to render Notion data into clean, customizable React components.3. Saving the $16/mo "Super.so" Tax 💸
Originally, we looked at tools like Super.so to turn Notion into a website. They are great products, but at $16/mo per site, the cost adds up quickly for a free community project.
By building our own parser layer with Next.js, we achieved:
Total Control: We could build the "My Library" local storage feature (v2.1) which wouldn't be possible on a standard no-code wrapper.
Zero Cost: Hosted on Vercel’s free tier, our only "bill" is the domain name.
Customization: We maintained our specific "Technical Aesthetic" without platform constraints.
The Result? A professional-grade library that serves thousands of designers daily, running on a $0 stack.
I’d love to hear from other makers: What’s your favorite "hack" for keeping your side-project costs at zero? Any questions on the Notion + Next.js implementation?
I'm happy to dive into the technical details! 👇
Replies