O. TLADIE

Digital Builder / Developer / Creator

Project.Archive

Select a project and explore further

PROJECT_ORBIT 01 / 10

LIVE WORLD

ONLINE

// PROJECT_FOCUS

Soflas Developments

Corporate Portfolio

> MISSION: Engineered a high-performance digital presence for a tech startup, migrating from a legacy Flask/Bootstrap architecture to a modern, SEO-optimized Next.js framework to enhance user experience and page speed.

Next.js React Tailwind-CSS Node

LIVE WORLD

ONLINE

// PROJECT_FOCUS

Laerskool Dr Havinga

Educational Institution

> MISSION: Maintained and optimized the official digital portal for Laerskool Dr Havinga. Implemented clean search accessibility features and content delivery frameworks to optimize community engagement pipelines.

Astro Tailwind-CSS JavaScript AOS

LIVE WORLD

ONLINE

// PROJECT_FOCUS

Time Tigers Excellence

Sports Academy

> MISSION: Developed an elite digital platform for a top-tier South African football academy. The architecture was evolved from Flask to Astro to achieve lightning-fast load times, effectively showcasing the academy's record-breaking player development pipeline.

Astro Tailwind-CSS JavaScript

LIVE WORLD

ONLINE

// PROJECT_FOCUS

Greenflaim Legacy

Non-Profit Org

> MISSION: Designed and implemented an automated static infrastructure featuring a serverless contact network using AlpineJS, streamlined node entry routing architectures, and strict email communication handling.

Astro AlpineJS Tailwind-CSS Nodemailer

PRIVATE SYSTEM

ACTIVE

// PROJECT_FOCUS

Booking System

Booking & Operations Platform

> MISSION: Engineered a full-stack booking and operational management platform that connects appointment scheduling, staff workflows, daily operations, checkout and administrative control into a single system.

Nuxt 3 Vue TypeScript JavaScript Tailwind CSS Pinia Fastify Prisma ORM Node.js JWT bcrypt Resend Docker

LIVE WORLD

ONLINE

// PROJECT_FOCUS

ReelEngine

Media Processing Platform

> MISSION: Engineered a lightweight, self-hosted media-processing platform for authenticated Reel conversion and private video management, with user isolation, controlled resource consumption and private media delivery.

Python FastAPI SQLite Docker FFmpeg yt-dlp Vanilla JavaScript HTML CSS

LIVE WORLD

ONLINE

// PROJECT_FOCUS

Avid Capital Invest

Financial Portal

> MISSION: Built a professional investment portal featuring an integrated educational module and a custom-built lead generation pipeline. Balanced high-end corporate aesthetics with functional user-capture systems and newsletter automation.

Flask React Tailwind-CSS Python

LIVE WORLD

ONLINE

// PROJECT_FOCUS

Ntsu Secondary School

Educational Institution

> MISSION: Launched a centralized digital hub for a premier Free State sports school. Utilizing Astro’s static site generation, the platform efficiently delivers school updates and sports achievements to a growing community of students and parents.

Astro Tailwind-CSS JavaScript

PRIVATE SYSTEM

LIVE

// PROJECT_FOCUS

Custom Sports Dashboard

Sports Management Platform

> MISSION: Engineered a custom sports management dashboard and supporting web interface for managing football and sports-organisation operations through a centralised digital system.

Next.js React TypeScript Tailwind CSS Prisma ORM Node.js

PRIVATE SYSTEM

LIVE

// PROJECT_FOCUS

Sales OS

Sales Intelligence & Outreach Platform

> MISSION: Built a purpose-driven sales workspace that connects prospect research, qualification, decision-maker tracking and outreach execution into a single operational workflow.

React Vite Tailwind CSS Node.js Fastify PostgreSQL JWT Docker Compose n8n

PRIVATE SYSTEM / CASE STUDY

// PRIVATE_PROJECT / SYSTEM_DOCUMENTATION

Booking System

Booking & Operations Platform

A working booking and operations platform designed around the complete appointment lifecycle — from controlled access and booking creation through scheduling, active service, checkout and upcoming operations.

STATUS

ACTIVE

00 / TECHNOLOGY_STACK

Nuxt 3 Vue TypeScript JavaScript Tailwind CSS Pinia Fastify Prisma ORM Node.js JWT bcrypt Resend Docker

00 / SYSTEM_ARCHITECTURE

Nuxt 3 / Vue frontend with Pinia and Tailwind CSS, communicating with a Fastify REST API through the Docker network. Authentication, booking, scheduling, administration, notifications, invoices and onboarding are separated into dedicated API modules.

01 / INTERFACE_FIELD

System Surfaces

ACCESS → ORIENT → BOOK → SCHEDULE → OPERATE → PLAN

Access Control

The entry point separates administrator and tenant access, establishing the correct operational context before the user enters the system.

01 / IMAGE_PENDING

Access Control

Desktop interface placeholder

Operational Dashboard

The daily dashboard adapts to activity on the schedule, presenting appointments, completed services, revenue and the current operational state.

02 / IMAGE_PENDING

Operational Dashboard

Desktop interface placeholder

Appointment Creation

The booking interface captures appointment details while checking the existing schedule for conflicts before the booking is committed.

03 / IMAGE_PENDING

Appointment Creation

Desktop interface placeholder

Schedule Engine

Day, week and agenda views provide different operational perspectives while keeping booking creation and appointment management within the same scheduling workflow.

04 / IMAGE_PENDING

Schedule Engine

Desktop interface placeholder

Live Operations

Active appointment controls connect the scheduled booking to real work: starting the appointment, extending it, completing the service and progressing through checkout.

05 / IMAGE_PENDING

Live Operations

Desktop interface placeholder

Upcoming Operations

The operational dashboard surfaces the next appointment and future bookings so the user can prepare for what follows the current service.

06 / IMAGE_PENDING

Upcoming Operations

Desktop interface placeholder

02 / ENGINEERING_PROFILE

01 Role-aware access for administrator and tenant workflows.

02 Reusable scheduling and appointment components across operational views.

03 Conflict-aware appointment creation and editing.

04 Live appointment lifecycle controls from scheduled through checkout.

05 Administrative and staff-management workflows.

06 Operational notifications and appointment extension support.

03 / PROJECT_CONTEXT

Problem

The platform needed to support more than appointment creation: staff schedules, conflicting bookings, active appointments, checkout, time-off, notifications and administrative workflows all needed to operate as one connected workflow.

Solution

Built a Nuxt and Vue frontend backed by a Fastify API, JWT authentication, Prisma data access and reusable scheduling components. The interface separates administrative control from day-to-day tenant and staff operations.

Current State

A Dockerized full-stack system with role-aware access, appointment lifecycle management, scheduling views, conflict detection, operational dashboards, staff administration, notifications, checkout and supporting service workflows.

PRIVATE SYSTEM / CASE STUDY

// PRIVATE_PROJECT / SYSTEM_DOCUMENTATION

Custom Sports Dashboard

Sports Management Platform

A private sports-management platform built to centralise player information, reporting and operational workflows into a dedicated digital dashboard.

STATUS

LIVE

00 / TECHNOLOGY_STACK

Next.js React TypeScript Tailwind CSS Prisma ORM Node.js

00 / SYSTEM_ARCHITECTURE

Next.js / React frontend with TypeScript and Tailwind CSS, backed by a Prisma data layer and structured sports-management workflows.

01 / INTERFACE_FIELD

System Surfaces

ACCESS → ORIENT → BOOK → SCHEDULE → OPERATE → PLAN

Admin Login Page

The administrator entry point provides controlled access to the private sports-management environment before operational workflows become available.

01 / IMAGE_PENDING

Admin Login Page

Desktop interface placeholder

Player Management

Player records are organised into dedicated management surfaces designed for structured access and ongoing administration.

02 / IMAGE_PENDING

Player Management

Desktop interface placeholder

Reports

Reporting functionality provides dedicated surfaces for documenting and reviewing sports-related information.

03 / IMAGE_PENDING

Reports

Desktop interface placeholder

Newsletter System

Newsletter functionality supports the preparation and management of structured sports communication.

04 / IMAGE_PENDING

Newsletter System

Desktop interface placeholder

Invitations

Invitation workflows provide a controlled way to bring participants into the relevant management experience.

05 / IMAGE_PENDING

Invitations

Desktop interface placeholder

Pending Invitation Approval

Pending self-registration requests are presented to the administrator for review, with the ability to approve or decline access before the user enters the management environment.

06 / IMAGE_PENDING

Pending Invitation Approval

Desktop interface placeholder

02 / ENGINEERING_PROFILE

01 Structured player-management workflows.

02 Dedicated reporting surfaces for sports operations.

03 Newsletter management and publication support.

04 Invitation-based interaction workflows.

05 Responsive interfaces designed for practical sports-management use.

03 / PROJECT_CONTEXT

Problem

Sports organisations need more than a public website: player information, reporting, operational records and organisation workflows need to be managed through a structured internal system while remaining distinct from the public-facing experience.

Solution

Built a dedicated full-stack sports management platform with structured operational views, player management, reporting workflows, newsletter functionality and supporting invitation-based interactions.

Current State

A working private sports-management system designed to centralise operational information and provide a focused administrative interface for sports organisations and agencies.

PRIVATE SYSTEM / CASE STUDY

// PRIVATE_PROJECT / SYSTEM_DOCUMENTATION

Sales OS

Sales Intelligence & Outreach Platform

A private sales intelligence and outreach workspace designed to connect prospect research with qualification, decision-maker tracking and actionable sales execution.

STATUS

LIVE

00 / TECHNOLOGY_STACK

React Vite Tailwind CSS Node.js Fastify PostgreSQL JWT Docker Compose n8n

00 / SYSTEM_ARCHITECTURE

React / Vite frontend with Tailwind CSS communicating with a Fastify API, backed by PostgreSQL and JWT authentication. The deployed system sits behind a private Tailscale network and Caddy gateway, with n8n providing the automation boundary.

01 / INTERFACE_FIELD

System Surfaces

ACCESS → ORIENT → BOOK → SCHEDULE → OPERATE → PLAN

Secure Access

The authenticated entry point provides controlled access to the private Sales OS workspace before prospecting and sales workflows become available.

01 / IMAGE_PENDING

Secure Access

Desktop interface placeholder

Sales Dashboard

The operational dashboard brings pipeline activity, work queues, summary information and recommended next actions into a single sales workspace.

02 / IMAGE_PENDING

Sales Dashboard

Desktop interface placeholder

Organisation Workspace

Organisations and reusable people records form the foundation of the prospect model, keeping contacts and sales opportunities connected within the same workflow.

03 / IMAGE_PENDING

Organisation Workspace

Desktop interface placeholder

Research & Qualification

Prospect research is captured as structured information that can support qualification, opportunity context and downstream sales intelligence.

04 / IMAGE_PENDING

Research & Qualification

Desktop interface placeholder

Decision Maker & Scoring

Decision-maker tracking and opportunity scoring help turn researched prospect information into a clearer understanding of the opportunity and its current position.

05 / IMAGE_PENDING

Decision Maker & Scoring

Desktop interface placeholder

Prospect Execution

The execution workflow brings prospect intelligence, available actions, interaction history and the next action together so research can move into practical outreach.

06 / IMAGE_PENDING

Prospect Execution

Desktop interface placeholder

02 / ENGINEERING_PROFILE

01 Reusable organisation and people records supporting connected prospect workflows.

02 Opportunity-specific research and qualification architecture.

03 Research-driven scoring and action intelligence.

04 Decision-maker identification and tracking.

05 Prospecting queues and recommended next actions.

06 Mobile-oriented workflows designed around fast operational execution.

03 / PROJECT_CONTEXT

Problem

Small-business outbound sales can become unnecessarily heavy when research, qualification and follow-up are scattered across generic CRM workflows, spreadsheets and separate notes. The system needed to keep prospect information connected while making common sales actions fast to execute.

Solution

Built a React and Fastify sales workflow application around reusable organisations and people, opportunity-specific research, qualification, scoring, decision-maker tracking and recommended next actions. The interface is designed around focused operational flows rather than a generic CRM data-entry model.

Current State

A working private sales workspace that turns prospect information into a connected workflow from lead capture and research through qualification, decision-maker identification, outreach and the next recommended action.

Tech_Specs

// LINUX

Ubuntu/Debian Server Hardening & Secure Container Infrastructures

// DOCKER

Container Isolation, Microservice Networking, & Environment Portability

// PYTHON

Advanced Scripting, Automation Engines, & Data Processing

// ASTRO FRAMEWORK

Island Architecture, Zero-JS Defaults, & Static Site Generation

// JAVASCRIPT

Asynchronous Event Loops, DOM Engine Logic, & ES6 Pipeline Code

// VUE.JS

Progressive UI Bindings & Options/Composition Architecture

// N8N

Workflow Automation, API Integrations, & Multi-step Process Orchestration

// NODE.JS

Backend Services, REST APIs, Server-side Logic, & Application Runtime Development

// REST API

API Design, Resource-based Services, Authentication, & System Integration

// LINUX

Ubuntu/Debian Server Hardening & Secure Container Infrastructures

// DOCKER

Container Isolation, Microservice Networking, & Environment Portability

// PYTHON

Advanced Scripting, Automation Engines, & Data Processing

// ASTRO FRAMEWORK

Island Architecture, Zero-JS Defaults, & Static Site Generation

// JAVASCRIPT

Asynchronous Event Loops, DOM Engine Logic, & ES6 Pipeline Code

// VUE.JS

Progressive UI Bindings & Options/Composition Architecture

// N8N

Workflow Automation, API Integrations, & Multi-step Process Orchestration

// NODE.JS

Backend Services, REST APIs, Server-side Logic, & Application Runtime Development

// REST API

API Design, Resource-based Services, Authentication, & System Integration

// LINUX

Ubuntu/Debian Server Hardening & Secure Container Infrastructures

// DOCKER

Container Isolation, Microservice Networking, & Environment Portability

// PYTHON

Advanced Scripting, Automation Engines, & Data Processing

// ASTRO FRAMEWORK

Island Architecture, Zero-JS Defaults, & Static Site Generation

// JAVASCRIPT

Asynchronous Event Loops, DOM Engine Logic, & ES6 Pipeline Code

// VUE.JS

Progressive UI Bindings & Options/Composition Architecture

// N8N

Workflow Automation, API Integrations, & Multi-step Process Orchestration

// NODE.JS

Backend Services, REST APIs, Server-side Logic, & Application Runtime Development

// REST API

API Design, Resource-based Services, Authentication, & System Integration

// LINUX

Ubuntu/Debian Server Hardening & Secure Container Infrastructures

// DOCKER

Container Isolation, Microservice Networking, & Environment Portability

// PYTHON

Advanced Scripting, Automation Engines, & Data Processing

// ASTRO FRAMEWORK

Island Architecture, Zero-JS Defaults, & Static Site Generation

// JAVASCRIPT

Asynchronous Event Loops, DOM Engine Logic, & ES6 Pipeline Code

// VUE.JS

Progressive UI Bindings & Options/Composition Architecture

// N8N

Workflow Automation, API Integrations, & Multi-step Process Orchestration

// NODE.JS

Backend Services, REST APIs, Server-side Logic, & Application Runtime Development

// REST API

API Design, Resource-based Services, Authentication, & System Integration

DJANGO //

Secure MVC Architecture, Custom APIs, & Enterprise Logic

MYSQL //

Relational Schema Design, Query Optimization, & Data Integrity

REACT ECOSYSTEM //

Reactive Virtual DOM States & Modular Client Components

FLASK //

Micro-framework APIs & Lightweight Service Deployments

VITE ENGINE //

Fast ESM Dev Server Pipelines & Rollup Bundling

C LANGUAGE //

Low-level Memory Management & Procedural Logic Foundations

NEXT.JS //

Full-stack React Applications, Routing, Server Components, & Production Interfaces

POSTGRESQL //

Relational Data Modelling, Query Design, Data Integrity, & Application Persistence

DJANGO //

Secure MVC Architecture, Custom APIs, & Enterprise Logic

MYSQL //

Relational Schema Design, Query Optimization, & Data Integrity

REACT ECOSYSTEM //

Reactive Virtual DOM States & Modular Client Components

FLASK //

Micro-framework APIs & Lightweight Service Deployments

VITE ENGINE //

Fast ESM Dev Server Pipelines & Rollup Bundling

C LANGUAGE //

Low-level Memory Management & Procedural Logic Foundations

NEXT.JS //

Full-stack React Applications, Routing, Server Components, & Production Interfaces

POSTGRESQL //

Relational Data Modelling, Query Design, Data Integrity, & Application Persistence

DJANGO //

Secure MVC Architecture, Custom APIs, & Enterprise Logic

MYSQL //

Relational Schema Design, Query Optimization, & Data Integrity

REACT ECOSYSTEM //

Reactive Virtual DOM States & Modular Client Components

FLASK //

Micro-framework APIs & Lightweight Service Deployments

VITE ENGINE //

Fast ESM Dev Server Pipelines & Rollup Bundling

C LANGUAGE //

Low-level Memory Management & Procedural Logic Foundations

NEXT.JS //

Full-stack React Applications, Routing, Server Components, & Production Interfaces

POSTGRESQL //

Relational Data Modelling, Query Design, Data Integrity, & Application Persistence

DJANGO //

Secure MVC Architecture, Custom APIs, & Enterprise Logic

MYSQL //

Relational Schema Design, Query Optimization, & Data Integrity

REACT ECOSYSTEM //

Reactive Virtual DOM States & Modular Client Components

FLASK //

Micro-framework APIs & Lightweight Service Deployments

VITE ENGINE //

Fast ESM Dev Server Pipelines & Rollup Bundling

C LANGUAGE //

Low-level Memory Management & Procedural Logic Foundations

NEXT.JS //

Full-stack React Applications, Routing, Server Components, & Production Interfaces

POSTGRESQL //

Relational Data Modelling, Query Design, Data Integrity, & Application Persistence