Building P7 with Codex

When I say we... Codex and I.

Patch 7 (P7) began as a Figma-led idea for a quiet, sandbox-style project journal: somewhere to explore ideas, document things I am building, and further develop my knowledge of web development/AI agents. We built it as a Next.js site using vanilla CSS rather than a utility framework, deliberately keeping more of the underlying styling visible (personal preference). The public site is intentionally simple: a blog index, individual posts, an About page, a Projects section, and a small navigation system.

Once my partner had got their act together, things were remarkably easy! Vide coding at its best.

You’re right—I built a generic site instead of implementing your template. That was my mistake.

Posts are stored as Markdown files with frontmatter for titles, dates, excerpts, tags, draft status and other metadata. That means the content is not locked inside a conventional CMS or database. The files themselves remain readable, portable and version-controlled, while tags allow the same content to be organised in different ways. A normal post can appear in the main feed, while anything tagged as a project can also surface through the Projects section. Longer term, individual projects can have their own feeds or point towards separate applications running on Patch 7 subdomains.

The writing workflow was the more interesting part. Instead of editing Markdown manually, we added a private Tiptap editor. It lets me write and format posts, add images, save drafts, publish updates and delete posts from the browser. Behind the scenes, the editor converts the content back into Markdown, sends it through a protected server route, and uses the GitHub API to commit the resulting files to the repository. Git therefore doubles as both the source of the application and a simple version-controlled content store.

This creates a useful publishing pipeline. I can write in a familiar WYSIWYG editor without needing to think about Markdown syntax, while the underlying website still consists of relatively simple files:

Tiptap → Markdown → GitHub → Vercel → Patch 7

There were a few useful problems to solve along the way. Initially, GitHub only contained the posts and uploaded images created by the editor rather than the full Next.js application. Vercel therefore could not detect a Next.js project. We fixed that by adding the complete source code to the repository while preserving the existing content folders. That also helped clarify the role of Git: local development happens on my machine, changes are committed and pushed to GitHub, and Vercel treats the GitHub repository as the source from which the public site is built.

That distinction became particularly important with publishing. A post created through Tiptap does not modify the copy of the project sitting on my laptop. It is written to GitHub. Vercel sees the new commit, starts a deployment and the new version becomes the public website. My local repository can subsequently pull those changes back down from GitHub when I want to continue development. Understanding the difference between the local repository, remote GitHub repository and deployed application was probably one of the more useful lessons from the build.

We also added PostHog for analytics, initially tracking public page views, individual post views and visits to the Projects page. The main configuration lesson there was making sure the PostHog region matched the project's host and restarting the local development server after adding the public environment key. Sensitive credentials are kept separately as server-side environment variables rather than being committed to the repository.

The final step was connecting Patch 7 to its own domain. I bought the domain through GoDaddy but kept the application hosted on Vercel, so there was no need to buy separate web hosting. I added the domain to the Patch 7 project in Vercel, which provided the DNS configuration needed to point the domain towards the deployed application.

The DNS itself remained managed through GoDaddy. The existing root (@) A record was updated to the value supplied by Vercel, with the www record configured separately so both versions of the address resolve correctly. This helped make the distinction between the different parts of the setup clearer: GoDaddy owns and manages the domain, DNS tells browsers where to find the site, and Vercel actually hosts and serves the Next.js application.

The result is deliberately not a sophisticated CMS. It is a small publishing system built from relatively understandable pieces: Markdown for content, GitHub for storage and version history, Tiptap for writing, Next.js for the application, Vercel for deployment and PostHog for analytics. The aim is to keep Patch 7 simple enough that I can understand and modify it myself, while leaving enough structure for it to grow alongside the projects documented on it.

Project summary:

PATCH 7

Figma design
      ↓
HTML / React components
      +
Vanilla CSS
      ↓
Markdown content ← Tiptap editor
      ↓                 ↓
Blog              GitHub API
      ↓                 ↓
Projects           GitHub repo

+ About
+ PostHog
+ Project subdomains

Time: < 3hrs.

Ease: Very easy with Codex.