Back to the Forge

The Forge ยท Nine projects ยท One sequence

Where it
started.

Before eight live applications. Before a registered company, before the commits ran into four figures. There were these. Each one a targeted lesson โ€” and each lesson kept.

This is not a portfolio showcase. It is a build chronicle โ€” the answer to the question every technical interview eventually asks: where did you learn to build?

The learning architecture

The projects were not random. They were sequenced.

Six layers, each built directly on the one before it. Read in order, the sequence is the argument.

  1. 1Fundamentals โ€” HTML, CSS, vanilla JavaScript
  2. 2API integration โ€” external data, async, state
  3. 3Full-stack โ€” auth, persistence, multi-role systems
  4. 4Real-time & payments โ€” WebSockets, gateways, webhooks
  5. 5Co-founder โ€” product thinking at architecture level
  6. 6Client work โ€” real briefs, real delivery
01

Layer 1 ยท Technical foundation study ยท July 13, 2025

The YouTube Clone

UI reverse-engineering ยท the foundation for WatchSankofa

  • HTML5
  • CSS3
  • Vanilla JavaScript

The brief

Before building an African-first streaming platform, it was necessary to deeply understand the product being improved upon. Not a tutorial exercise โ€” a reverse-engineering session conducted with one question in mind: what does YouTube get wrong for African creators?

The build

YouTube's full interface rebuilt from scratch in pure HTML and CSS. No React, no API, no framework. Sidebar navigation, top nav with search, a four-column video grid. Every thumbnail branded @CreativelyNanda โ€” a poetry short film, a web dev study plan, a lookbook, a build-in-public vlog. View counts written by hand.

The lesson

Fundamentals before frameworks. The developer who can build YouTube's UI in raw CSS understands the web. The clone is the research โ€” and the thumbnails are the autobiography. In July 2025 she had not yet built a single SaaS app, but the thumbnails already knew who she was going to become.

02

Layer 1 ยท Client work

Women's Retreat: Yellowwood Forest

Immersive landing experience

  • HTML5
  • CSS3
  • Vanilla JavaScript

The brief

A wellness retreat operator in the Eastern Cape needed a digital presence that could do what a personal recommendation does: make a potential guest feel safe before she had met anyone. The audience would not book anything they could not trust.

The build

The project began at the emotional destination โ€” what should a visitor feel ten seconds after landing? โ€” and worked backwards to the technical decisions. The answer was: held. Full-bleed nature photography served with optimal loading, a serif display face that slows the reader down, content sequenced to answer emotional questions before practical ones, and zero clutter that might break the spell.

The lesson

Design is an argument. Every visual decision argues for something. This one argued: we see you, this is safe, you belong here. It was also the first lesson in the gap between a technically correct website and an emotionally effective one โ€” both render in the browser, only one converts.

03

Layer 1 ยท Client work

Kustom Krafts

Carpentry business digital identity

  • HTML5
  • CSS3
  • Vanilla JavaScript

The brief

A South African carpentry and joinery business with genuine craft and zero digital presence. All business by word of mouth. The brief: build something that looks serious enough to justify serious prices.

The build

The first decision was the most important โ€” the portfolio gallery goes above the fold. Not the pitch, not the pricing: the work. In the trades market the product sells itself if you can see it. Then image performance on a static build: aspect-ratio locks against layout shift, native lazy loading, WebP recommendations for the client's own photography workflow. The WhatsApp deep link was the conversion insight.

The lesson

WhatsApp is the South African UX pattern. Every product built for this market since โ€” AdminOS, StokvelOS, Campus Compass โ€” has it built in, and this project is where that conviction formed. Second lesson: zero dependencies is a feature for the right client. A carpenter cannot maintain a React app. A static site that works for five years without intervention is the better outcome.

SourceDeployment archivedCurrent demo gallery
04

Layer 2 ยท Personal ยท creative ยท technical study

MoodCast

Weather ร— poetry ร— self-care

  • HTML5
  • CSS3
  • Vanilla JavaScript
  • OpenWeatherMap API

The brief

Every developer who has finished an introductory JavaScript course has built a weather app. The question was: what does a weather app built by a published poet look like?

The build

The technical work โ€” API key, geolocation, fetch, parse, render โ€” was the fastest part. The real build was the content library: original poems written for each weather condition, self-care rituals matched to each, and one addition no tutorial suggests โ€” the load shedding mood card, pairing an outage with candle rituals and a poem about sitting in the dark.

The lesson

The standard project is the starting point, not the destination. Every tutorial in the curriculum was treated as a brief: what would this look like if it were actually good? The weather app became MoodCast. The YouTube clone became research. The load shedding card is a product insight, not a joke โ€” products that acknowledge the lived reality of their users earn trust that technically superior competitors cannot buy.

05

Layer 6 ยท Client work ยท tiered engagement

Chanty Shuttle Services

Transport business web presence

  • HTML5
  • CSS3
  • Vanilla JavaScript

The brief

A real transport operator with reliable vehicles, quality service and zero digital presence. The engagement spanned a Growth Package and a planned Vision Package โ€” the first multi-tiered client service model.

The build

Growth Package scoped as a complete digital foundation: website with booking inquiry flow, Google Business Profile, social templates, WhatsApp Business, local SEO. The intellectual breakthrough was the affiliate architecture โ€” Chanty's existing corporate clients and hotel partners could become passive referral sources if the incentive structure was right. Track, attribute, reward: happy clients become a distribution channel.

The lesson

Tiered pricing is a product design problem. Growth โ†’ Vision solved the SA SME budget reality: businesses want comprehensive digital services but cannot afford everything at once. And client work seeds product ideas โ€” this engagement crystallised the question that became AdminOS: why is every SME owner manually managing communication, bookings, invoicing and staff on WhatsApp?

R34,000 Growth Package delivered. First demonstration of the B2B commercial model.

06

Layer 3 ยท Full-stack SaaS prototype

Cortex Hub Booking

Smart workspace booking platform

  • Next.js
  • TypeScript
  • Supabase
  • PayFast
  • Resend
  • Tailwind CSS

The brief

Shared workspaces and creative hubs in South Africa are managed via WhatsApp and paper registers. Double bookings happen, revenue leaks, no-shows go unmanaged. A real booking system exists for hotels and airlines โ€” why not for creative hubs?

The build

The first complete commercial data model: spaces, bookings, members, payments, availability. The deceptively simple question โ€” is this space free? โ€” was the hardest problem in the portfolio to that point. It is not an equality comparison but an interval-overlap problem that must survive partial overlaps, simultaneous submissions, and the difference between a soft hold and a confirmed reservation. Solved with PostgreSQL's tsrange and its overlap operator, as a database constraint rather than in application code.

The lesson

Database primitives first, application code second. Every problem that can be solved in the database should be โ€” availability checking, uniqueness, concurrent booking prevention belong in PostgreSQL, not in a server action. This principle now governs the Supabase architecture across every application.

07

Layer 4 ยท Full-stack eCommerce architecture

GreenVault

Sustainable commerce platform

  • Next.js
  • TypeScript
  • Supabase
  • PayFast
  • Resend
  • Tailwind CSS

The brief

South African sustainable products โ€” natural hair care, organic food, ethical textiles โ€” are scattered and underrepresented digitally. GreenVault was built to demonstrate a curated, values-aligned African eco-commerce platform, and to solve the full stack: catalogue, cart, checkout, payment, digital delivery.

The build

The most technically comprehensive foundation project. The data model had to survive real-world usage: concurrent carts, failed payments, partial refunds, digital goods expiry. The delivery flow was the most interesting component โ€” PayFast sends an ITN to a webhook on confirmation, and that handler must validate the signature, update order status, generate a signed Storage URL with a 48-hour expiry, and dispatch the confirmation email, all in one atomic server action.

The lesson

PayFast ITN handling is the foundation of SA eCommerce. The signature verification pattern, the idempotency requirement โ€” the same ITN can arrive repeatedly, so the handler must be safe to run again โ€” and the async email dispatch are now standard across every payment-enabled product. eCommerce architecture also scales to SaaS: the multi-role patterns and the order state machine reappear everywhere.

08

Layer 4 ยท Community platform ยท creative technology

PoetryTube

A video platform for poets

  • Next.js
  • TypeScript
  • Supabase
  • Mux
  • Tailwind CSS

The brief

YouTube has no concept of spoken word as a distinct cultural form. Its algorithm cannot surface a performance in isiZulu or Luganda to the audiences who speak those languages, and has no incentive to care. Poets who build audiences there succeed despite the platform, not because of it. This one is personal.

The build

Live applause was the hardest and most important problem here. Supabase Realtime presence and broadcast channels carry it: a viewer taps applause during a performance, a broadcast reaches every connected client, and the counter moves for everyone at once. That shared moment turns watching from asynchronous consumption into a live cultural event. Language was then treated as a discovery dimension equal to category or theme.

The lesson

The most personal project is the most differentiated. PoetryTube is technically complex โ€” real-time systems, video processing, community architecture โ€” but that is not what makes it stand out. It was built by a published poet who has lived the exact problem it solves. Biographical legitimacy cannot be engineered. It can only be honoured.

09

Layer 5 ยท Co-founder ยท social impact

TrueAccApp

Location-based accessibility platform

  • Next.js
  • TypeScript
  • Mapbox GL JS
  • Supabase
  • Tailwind CSS

The brief

Four million South Africans live with disabilities, and there is no comprehensive, community-verified accessibility database for South African public spaces. TrueAccApp was built to create one.

The build

Four capabilities engaged for the first time: Mapbox GL JS for spatial data, co-founder collaboration on architecture, a crowdsourced data model with contribution validation, and WCAG compliance as a primary engineering constraint rather than a retrofit. The community model needed a schema that tracked not just location data but confidence in it โ€” how many contributors had verified a place, when, and whether it had been flagged.

The lesson

Constraints produce better design. Building for visual impairments, motor limitations and cognitive differences forces decisions that make the product better for everyone โ€” semantic HTML, keyboard navigation, readable contrast. These are not accessibility features, they are quality standards. And co-founding requires explicit alignment: prioritisation, scope and decision authority are a leadership problem no solo build can teach.

The throughline

Nine principles that now govern every build.

This is the intellectual property no repository can fully contain. It lives in the decisions made on every line written since.

  1. 01Emotional architecture before technical implementation.
  2. 02WhatsApp is the SA UX pattern โ€” integrate or be irrelevant here.
  3. 03PayFast ITN is the foundation of SA commerce โ€” learn it once, deploy it everywhere.
  4. 04Database primitives before application code.
  5. 05Zero dependencies is a feature for the right context.
  6. 06Client work seeds product ideas โ€” every manual SME process is a future feature.
  7. 07Clone to learn, not to copy.
  8. 08Accessibility is a quality standard, not a feature.
  9. 09The personal project is the most differentiated.