Building a 17-page admin panel so non-developers can edit everything

Hey Indie Hackers.

Two days ago I launched Nexus — my Next.js 16 starter kit. Today I want to dive deep into the hardest part I built: the 17-page admin panel.

The problem
Every time a client asks you to change one word on the pricing page, you:

Open your IDE
Find the file
Make the edit
Push to GitHub
Wait for CI/CD
Hope nothing breaks
That's 20 minutes for a one-word change. Multiply by 50 edits = 16 hours wasted.

The solution: 17 admin pages
Here's every page I built and what it does:

Dashboard — KPIs, charts, reviews feed, crash stats
Screenshots — CRUD with image upload + magic-bytes validation
Features — manage feature cards (icon, title, description)
How It Works — 3-step section editor
Reviews — ratings, platform, optional replies
Pricing — 3 tiers with monthly/yearly toggle
Press & Awards — media logos + awards
Comparison — feature comparison table vs competitors
FAQ — searchable accordion
Footer — editable columns + social links
Theme — live colors, 5 fonts, radius (applies instantly!)
Blog — markdown editor with draft/publish
Messages — contact form inbox with delete
Audit Log — every admin action tracked with actor + JSON snapshot
Settings — app identity, store links, export/import
Account — change password (invalidates all sessions)
Login — secure sign-in with rate limiting
How edits flow to the live site
When an admin clicks "Save":

The form calls save(nextContent) from useStore()
An optimistic update fires — the local cache updates immediately
A CONTENT_EVENT is published via window.dispatchEvent
All components using useSyncExternalStore re-render
In parallel, a PUT /api/admin/content saves to the database
If the save fails, the optimistic update is reverted + toast error
The admin sees instant feedback. The live site updates without a reload.

Security I built in (not just a CRUD app)
JWT auth with httpOnly cookies (24h expiry)
bcrypt (cost 12) + session versioning
CSRF protection on every state-changing route
Rate limiting: 5 login attempts / 15 min per IP
Magic-bytes image upload (validates file signature, not just MIME)
Audit log: every create/update/delete recorded
Honeypot anti-spam on contact + newsletter forms
The two bugs I fixed
Bug 1: Tailwind CSS 4 was inlining the font variable into the utility class — fonts didn't switch after save. Fixed by moving --font-sans outside @theme inline + manual utilities.

Bug 2: generateThemeCss was targeting :root only, but next/font variables live on body. Fixed by targeting :root, body.

Full write-up here: https://hadikits.hashnode.dev/

Try it yourself
https://nexus-by-hadi-kits.vercel.app/admin

Click "Continue as demo admin" — no signup needed.Every visitor gets their own browser sandbox.

Full template
$89 (launch offer, instead of $149):

Up to 2 developer seats
Unlimited client projects
Lifetime updates
6 months support
Buy: https://www.getly.store/product/nexus-next-js-16-mobile-app-landing-starter-kit-with-admin-panel

—

Goal update: on track for 5 sales to fund a new dev machine. Thanks to everyone who tried the demo so far.

#buildinpublic #nextjs #adminpanel #saas