Chaotic Brain Studio — Product & Systems Architecture

CTX-01

Context

The goal was not simply publishing a blog, but creating one brand experience where content and runnable tools reinforce each other.

PRB-01

Problem

Evergreen SEO content, glossary entries, micro-tools and digital products had to coexist under one navigation and content model.

ROL-01

My role

Product system
Content architecture
Frontend and tool infrastructure

SOL-01

Solution

I built the Next.js content surface around a Markdown/frontmatter pipeline and attached interactive tools to the same site architecture.

BLD-01

What was built

Guide and glossary content architecture
Markdown / frontmatter content pipeline
Micro-tool surfaces such as Focus Timer and Dopamine Menu
Digital-product and content discovery structure
SEO-oriented content delivery

ARC-01

System architecture

Platform architecture

Next.js 16
React 19 / TypeScript
Markdown + frontmatter
Guides / Glossary / Tools
Supabase
Web delivery

STK-01

Technical stack

Frontend

Next.js 16 · React 19 · TypeScript 5 · Tailwind CSS 4

Backend / Data

Supabase

Content

Markdown · gray-matter

DEC-01

Important engineering decisions

Connect content and tools under one information architecture instead of separate sites
Keep the content source portable with Markdown/frontmatter

CODE-01

Code / architecture excerpts

Platform modulesTS

01const platform = {
02  framework: "Next.js",
03  content: "Markdown + Frontmatter",
04  database: "Supabase",
05  modules: ["Guides", "Glossary", "Micro Tools", "Digital Products"],
06};

OUT-01

Result / current state

Chaotic Brain Studio is live with content, glossary, digital products and micro-tools published under one product platform.

LRN-01

Engineering takeaways

On a content platform, tools are not just features; they are also part of distribution.
The brand scales more coherently when editorial and product systems share one design language.

OUT-LIVE / Visit product

Chaotic Brain Studio

Visit product