Tadbeer TT Content Portal — Complete System Manual

1. System Architecture

The Tadbeer TT Content Portal is built on a deliberate, performance-first foundation using pure HTML5, CSS3, and JavaScript ES6+ — with zero reliance on frontend frameworks. This architectural decision was intentional: by eliminating framework overhead, the portal loads instantly on any device and remains fully auditable without build tooling. Every file is a plain HTML document that a browser can open directly, making it trivially simple to inspect, debug, or modify individual assets without understanding a compilation pipeline.

State management and cross-client data synchronization are handled by Supabase, an enterprise-grade backend platform built on PostgreSQL with a real-time WebSocket layer. When a reviewer approves an asset or submits feedback, that state change is written to Supabase and instantly broadcast to all other connected clients via Supabase Realtime channels — no polling, no page refresh required. This makes simultaneous multi-reviewer sessions fully coherent in real time.

The entire portal is deployed globally on Vercel's Edge Content Delivery Network. Assets are served from physical server nodes geographically closest to each visitor, reducing latency to milliseconds regardless of whether the reviewer is in Muscat, Dubai, London, or Singapore. The CI/CD pipeline is fully automated: every git push to the main branch on GitHub triggers a Vercel build job that compiles, tests, and deploys the updated portal to the edge network in approximately 30 seconds — no manual server operations required at any step.

Beyond the browser, the architecture extends into an automated publishing pipeline. A suite of Node.js scripts residing in the scripts/ directory communicates directly with the Meta Graph API, handling the rendering, image splitting, and programmatic publication of approved content assets to Instagram and LinkedIn. These scripts transform the Tadbeer portal from a review tool into a fully automated, end-to-end content engine.

2. Brand & Design System

The visual language of the content assets served through the portal is a carefully codified design system engineered to project premium B2B authority. The foundational canvas color is Warm Sand Ivory (#F8F6F0), a tone that evokes luxury print materials while providing ideal contrast for both light-background text and overlaid design elements. All structural navigation, headings, borders, and icon elements are rendered in Dark Teal (#184F5B), a color that communicates institutional trust and professionalism — the right impression for a consulting brand operating in the Omani enterprise market. Luxury Gold (#CAA94C) serves as the accent layer, used for border highlights, active state indicators, decorative dividers, and the most important call-to-action elements on each slide, drawing the eye purposefully without overwhelming the composition.

Typography is handled exclusively by the Inter font family, loaded via Google Fonts in four distinct weights: 300 (light, used for supporting body text), 400 (regular, used for standard prose), 600 (semibold, used for slide headings and subheadings), and 700 (bold, used for primary slide titles and statistics). This weight range provides sufficient typographic hierarchy to create visually rich slides without introducing additional typefaces that would complicate brand consistency.

All content assets are built on a fixed-canvas architecture set to exactly 1080 pixels in width — the native resolution expected by Instagram and LinkedIn for optimal quality on high-DPI displays. The challenge this creates is that a 1080px-wide fixed layout would overflow horizontally on any standard mobile screen. To solve this elegantly without compromising the layout, the design system implements a proprietary CSS Mobile Auto-Fit technique. Using a media query that activates at screen widths below 1100px, the following zoom expression is applied to every content container class: zoom: calc((100vw - 20px) / 1080). This calculation dynamically computes the ratio between the available viewport width and the fixed 1080px canvas, applying it as a uniform zoom scale. The result is that every slide — whether a .slide, .story-slide, .post-card, .square-slide, or .story-card — scales proportionally to fill the phone screen perfectly, preserving every typographic proportion and spacing relationship exactly as designed, with no horizontal scrollbar.

3. 26 Content Assets

The portal manages a strategically structured 15-day content pipeline comprising 26 distinct assets deployed across three primary format categories, each engineered for the specific technical and behavioral requirements of Instagram and LinkedIn's content algorithms and audience expectations.

4. Public Reviewer Portal (index.html) — Step-by-Step Guide

The public reviewer portal at index.html is the primary stakeholder-facing interface for evaluating the 15-day content pipeline. It is intentionally accessible without any login — any team member with the URL can open it immediately. The following steps describe the complete review workflow from first load to final approval.

5. Admin Command Center (admin.html) — Step-by-Step Guide

The Admin Command Center at admin.html is the operational dashboard for the content management team. It is the real-time nerve center for tracking review progress, actioning feedback, and triggering the publishing pipeline.

6. Supabase Schema

The data persistence layer for the review platform is powered by a precisely structured PostgreSQL table hosted on Supabase. The schema is minimal by design — it captures exactly the data required for review state management without unnecessary complexity. The table is named content_feedback.

The id column is a TEXT PRIMARY KEY that matches the asset's filename without its extension (e.g., ig_day02 for the file carousels/ig_day02.html). This design choice creates an implicit, zero-overhead join between the database record and the static file — no foreign key table or lookup required. The status field accepts exactly three values: 'pending' (initial default state), 'approved' (reviewer has signed off), and 'changes_required' (revisions needed). The feedback TEXT field stores the reviewer's written notes. The reviewer_name TEXT field attributes every action. The updated_at TIMESTAMPTZ field is automatically maintained by a PostgreSQL trigger that fires on every row update, ensuring the Admin Command Center always shows precisely when each asset was last acted upon.

Row Level Security is configured to allow full anonymous CRUD access — any client with the Supabase URL and anon key can read and write the table. This removes the friction of authentication for external stakeholders during the fast-paced review cycle. Supabase Realtime is activated using the following SQL, which adds the table to the logical replication publication used by the WebSocket broadcast layer:

-- Create the review state table
CREATE TABLE content_feedback (
    id              TEXT PRIMARY KEY,
    status          TEXT NOT NULL DEFAULT 'pending'
                    CHECK (status IN ('pending', 'approved', 'changes_required')),
    feedback        TEXT,
    reviewer_name   TEXT,
    updated_at      TIMESTAMPTZ DEFAULT NOW()
);

-- Auto-update updated_at on every row change
CREATE OR REPLACE FUNCTION update_updated_at()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = NOW();
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER set_updated_at
    BEFORE UPDATE ON content_feedback
    FOR EACH ROW EXECUTE FUNCTION update_updated_at();

-- Enable Supabase Realtime broadcast for this table
ALTER PUBLICATION supabase_realtime ADD TABLE content_feedback;

-- Allow anonymous read and write (RLS)
ALTER TABLE content_feedback ENABLE ROW LEVEL SECURITY;
CREATE POLICY "anon_all" ON content_feedback
    FOR ALL TO anon USING (true) WITH CHECK (true);

7. Scripts Directory

The scripts/ directory contains the Node.js automation infrastructure that bridges the review platform to the live social media publishing channels. These scripts operate independently of the browser-based portal and are executed from the command line or triggered by the cron daemon.

8. Step-by-Step Publishing Workflow

The complete lifecycle of a content asset — from first review to final publication on Instagram and LinkedIn — follows a rigorous eight-step procedural workflow that integrates all three layers of the system: the reviewer portal, the admin command center, and the automated publishing scripts.