🌍 c4gg – Citizens For Good Governance

A Next.js + TypeScript + Tailwind CSS starter boilerplate designed for public reporting and civic transparency apps.
It includes Supabase Auth (Google), form validation, and Docker support — ready for scalable deployment.

Built with ❤️ by IT For Good Governance — empowering transparency, one citizen at a time.

---

⚡ Features

• ⚛️ Next.js 14 (React-based full-stack framework)
• 💅 Tailwind CSS for responsive, modern UI
• 🔐 Supabase Auth (Google login ready)
• ✅ Zod + React Hook Form for schema-based validation
• 🐳 Docker + docker-compose for dev & production
• 🗂 setup-project.js script to ensure structure consistency
• 🧩 Modular architecture for reports, users, and dashboards

---

📁 Project Structure

src/
├─ app/                # Next.js App Router
│  ├─ page.tsx         # Home page
│  └─ layout.tsx       # Root layout
├─ components/         # Reusable UI components
│  └─ FormInput.tsx
├─ lib/                # Supabase client and utilities
│  └─ supabase.ts
├─ schemas/            # Zod validation schemas
│  └─ userSchema.ts
├─ styles/             # Tailwind & global styles
│  └─ globals.css
public/                # Static assets
Dockerfile
docker-compose.yml
setup-project.js       # Folder setup script
.env.local

---

🛠 Setup Instructions

1. Clone the Repository

git clone https://github.com/IT-for-good-governance/c4gg.git
cd c4gg

---

2. Initialize Project Structure

node setup-project.js

This creates all required folders and placeholder files (safe to re-run anytime).

---

3. Install Dependencies

npm install

If starting fresh, you can initialize manually:

npx create-next-app@latest . --ts --tailwind
npm install @supabase/supabase-js zod react-hook-form @hookform/resolvers

---

4. Configure Environment Variables

Create a .env.local file:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Used in src/lib/supabase.ts for connecting to Supabase.

---

5. Run Locally (Development)

npm run dev

Visit: 👉 http://localhost:3000

---

6. Run in Docker

We include both development and production services.

🚧 Development Mode (hot reload)

docker-compose up web

• Runs npm run dev
• Live reload works automatically
• Access at http://localhost:3000

🚀 Production Mode

docker-compose up web-prod --build

• Builds an optimized production image
• Runs npm start
• Serves from port 3000

---

🧱 Dockerfile

# ---------- BUILD STAGE ----------
FROM node:20-alpine AS builder

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build

# ---------- PRODUCTION STAGE ----------
FROM node:20-alpine AS production

WORKDIR /app

COPY --from=builder /app/package*.json ./
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/node_modules ./node_modules

EXPOSE 3000
CMD ["npm", "start"]

---

🐳 docker-compose.yml

version: '3.9'

services:
  # 🚀 Development Service
  web:
    container_name: c4gg-dev
    image: node:20-alpine
    working_dir: /app
    command: sh -c "npm install && npm run dev"
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    env_file:
      - .env.local
    environment:
      - NODE_ENV=development
    restart: unless-stopped

  # 🏗️ Production Service
  web-prod:
    container_name: c4gg-prod
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    env_file:
      - .env.local
    environment:
      - NODE_ENV=production
    restart: unless-stopped

---

🧩 Example Supabase Integration

src/lib/supabase.ts

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Usage Example

'use client';
import { supabase } from '@/lib/supabase';

export default function LoginButton() {
  async function signInWithGoogle() {
    await supabase.auth.signInWithOAuth({ provider: 'google' });
  }

  return (
    <button
      onClick={signInWithGoogle}
      className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
    >
      Sign in with Google
    </button>
  );
}

---

✅ Next Steps

• Add Supabase tables (users, reports, news)
• Connect form submissions to Supabase
• Add report listing and admin dashboard
• Deploy to Vercel, Render, or Docker Cloud

---

⚙️ Scripts

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

---

💡 Tips

• .env.local is required for Supabase connection.
• The setup-project.js script ensures consistent folder setup.
• Re-run Docker after modifying environment variables.
• Next.js automatically handles routing — just create new folders in /src/app.

---

❤️ Powered By

IT For Good Governance
Empowering transparency through open civic technology.

---

🪄 License

MIT License © 2025 IT For Good Governance