DemoBuy

Getting Started with Full-Stack Blog CMS Kit

Last updated on 2026-09-03

The Full-Stack Blog CMS Kit is a production-ready Next.js blog platform wired to a real Supabase backend. It includes 29 routes covering a public blog with comments, an admin CMS with post editor and media library, and authentication -- all reading from and writing to a Supabase database with 11 tables.

What's Included

  • 29 routes -- public blog, admin CMS, and auth pages
  • 11 database tables -- with migrations, row-level security, triggers, and seed data
  • Supabase Auth -- email/password, Google OAuth, and GitHub OAuth
  • Public comments -- visitors submit comments without creating an account; editors moderate with approve/reject/spam
  • Newsletter signup -- public subscription form writes to the subscribers table via Server Actions
  • Multi-author roles -- admin, editor, and author roles enforced at the database level via RLS policies
  • Server Actions -- secure mutations for all CRUD operations across 10 action files
  • Light & dark mode -- oklch design tokens with automatic theme switching
  • WCAG AA -- accessible across every screen

How It's Different from the Frontend-Only Kit

Aspect Frontend-Only Kit Full-Stack Kit (this)
Routes 25 29
Data source data/seed.ts (hardcoded) Supabase database
Auth Mock login form Supabase Auth with OAuth and password reset
Comments Static comment cards Public submission with pending/approved/rejected moderation
Newsletter UI-only form Writes to subscribers table via Server Actions
Post management Seed data arrays lost on refresh Full CRUD with draft/published/scheduled workflow persisted in Supabase
Media library Static image grid Upload to Supabase Storage with alt text and role-based permissions
Analytics Static chart data Aggregate Supabase queries from pageview_daily table
Author roles Single mock user Admin, editor, and author roles with RLS
View counting None RPC function incrementing on each page visit

Prerequisites

  • Node.js 18.17 or later
  • pnpm (recommended) or npm
  • Supabase account -- free at supabase.com
  • A code editor -- VS Code recommended

No Stripe account is needed. This kit does not include payment processing.

Quick Start

# 1. Clone the repository (use the URL from your purchase email)
git clone <your-repo-url> blog-fullstack
cd blog-fullstack

# 2. Install dependencies
pnpm install

# 3. Copy environment variables
cp .env.example .env.local

# 4. Fill in your Supabase keys in .env.local

# 5. Run the Supabase migrations (see Installation guide)

# 6. Start the dev server
pnpm dev

Open http://localhost:3000 to see the blog homepage.

Kit Overview

Area Routes Key Features
Public Blog 11 Home feed, article with view counting, categories, category detail, tag detail, author profile, search, about, newsletter archive, RSS, sitemap
Admin CMS 14 Dashboard, posts list, new post, edit post, analytics, comments moderation, authors, tags, categories, media library, subscribers, scheduled posts, settings
Auth 4 Login, register, forgot password, OAuth callback

Tech Stack

Technology Purpose
Next.js 16 React framework with App Router
React 19 UI library
Tailwind CSS v4 Utility-first styling with oklch tokens
shadcn/ui Component primitives
Supabase Database, auth, storage, and real-time
@supabase/ssr Server-side Supabase client with cookies
Recharts Dashboard and analytics charts
Novel Rich text post editor
date-fns Date formatting and utilities
next-themes Dark mode support
sonner Toast notifications

Next Steps

Next

Installation