DemoBuy

Installation

Last updated on 2026-09-03

This guide walks you through setting up the Full-Stack Blog CMS Kit from scratch, including Supabase database configuration and optional OAuth setup.

System Requirements

  • Node.js 18.17 or later
  • pnpm (recommended), npm, or yarn
  • Git for cloning the repository

Step 1 -- Clone the Repository

Use the private repository URL from your purchase confirmation email:

git clone <your-repo-url> blog-fullstack
cd blog-fullstack

Step 2 -- Install Dependencies

pnpm install

Key Dependencies

Package Purpose
next 16.x React framework
react 19.x UI library
tailwindcss 4.x CSS framework with oklch tokens
@supabase/supabase-js Supabase client
@supabase/ssr Server-side Supabase with cookies
recharts Dashboard and analytics charts
novel Rich text post editor
date-fns Date formatting
zod Form validation

Step 3 -- Create a Supabase Project

  1. Go to supabase.com and create a new project
  2. Wait for the project to finish provisioning
  3. Go to Settings > API and copy:
    • Project URL (e.g., https://xxxxxxxxxxx.supabase.co)
    • anon public key (safe for client-side)
    • service_role key (server-side only, never expose to client)

Step 4 -- Configure Environment Variables

Copy the example file:

cp .env.example .env.local

Fill in your keys:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# App
NEXT_PUBLIC_SITE_URL=http://localhost:3000

No Stripe keys are needed. This kit does not include payment processing.

Step 5 -- Run Database Migrations

Go to your Supabase project's SQL Editor and run these migration files in order:

  1. supabase/migrations/001_schema.sql -- Creates all 11 tables (profiles, posts, categories, tags, post_tags, comments, media, subscribers, pageview_daily, settings, newsletter_issues)
  2. supabase/migrations/002_rls.sql -- Sets up row-level security policies with public read access for published content and role-based write access for admin, editor, and author roles
  3. supabase/migrations/003_triggers.sql -- Adds triggers for automatic profile creation on signup, updated_at timestamp updates, view count incrementing via RPC, and reading time calculation on post save
  4. supabase/migrations/004_storage.sql -- Creates the blog-assets storage bucket for post images, author avatars, and media library uploads with role-based permissions

Tip: You can also use the Supabase CLI: supabase db push if you have it set up locally.

Step 6 -- Load Seed Data

Run the seed file in the SQL Editor:

supabase/seed.sql -- Inserts 15 posts across draft/published/scheduled statuses, 5 author profiles, 6 categories, 18 tags with post associations, 20 comments with pending/approved/rejected statuses, 18 newsletter subscribers, and 30 days of pageview data.

This gives you realistic data to work with immediately across the public blog, admin CMS, and analytics dashboard.

Step 7 -- Configure OAuth Providers (Optional)

For Google and GitHub social login:

Google OAuth

  1. Go to Google Cloud Console
  2. Create OAuth 2.0 credentials
  3. Set redirect URI: https://your-project.supabase.co/auth/v1/callback
  4. Add client ID and secret in Supabase Dashboard > Auth > Providers > Google

GitHub OAuth

  1. Go to GitHub Developer Settings
  2. Create a new OAuth App
  3. Set callback URL: https://your-project.supabase.co/auth/v1/callback
  4. Add client ID and secret in Supabase Dashboard > Auth > Providers > GitHub

Step 8 -- Start the Dev Server

pnpm dev

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

Step 9 -- Verify the Setup

Navigate through key pages to confirm everything is connected:

  • / -- Blog homepage with featured posts from Supabase
  • /posts/[slug] -- Article page with view count incrementing and comment submission
  • /admin -- Admin dashboard with stats from database aggregates
  • /login -- Sign in with email or OAuth
  • /admin/posts -- Posts list with draft/published/scheduled tabs
  • /admin/comments -- Comment moderation queue with approve/reject/spam actions

Available Scripts

Command Description
pnpm dev Start dev server
pnpm build Create production build
pnpm start Run production server
pnpm lint Run ESLint checks

Troubleshooting

Supabase connection errors:

Verify your .env.local has the correct NEXT_PUBLIC_SUPABASE_URL and keys. The anon key is safe for client-side use. The service role key should only be used in Server Actions and server-side code.

Empty dashboard or missing data:

Make sure you ran all four migration files and seed.sql in order. The seed data depends on the schema, RLS, and triggers being in place.

OAuth redirect errors:

Check that your OAuth callback URL in the provider settings matches your Supabase project URL exactly: https://your-project.supabase.co/auth/v1/callback.

Comments not appearing on public blog:

Only comments with approved status are shown publicly. Check the admin comments page to approve pending comments. The seed data includes comments in all three statuses.

Media uploads failing:

Confirm the SUPABASE_SERVICE_ROLE_KEY is set in .env.local. The storage bucket policies require an authenticated user with the correct role. Verify that 004_storage.sql was run successfully.

TypeScript errors after installation:

npx tsc --noEmit

Check that tsconfig.json path aliases match your project structure.

Previous

Getting Started

Next

Project Structure