README.md

status: "Production"
type: "Client Project"
visibility: "Private"
role: "Lead Full-Stack Architect"
duration: "Feb 2023 - Present"
client: "Bonafide Social Group"
version: "v1.2.0"

Overview

🎯 Mission: To provide a highly performant, secure, and easily manageable web presence for the Bonafide Social Group, enabling efficient content delivery and member communication through a hybrid static/dynamic serverless architecture.
⚠️ Problem: The client required a modern, scalable, and cost-effective content management system and public-facing portal that could deliver static content at edge speeds while securely handling dynamic administrative tasks and mass communications, overcoming limitations of traditional CMS platforms.
👥 Target Audience: Bonafide Social Group administrators (content managers, marketing specialists), and public members accessing event information, news, and resources.
📈 Impact Metrics: Achieved 99+ Lighthouse Performance and SEO scores, ensured 100% email delivery tracking, reduced average asset load times by 60% with WebP compression, and maintained <150ms average API latency.

Bonafide Social Group — Hybrid Serverless CMS & Web Portal

Overview

This project implements a cutting-edge hybrid static and dynamic Content Management System (CMS) and public web portal for the Bonafide Social Group. Leveraging the power of Next.js with its App Router, TypeScript, and Tailwind CSS, the platform delivers a highly performant and SEO-optimized public experience while providing a secure, feature-rich administrative interface. Key innovations include a robust Role-Based Access Control (RBAC) system, client-side batch email processing to circumvent serverless limitations, and a Git-backed content synchronization pipeline for seamless, automated deployments.

Technical Architecture

The system employs a serverless-first, hybrid rendering architecture. Public content is statically generated and cached at the edge via Vercel's CDN for unparalleled speed. Dynamic administrative functions and API interactions are handled by Next.js API Routes (serverless functions) authenticated by Supabase Auth with custom PostgreSQL RBAC. Client-side engines manage intensive tasks like image compression and email broadcasting, reducing backend load. Content changes trigger a Git-based pipeline, pushing updates to GitHub which then triggers Vercel for automated rebuilds and deployments.

Folder Structure

├── public/
│   ├── assets/
│   ├── favicon.ico
├── src/
│   ├── app/                      # Next.js App Router (Public & Admin Routes)
│   │   ├── (admin)/              # Grouped Admin Routes (e.g., /admin/dashboard)
│   │   │   ├── dashboard/
│   │   │   ├── content/
│   │   │   ├── users/
│   │   │   ├── media/
│   │   │   ├── emails/
│   │   │   ├── layout.tsx        # Admin Layout with RBAC checks
│   │   ├── (public)/             # Grouped Public Routes (e.g., /, /about)
│   │   │   ├── page.tsx          # Home page
│   │   │   ├── about/
│   │   │   ├── blog/
│   │   │   ├── layout.tsx        # Public Layout
│   │   ├── api/                  # Next.js API Routes (Serverless Functions)
│   │   │   ├── auth/
│   │   │   ├── content/
│   │   │   ├── users/
│   │   │   ├── emails/batch-send.ts
│   │   │   ├── github/sync.ts
│   │   ├── layout.tsx            # Root layout
│   │   ├── globals.css
│   ├── components/               # Reusable UI components
│   │   ├── ui/
│   │   ├── admin/
│   │   ├── public/
│   │   ├── media-library/
│   │   ├── bento-grid/
│   ├── hooks/                    # Custom React hooks
│   ├── lib/                      # Utility functions & helpers
│   │   ├── supabase/             # Supabase client & server setup
│   │   ├── auth.ts               # RBAC logic & JWT utils
│   │   ├── image-compression.ts
│   │   ├── git-sync.ts
│   ├── types/                    # TypeScript interfaces & types
│   ├── styles/                   # Tailwind CSS configurations
├── .env.local
├── next.config.mjs
├── tailwind.config.ts
├── tsconfig.json
├── package.json
├── README.md

Setup & Installation

1. Clone the repository:

    git clone https://github.com/bonafide-social-group/serverless-cms-portal.git
    cd serverless-cms-portal

2. Install dependencies:

    npm install
    # or yarn install

3. Configure Environment Variables:

Create a .env.local file in the root directory and add the following:

    NEXT_PUBLIC_SUPABASE_URL="YOUR_SUPABASE_URL"
    NEXT_PUBLIC_SUPABASE_ANON_KEY="YOUR_SUPABASE_ANON_KEY"
    SUPABASE_SERVICE_ROLE_KEY="YOUR_SUPABASE_SERVICE_ROLE_KEY"
    RESEND_API_KEY="YOUR_RESEND_API_KEY"
    GITHUB_PAT="YOUR_GITHUB_PERSONAL_ACCESS_TOKEN" # For Git-backed sync
    GITHUB_REPO_OWNER="bonafide-social-group"
    GITHUB_REPO_NAME="serverless-cms-portal"
    VERCEL_DEPLOY_HOOK_URL="YOUR_VERCEL_DEPLOYMENT_HOOK"

4. Set up Supabase:

  Create a new Supabase project.

  Configure PostgreSQL tables and RLS policies according to the schema (e.g., users, roles, permissions, role_permissions, user_roles, content, media).

  Enable Supabase Auth and configure email templates.

  Implement custom auth triggers if needed for RBAC.

5. Run the development server:

    npm run dev
    # or yarn dev

Open http://localhost:3000 in your browser.

Key Modules

  `src/app/(admin)/`: Contains all administrative routes, secured by layout.tsx which performs RBAC checks.

  `src/app/api/`: Houses serverless functions for secure backend operations, including authentication, content management, and external API integrations.

  `src/lib/supabase/`: Centralized Supabase client initialization for both client-side and server-side contexts, ensuring secure and efficient database interactions.

  `src/lib/auth.ts`: Core logic for JWT validation, role checking, and permission management based on Supabase Auth sessions.

  `src/components/media-library/`: Implements the visual media browser and handles client-side WebP image compression.

  `src/components/bento-grid/`: The interactive drag-and-drop component for building flexible content layouts.

  `src/lib/git-sync.ts`: Manages the API calls to GitHub for committing content changes and triggering Vercel webhooks.

Responsibilities

Architected the hybrid static + dynamic serverless CMS using Next.js App Router, TypeScript, and Tailwind CSS.
Designed and implemented a robust Many-to-Many Role-Based Access Control (RBAC) system for secure route and API access.
Engineered a client-side chunked batch-processing engine for mass email broadcasts.
Developed a visual media library with client-side canvas-based image compression and a Bento Grid layout builder.
Implemented secure administrative password self-service and verification flows.
Built a Git-backed content synchronization pipeline for automated frontend deployments.
Ensured high performance, SEO, accessibility, and security standards across the platform.

Bonafide Social Group — Hybrid Serverless CMS & Web Portal - Case Study

Overview

Bonafide Social Group — Hybrid Serverless CMS & Web Portal

Overview

Technical Architecture

Folder Structure

Setup & Installation

Key Modules

Responsibilities