Role
Solo Full-Stack Developer
Year
2026
Tech Stack
6 Technologies
Status
Completed
Overview
An immersive technology rental company in Nigeria needed a digital storefront for 30+ equipment items and a CMS for non-technical staff to manage all site content and media. I built the entire platform as a Next.js monolith: a public marketing site with 11 server-rendered sections and a protected 9-page admin CMS. Media files up to 100MB are stored and streamed directly from the database. A generic CRUD factory generates API handlers for any data model in 2 lines of code. Built solo, ~4,800 lines of TypeScript.
The Problem
Event planners in Nigeria who want to rent cutting-edge immersive technology — VR headsets, holographic displays, motion simulators, 360 video booths, go-karts — have no centralized digital storefront to browse equipment, see pricing, and initiate a booking. The rental company itself needs a way to manage a catalog of 30+ equipment items across 5 categories, update site content (hero copy, FAQs, statistics, service descriptions), and upload media — all without touching code. The gap is two-fold: a polished public-facing marketing site with real-time pricing in Nigerian Naira, and a secure admin CMS that lets non-technical staff manage every piece of content on the site.
Screenshots
Challenges
The admin CMS needed to manage 7 different data models plus a deeply nested site content document through a unified interface — writing individual CRUD handlers for each would have been massively repetitive.
Large media assets (up to 100MB) needed to be stored and served without an external file service. The entire stack had to stay on a single database to simplify operations.
All site content — hero taglines, about text, statistics, contact info, social links — needed to be editable from a single admin form with a deeply nested data structure.
Solutions
Built a generic API factory that generates complete CRUD handlers for any content type with minimal code — dramatically reducing boilerplate across the entire backend.
Stored all media (equipment videos and images up to 100MB) directly in the database instead of using external file services, keeping the entire stack on a single infrastructure layer.
Created a custom Three.js WebGL animation for the hero section — interactive concentric rings that respond to cursor movement, giving the site a futuristic visual identity matching the brand.
Key Highlights
Equipment Catalog: 30+ items across 5 groups with video previews, Naira pricing (₦5,000 to ₦8,000,000), and WhatsApp inquiry links.
Admin CMS: Non-technical staff manage equipment, services, FAQs, hero content, and media uploads — every piece of text on the site is editable without code changes.
Custom WebGL Hero: Interactive Three.js animation with concentric rings, cursor-tracking parallax, and dynamic color cycling — matching the futuristic brand identity.
Media Pipeline: Equipment demo videos and images stored and served directly from the database, eliminating external file service dependencies.
Scale & Scope
~4,823
Lines of Code
35
React Components
9
Database Models
18
API Routes
6
Git Commits
Technology Stack
Outcome
The site is configured for Vercel deployment with the domain immersia.ng. The equipment catalog contains real-world pricing in Nigerian Naira (ranging from ₦5,000 for silent disco headsets to ₦8,000,000 for holographic displays), real product names (Meta Quest 3, PlayStation 5, Nintendo Switch), and 32 media assets (equipment videos and images). The seed data references 200+ events powered and 1,000+ happy clients. This is a production system built for a real immersive technology rental company operating in Nigeria.
