Reader mode
TEST 2 Chapter 1
1,504 words
Good — this is exactly the level you should be operating at. You’re not just asking for “content”… you’re building a **full system Codex can generate into a working product**.
I’ve taken your structure (from your uploaded spec ) and expanded it into a **complete Codex-ready product document** including:
* Public blog (SEO engine) * Admin dashboard (control center) * Settings (verification codes, SEO, etc.) * Analytics + monetization hooks
---
# 📄 CODEX GENERATION DOCUMENT
*(Paste this into Codex to generate your full website)*
---
## 🧠 PROJECT OVERVIEW
Build a **modern, SEO-optimized healthcare blog platform** called:
> **Kenza Health Hub**
This platform must include:
1. Public-facing blog (SEO + content) 2. Admin dashboard (secure login) 3. CMS (create/edit posts) 4. Settings system (meta tags, verification codes, SEO configs) 5. Analytics dashboard 6. Conversion system (CTA → KenzaMedLink)
---
## ⚙️ TECH STACK
* Framework: **Next.js (App Router)** * Styling: Tailwind CSS * Database: PostgreSQL or Supabase * Auth: JWT / Supabase Auth * Hosting: Vercel * CMS: Custom (admin panel)
---
## 🧱 FOLDER STRUCTURE
``` /app /(public) page.tsx (Homepage) /blog page.tsx (All posts) /[slug] page.tsx (Single post) /category/[slug] /search /about /contact
/(admin) /login /dashboard /posts /posts/new /posts/edit/[id] /categories /settings /analytics
/components /lib /utils /hooks /styles ```
---
## 🌐 PUBLIC WEBSITE FEATURES
### 🏠 Homepage
* Hero section:
* Title: *“A complete clinic in your pocket — Learn, Treat, Stay Safe”* * Search bar (real-time) * Featured posts * Categories grid * Latest posts * CTA banner:
* “Consult a doctor” * “Chat on WhatsApp”
---
### 📄 Blog Post Page
Each post must include:
* Title (SEO optimized) * Slug (auto-generated) * Author * Published date * Read time * Featured image * Table of contents (auto from headings) * Content (rich text / markdown) * Internal links * CTA blocks:
* Top * Middle * Bottom
---
### 📂 Categories
* Telemedicine * Diseases * Medications * Symptoms * Women’s Health * Men’s Health * Child Health * Mental Health * When to See a Doctor
---
### 🔎 Search
* Full-text search * Filter by category
---
## 🔐 ADMIN PANEL (VERY IMPORTANT)
This is where your product becomes powerful.
---
### 🔑 Admin Authentication
* Email + password login * Protected routes * Session management
---
### 📊 Dashboard
Show:
* Total posts * Total views * Top posts * Traffic trend (chart) * Conversion clicks (CTA clicks)
---
### 📝 Post Management
Admin can:
* Create post * Edit post * Delete post * Upload featured image * Add SEO meta:
* title * description * keywords
---
### 📂 Category Management
* Create/edit/delete categories
---
## ⚙️ SETTINGS PANEL (CRITICAL — YOU MENTIONED THIS)
This must exist.
Admin should be able to:
### 🔐 1. Verification Codes (Header Injection)
Fields:
* Google Search Console verification * Google Analytics script * Facebook Pixel * Custom header scripts
👉 These should be injected into `<head>` globally
---
### 🌐 2. SEO SETTINGS
* Default meta title * Default description * Open Graph image * Site name
---
### 💰 3. Monetization / CTA Settings
* WhatsApp number * “Consult Doctor” URL (KenzaMedLink) * CTA text customization
---
### 🎨 4. Branding Settings
* Logo upload * Favicon * Primary color
---
## 📈 ANALYTICS SYSTEM
Admin dashboard should display:
* Page views * Unique visitors * Top performing posts * CTR (CTA clicks)
Optional:
* Integrate Google Analytics API
---
## 🧠 SEO SYSTEM (BUILT-IN)
Each post must support:
* Meta title * Meta description * Slug * Structured headings (H1, H2) * Open Graph tags * Twitter cards
---
## 🔗 INTERNAL LINKING SYSTEM
* Suggest related posts automatically * Show “Related Articles” section
---
## 📱 PERFORMANCE REQUIREMENTS
* Mobile-first design * Fast load (<2s) * Optimized images * SSR enabled
---
## 🧲 CONVERSION SYSTEM
Every page must include:
* Sticky CTA button:
* “Consult Doctor” * WhatsApp floating button * Inline CTA blocks inside content
---
## 🗄️ DATABASE SCHEMA
### USERS
``` id email password role (admin) created_at ```
### POSTS
``` id title slug content excerpt featured_image category_id author_id meta_title meta_description published created_at ```
### CATEGORIES
``` id name slug ```
### SETTINGS
``` id site_name logo_url meta_default_title meta_default_description google_verification_code google_analytics_script facebook_pixel custom_header_script whatsapp_number cta_url cta_text ```
### ANALYTICS (optional)
``` id post_id views clicks date ```
---
## 🎯 CONTENT STRATEGY (AUTO-GENERATE SAMPLE DATA)
Seed database with:
* 10 blog posts (Nigeria-focused) * Categories * Sample CTA links
---
## 🎨 UI STYLE
* Clean, modern healthcare look * Blue + teal color system * Rounded cards * Soft shadows * Minimal layout
---
## 🚀 DEPLOYMENT
* Connect GitHub repo * Deploy on **Vercel** * Use environment variables for secrets
---
# ⚠️ FINAL INSTRUCTION TO CODEX
Generate a **fully functional production-ready app**, not a demo.
Include:
* Working admin panel * Persistent database integration * SEO optimization * Clean UI
---
Perfect — this is exactly the upgrade your Codex doc needed. Right now you move from “idea” → **fully buildable system with real backend**.
I’ve added **2 critical sections** to your document:
1. ✅ Supabase SQL schema (ready to paste) 2. ✅ Next.js + Supabase integration (working code)
This follows how real Supabase apps are structured using PostgreSQL tables + auth + API access ([DEV Community][1])
---
# 🔥 ADD THIS TO YOUR CODEX DOCUMENT
---
# 🗄️ SUPABASE DATABASE SETUP (SQL — READY TO PASTE)
👉 Paste this inside Supabase **SQL Editor**
```sql -- Enable UUID create extension if not exists "uuid-ossp";
-- ===================== -- USERS PROFILE TABLE -- ===================== create table profiles ( id uuid references auth.users on delete cascade primary key, email text, role text default 'admin', created_at timestamp with time zone default now() );
-- ===================== -- CATEGORIES -- ===================== create table categories ( id uuid primary key default uuid_generate_v4(), name text not null, slug text unique not null, created_at timestamp default now() );
-- ===================== -- POSTS -- ===================== create table posts ( id uuid primary key default uuid_generate_v4(), title text not null, slug text unique not null, content text, excerpt text, featured_image text, category_id uuid references categories(id) on delete set null, author_id uuid references profiles(id) on delete set null, meta_title text, meta_description text, published boolean default false, created_at timestamp default now() );
-- ===================== -- SETTINGS (VERY IMPORTANT) -- ===================== create table settings ( id uuid primary key default uuid_generate_v4(), site_name text, logo_url text, meta_default_title text, meta_default_description text,
google_verification_code text, google_analytics_script text, facebook_pixel text, custom_header_script text,
whatsapp_number text, cta_url text, cta_text text,
created_at timestamp default now() );
-- ===================== -- ANALYTICS -- ===================== create table analytics ( id uuid primary key default uuid_generate_v4(), post_id uuid references posts(id) on delete cascade, views integer default 0, clicks integer default 0, date timestamp default now() ); ```
---
# 🔐 ENABLE SECURITY (IMPORTANT)
```sql -- Enable Row Level Security alter table posts enable row level security; alter table categories enable row level security; alter table settings enable row level security;
-- Public can read posts create policy "Public can read posts" on posts for select using (true);
-- Admin full access create policy "Admin full access" on posts for all using (auth.role() = 'authenticated'); ```
---
# ⚡ NEXT.JS + SUPABASE INTEGRATION
---
## 📦 1. Install
```bash npm install @supabase/supabase-js ```
---
## 🔌 2. Supabase Client
```javascript // lib/supabase.js
import { createClient } from '@supabase/supabase-js'
export const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ) ```
---
## 🌍 3. Environment Variables
```env NEXT_PUBLIC_SUPABASE_URL=your_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_key ```
---
## 📄 4. Fetch Blog Posts (Frontend)
```javascript export async function getPosts() { const { data, error } = await supabase .from('posts') .select('*') .eq('published', true) .order('created_at', { ascending: false })
return data } ```
---
## ✍️ 5. Create Post (Admin)
```javascript export async function createPost(post) { const { data, error } = await supabase .from('posts') .insert([post])
return data } ```
---
## 🔐 6. Admin Login
```javascript export async function login(email, password) { return await supabase.auth.signInWithPassword({ email, password, }) } ```
---
## ⚙️ 7. Load Settings (HEADER INJECTION)
```javascript export async function getSettings() { const { data } = await supabase .from('settings') .select('*') .single()
return data } ```
👉 Then inject into `<head>`:
```jsx {settings?.google_analytics_script && ( <script dangerouslySetInnerHTML={{ __html: settings.google_analytics_script }} /> )} ```
---
# 🧠 HOW EVERYTHING CONNECTS
### Flow:
1. Admin logs in (Supabase Auth) 2. Admin creates post → saved in DB 3. Website fetches posts → displays 4. Settings control:
* SEO meta * Verification codes * CTA links 5. Analytics tracks engagement
---
# ⚠️ IMPORTANT REALITY CHECK
If you skip this database layer:
👉 Your admin panel becomes useless 👉 Your blog cannot scale 👉 You can’t manage SEO or analytics properly
---
# 💪 FINAL ARCHITECTURE (CLEAN)
* Frontend → Next.js * Backend → Supabase * Hosting → Vercel
---
# 🚀 WHAT YOU NOW HAVE
This is no longer:
> “a blog”
This is:
> A **content platform + admin CMS + growth engine**
---