TEDxSabonGari Event Platform

CASE STUDY

TEDxSabonGari 2026

Event Platform & Content System

Visit Live Site

Lead Engineer | UI/UX Architect

The Challenge

Fixing a Broken Brand

TEDxSabonGari is an independently organized TED event in Zaria, Nigeria. They had high-profile speakers and a strong theme, but their digital presence was failing. The existing site was a broken HTML template with spelling errors ("Spekers"), empty placeholders, and no mobile optimization. It damaged the event's credibility. The organizing team is non-technical. They needed a way to constantly update speaker lists, schedules, and ticket details. Giving them direct access to the code was a risk, but keeping me as the sole updater created a bottleneck.

Challenge

The Solution

A Custom System for a Non-Technical Team

I scrapped the old template and built a custom platform using Next.js 16. I focused on solving two specific problems: content management and visual consistency.

Process

1. The "Sandbox" Architecture

The team needed to edit text without breaking the layout. I separated the data from the user interface. I moved all variable content (speakers, ticket prices, FAQs) into a single, strict-type data file. The frontend components map this data automatically. The marketing team simply edits text in this one file via GitHub. This triggers an automatic rebuild on Vercel. They can fix typos or add sponsors in minutes without touching a single line of HTML.

Phase 1

2. Automated Design Control

The team often provides photos with different lighting and quality. This usually makes a website look messy. I implemented a masonry grid layout to handle different image aspect ratios. I engineered a CSS grayscale filter that automatically applies to all speaker headshots. This forces disparate images to look uniform and professional. The color reveals only on hover, adding a polished interactive element.

Phase 2

The Result

Professional Standard & High Performance. Restored Credibility: The site now functions as a flagship platform that matches international TEDx standards. Safe Content Management: The non-technical team manages daily updates independently without breaking the UI. Visual Uniformity: The automated image filters ensure the site looks consistent regardless of the assets the team uploads.

Phase 3

The Result

A True Digital Transformation

  • Restored credibility with a flagship platform matching international TEDx standards
  • Safe content management allowing non-technical team to update independently
  • Visual uniformity through automated image filters for consistent branding
  • High performance with optimized Next.js architecture

Technologies Used

Next.js 16 (App Router)TypeScriptTailwind CSSVercel
← Back to Portfolio

LET'S ENGINEER YOUR SYSTEM.

Ushcodex | Brand Strategist & Full-Stack Developer