ProjectsCase StudyInternal Tool2026

Case Study

ZN CMS

The private content desk behind zohaibnawaz.dev—Share Studio, Hire Forms, leads, manager RBAC, and draft approvals on a shared Supabase database.

Project detail

View Live GitHub

The private content desk behind zohaibnawaz.dev—Managers draft, Admins publish, and the live portfolio stays in sync on a shared Supabase database.

ZN CMS is an invite-only ops console for one personal portfolio: Share Studio pages, Hire Forms and applications, team roster, contact leads, manager RBAC, draft approvals, and realtime notifications—not a multi-tenant SaaS CRM.

Industry: Professional services · Portfolio operations
Category: Internal CMS · Ops console
Role: Full Stack Product Engineer — product, RBAC, content workflows, and monorepo architecture
Timeline: 2026 — ongoing
Status: Private production companion to zohaibnawaz.dev
Stack: Next.js · Turborepo · TypeScript · Tailwind · Supabase · RLS · Server Actions · Realtime

Executive Overview

ZN CMS is the staff-facing half of the personal brand system. Public hire and share URLs live on zohaibnawaz.dev; editors manage the same records from a private Dashboard so the live site never becomes the editing surface.

Access is invite-only. An Admin owns the workspace; Managers get viewer / editor / publisher presets with per-module caps. Sensitive edits go into draft_data until Admin approval—so public content is never half-published by accident.

Active modules cover Share pages, Hire forms and submissions, Team (approved applicants), Leads with a realtime inbox, Managers, Approvals, and Notifications. Projects and Media are scaffolded for later content sync.

Technically it is a Makerkit-lite Turborepo fork constrained to a single workspace: Next.js App Router, Server Actions, Supabase Auth + RLS + Realtime, and CSRF on mutating requests.

Business Problem

Existing workflow

Portfolio content, proposals, hire applications, and contact leads lived across the public site UI, Drive folders, email, and ad-hoc notes—with no clean draft → review → publish path for collaborators.

Pain points

Editing live portfolio content from the public site risks broken client-facing pages.
Collaborators need scoped access without becoming full owners.
Hire applications and contact leads arrive faster than a static inbox can handle.
Share pages and hire forms need drafts that do not overwrite what is already public.
A general multi-tenant SaaS shell is overkill for one brand site—and wrong for invite-only ops.

Why it matters

A personal practice that ships proposals and hiring flows needs the same discipline as a product team: clear roles, non-destructive review, and a live ops inbox—without opening a public CMS to the world.

Solution

ZN CMS keeps portfolio operations in one private desk that shares a database with the live site:

Shared Supabase backend
CMS and zohaibnawaz.dev read/write the same hire, share, leads, and profile tables—public URLs stay on the portfolio.
Manager RBAC
Invite-only Managers with viewer/editor/publisher presets and per-module view/add/edit/delete/publish caps.
Draft → Admin approval
Manager edits write draft_data; live blocks stay intact until Admin approve/reject.
Realtime ops
Leads inbox and notification bell update over Supabase Realtime as inquiries and reviews land.
Hire → Team pipeline
Structured hire submissions can be approved into the team roster instead of living in email forever.

One private console for share/hire/leads ops, safer collaborator access, and a live portfolio that only shows Admin-approved content.

Core Features

Share Studio — proposals & delivery

Create and manage client share pages with slug, description, visibility, expiry, and view counts.

NeedClients need one branded link—not a Drive folder dump.

ValueFaster reviews and stronger proposal presentation.

Content blocks

Compose pdf, link, note, file, and pricing blocks on a single share page.

NeedProposals and deliverables need different formats in one place.

ValueOne share URL covers the full package.

Draft → publish

Manager edits land in draft_data; Admin Approvals publish without overwriting live pages mid-edit.

NeedPublic /share/[slug] URLs on the portfolio must stay stable.

ValueSafe collaborator editing for client-facing links.

Hire & team

Hire forms

Job/application forms, submission inbox, rich applicant payloads and files.

NeedHiring needs structured intake and review.

ValueApplications stay inside the same system as the public apply link.

Apply → review

Candidates complete multi-step apply on zohaibnawaz.dev; staff triage in the CMS Hire inbox.

NeedPublic apply and private review should not share one UI.

ValueClean handoff from candidate to Admin/Manager.

Team roster

Approved hire submissions become team member profiles.

NeedAccepted applicants should not restart in another tool.

ValueShort path from application to internal roster.

Ops inbox

Leads

Contact-form leads with status pipeline new → contacted → qualified → won/lost; search and filters.

NeedInquiries need triage, not an unread email pile.

ValueClear follow-up state for serious conversations.

Realtime feed

Leads and notifications update live via Supabase Realtime.

NeedOps desks go stale if staff must refresh constantly.

ValueFaster response when a lead or review arrives.

Notifications

Per-user bell for lead events, hire submissions, content reviews, and manager permission changes.

NeedImportant events should surface without opening every module.

ValueLess missed work for Admin and Managers.

Access & governance

Managers

Admin invites/removes Managers; presets and per-module flags; optional delete and approval requirements.

NeedCollaborators need scoped power, not owner keys.

ValueSafe division of labor on a single brand site.

Approvals

Admin queue to approve/reject pending Share and Hire drafts without breaking live content.

NeedPublish must stay intentional.

ValueNon-destructive review before anything goes public.

Invite-only auth

Public signup disabled; Admin-driven invites with link fallback when email is rate-limited.

NeedThis is a private desk, not a self-serve SaaS.

ValueHard boundary against random account creation.

Shell & roadmap

Dashboard home

Module overview cards with share/hire/team/leads counts and pending reviews.

NeedStaff need a single morning view.

ValueFaster orientation before diving into a module.

Projects & Media (WIP)

Scaffolded Dashboard modules for future portfolio case-study and asset sync.

NeedREADME positions deeper content sync as the next layer.

ValueHonest roadmap without pretending those modules are finished.

User Journey

Manager → Draft share page

01
Admin invites Manager with Share editor access
02
Manager signs in to Dashboard
03
Creates or edits a share page
04
Changes land in draft_data
05
Admin reviews Approvals and publishes
06
Public portfolio URL serves the live version

Visitor → Hire submission

01
Candidate opens hire apply link on zohaibnawaz.dev
02
Completes multi-step form and uploads documents
03
Submission appears in CMS Hire inbox
04
Staff review; optional approve into Team
05
Notification alerts relevant users

Lead → Follow-up

01
Visitor sends a contact inquiry on the portfolio
02
Lead appears in CMS Leads over Realtime
03
Staff update status through contacted → qualified → won/lost
04
Notification keeps the team aligned

Technical Highlights

Single-workspace on a SaaS kit

Forked Makerkit lite / Turborepo, then constrained to one Admin workspace instead of multi-tenant orgs.

Business valueSerious kit ergonomics without shipping a public multi-tenant product.

Shared DB with the portfolio

CMS and zohaibnawaz.dev share Supabase tables for hire, share, leads, profiles, and notifications.

Business valueOne source of truth—public site and ops desk never drift.

Draft vs live publish

Manager writes go to draft_data; live columns stay public until Admin approve/reject.

Business valueCollaborators can work without risking broken client pages.

Capability matrix

Module flags × preset × canDelete / requiresApproval, enforced in Server Actions via assertCapability.

Business valuePermissions match real ops roles instead of a blunt admin toggle.

Realtime ops surfaces

Leads inbox and notification feed subscribe to Supabase Realtime.

Business valueStaff see new work as it lands.

Security hygiene

RLS everywhere, service role server-only, CSRF on mutations, signup blocked, secret-rotation notes in README.

Business valuePrivate ops data stays behind the same discipline as a public product.

Challenges & Solutions

Challenge	Solution
Needed collaborator editing without letting Managers overwrite live portfolio content.	Draft_data workflow with an Admin Approvals queue before publish.
A full multi-tenant SaaS kit did not match a single personal brand workspace.	Constrain the fork to one workspace owner and invite-only Managers.
Public hire/share URLs and private ops needed to stay in sync.	Shared Supabase schema—portfolio serves public pages; CMS owns staff workflows.
Leads and reviews arrive asynchronously and get missed in email.	Realtime leads inbox plus typed in-app notifications.
Marketing copy listed Projects/Media before those modules were real.	Ship Share/Hire/Leads/Managers first; keep Projects/Media as explicit WIP scaffolds.

Tech Stack

Monorepo: Turborepo, pnpm workspaces, Makerkit-lite packages
Frontend: Next.js 15 App Router, React 19, Tailwind CSS 4, Shadcn/Radix (@kit/ui), TanStack Table/Query
Backend: Server Components + Server Actions (@kit/next enhanceAction)
Database: Supabase Postgres with Row Level Security
Auth: Supabase Auth — invite-only; MFA verify route; Turnstile hooks
Realtime: Supabase Realtime — leads inbox and notifications
Forms: react-hook-form, Zod
Security: CSRF (@edge-csrf/nextjs), JWT claims in middleware, service role server-only
Testing / CI: Playwright e2e, ESLint, Prettier, GitHub Actions

Project Gallery

Recommended capture order for the case-study gallery.

01Dashboard home — module overview (light)
02Dashboard home — module overview (dark)
03Share Studio — page list
04Share Studio — editor with pdf / pricing / note blocks
05Share Studio — public vs private visibility
06Approvals — pending Share draft review
07Hire — forms list and submission inbox
08Team — approved roster
09Leads — realtime inbox and status pipeline
10Managers — invite and capability presets
11Notifications — bell feed
12Settings — profile / account

Key Learnings

Product

For a personal brand, the CMS should be a private companion—not a second public product. Positioning “built for one site” prevents the wrong expectations.

Engineering

Draft vs live is the unlock for collaborator workflows on content that already has public URLs.

Architecture

Sharing one Supabase project between portfolio and CMS beats syncing two databases—if RLS and capability checks stay strict.

Process

Ship the modules that already have public surfaces (Share, Hire, Leads) before scaffolding aspirational ones (Projects, Media).

Future Improvements

Priority	Improvement	Business value
High	Projects module wired to portfolio case-study content	Edit work entries in CMS without touching the site repo for every change.
High	Media library with Storage-backed assets for share/hire and future projects	One place to manage images used across the brand system.
Medium	Richer lead activity timeline and email/reply hooks	Faster follow-up without a separate CRM.
Medium	Audit log for publish/approve/reject and manager permission changes	Clearer accountability on a multi-manager desk.
Low	Deeper analytics on share-page views inside the CMS	Better timing on proposal follow-ups.

Need a private ops desk behind a public brand site?

ZN CMS is a case study in invite-only RBAC, draft approval, and a shared Supabase backend with a live portfolio—not a multi-tenant CMS for everyone. If you want the same clarity for your product or practice, start a conversation.

Start a conversation

Optional technical notes

How the CMS and portfolio stay one system without becoming a public SaaS.

Two surfaces, one database

zohaibnawaz.dev is the public brand showcase (and serves noindex recipient URLs like /share/[slug] and /hire/[job]). ZN CMS is Share Studio and Hire ops—create, draft, approve, and triage—plus leads, managers, and notifications.

Both talk to the same Supabase project so share pages, hire submissions, and contact leads never need a sync job. The portfolio case study stays about craft; this CMS case study owns the signed-in delivery workflow.

RBAC without multi-tenancy

The Makerkit lineage includes multi-tenant patterns; this product deliberately collapses to one workspace owner. Managers are collaborators with presets, not org owners of their own tenants.

assertCapability on Server Actions plus RLS keeps the capability matrix honest even if a UI path is wrong.

What ships vs what is scaffolded

Share, Hire, Team, Leads, Managers, Approvals, and Notifications are the live story. Projects and Media exist as Dashboard shells for future portfolio content sync—and should be framed that way in any public case study.

Role

Full Stack Product Engineer

Client

Personal brand ops / internal CMS

Date

2026

Collaborators

Solo build

Next Project

Zohaib Nawaz Dev

View next