Role
Solo Developer & Designer
Year
2026
Tech Stack
5 Technologies
Status
Completed
Overview
A friend's catering business in Nigeria had a growing customer base on WhatsApp but zero discoverability online. I built the entire site in under 24 hours — a custom Bauhaus/neo-brutalist design, a TikTok-style video gallery, server-side rendering for SEO, and every touchpoint funneling to a WhatsApp conversation. Built with TanStack Start v1 as an early-adopter bet on its type-safe SSR model. 2,358 lines, 12 components, 13 commits.
The Problem
Small food catering businesses in Nigeria operate almost entirely through WhatsApp and Instagram DMs. They have no web presence, no SEO footprint, and no way for new customers to discover them through search. When a potential customer searches for event catering or party food trays in Nigeria, these businesses are invisible. Bukkie's Pot needed a fast, professional website that could rank on search engines, showcase their menu and event work through rich media, and funnel every visitor into a WhatsApp conversation — the channel where orders actually close.
Screenshots
Challenges
Building a TikTok-style video gallery with autoplay sync, snap scrolling, and graceful degradation for iPhone .MOV clips — all without a carousel or modal library.
TanStack Start v1 is a young framework with rough edges. Getting streaming SSR, file-based routing, and Vercel deployment working together required pushing through documentation gaps.
The entire project needed to go from zero to deployed in under 24 hours — custom design system, 32-item menu, video gallery, full SEO stack, and production deployment.
Solutions
Built a TikTok-style video gallery from scratch — snap scrolling, autoplay sync, and graceful fallback for unsupported video formats. No external carousel library.
Used CSS-only patterns wherever possible: pure CSS hero carousel (zero layout shift), checkbox-based mobile nav (no React state), and a lightweight custom scroll-reveal component instead of a heavy animation library.
Kept scope tight — 12 purpose-built components, a reusable Bauhaus design system as CSS utility classes, and server-rendered content for SEO. Shipped in ~19 hours across 13 commits.
Key Highlights
TikTok-Style Video Gallery: Snap-scrolling video feed with autoplay sync, format fallback for iPhone clips, and responsive layout — built from primitives, no library.
Bauhaus Design System: Custom neo-brutalist visual identity — thick borders, offset shadows, warm cream and bold orange palette, all defined as reusable CSS utility classes.
WhatsApp-First Conversion: Every touchpoint funnels to WhatsApp with pre-filled messages. The site's job isn't to take orders — it's to start conversations.
24-Hour Sprint: Custom design system, video gallery, full SEO stack, and production deployment — shipped in ~19 hours across 13 commits.
Scale & Scope
2,358
Lines of Code
19
Source Files
1 (single-page site)
Pages
32
Menu Items
13
Git Commits
Technology Stack
Outcome
Live at bukkiespot.com for a real catering business with real customers placing orders through the WhatsApp integration.
