Technical Specification v3.0

Stephlee
Ecosystem

A proprietary booking engine engineered by Coded Solutions. Merging a high-performance storefront with automated agent intelligence.

TIMELINE

10

WEEKS TO LAUNCH

SAVINGS

60k

KES SAVED YR 1

CORE STACK

MERN + NEXT.JS

SEO ARCHITECTURE

1. Architecture Map

Interactive System Breakdown (Click Segments to Drill Down)

PUBLIC ENGINE
AGENT PORTAL
CLIENT PORTAL

1.1 PUBLIC TOURING ENGINE

A detailed blueprint of the consumer-facing website. Optimized for speed, SEO, and conversion using Next.js.

01

HOMEPAGE (LANDING)

GOAL: INSTANT ENGAGEMENT

  • Hero Video Background (Compressed)
  • Smart Search (Dest, Date, Budget)
  • "Trending Now" Algorithm Grid
  • Trust Signals (Partner Logos)
  • Lead Magnet (Newsletter Pop-up)
02

TOUR LISTINGS

GOAL: DISCOVERY & FILTERING

  • Advanced Filters (Price, Duration)
  • Grid & Map View Toggle
  • Live Availability Badges ("2 Left")
  • Quick View Modal (Hover Effect)
  • Sorting (Price Low-High, Popular)
03

SINGLE TOUR PAGE

GOAL: CONVERSION

  • High-Res Masonry Gallery
  • Day-by-Day Accordion Itinerary
  • "What's Included" Matrix
  • Dynamic Pricing Calculator
  • Sticky "Book Now" Sidebar
04

SECURE CHECKOUT

GOAL: PAYMENT CAPTURE

  • Guest vs. User Login Toggle
  • Traveler Data Forms
  • Secure Passport Upload (Encrypted)
  • M-Pesa STK Push Integration
  • Auto-Invoice Generation (PDF)
05

USER DASHBOARD

GOAL: RETENTION & SERVICE

  • Booking History & Status
  • Download E-Tickets/Vouchers
  • Link to Visa Portal
  • Profile Management
  • Saved Wishlist
PROPRIETARY TECH

1.2 COMPANY PORTAL & AGENT SYSTEM

A dedicated web application for internal management. It acts as the "Uber for Visa Processing," allowing employees to manage clients, track services in real-time, and automate performance data.

THE AGENT-CLIENT HANDSHAKE PROTOCOL

01

TRIGGER

Employee generates a unique "Magic Link" via their dashboard.

portal.stephlee.com/link/EMP_A
02

ONBOARDING

Client clicks link & creates profile. System auto-tags them to Employee A.

03

SERVICE TRACK

Client uploads docs (Passport). Agent updates status: "Submitted to Embassy".

04

RESULT

Client sees real-time progress. Admin sees "Employee A closed deal".

AGENT COMMAND CENTER

  • Performance Analytics (Sales/Leads)
  • "My Clients" CRM List
  • Magic Link Generator
  • Task Manager (Visa/Passport Status)

CLIENT SERVICE HUB

  • Visa Status Timeline (Visual Bar)
  • Document Vault (Secure Uploads)
  • Direct Chat with Assigned Agent
  • Booking History & Invoices

ADMIN OVERSIGHT

  • Automated Commission Reports
  • Staff Leaderboard
  • Global Revenue Analytics
  • User Role Management

1.3 INFRASTRUCTURE & SECURITY CORE

Enterprise-grade reliability. We treat client data (Passports) and payments (M-Pesa) with banking-level security protocols.

🔔

NOTIFICATION ENGINE

Event-driven architecture triggering instant alerts.

  • > Client: "Visa Submitted" (SMS)
  • > Agent: "New Lead Detected" (Email)
🔒

DATA FORTRESS

Protecting sensitive traveler information.

  • > AES-256 Encryption (Passports)
  • > SSL/TLS Handshake (Global)

PERFORMANCE OPS

Speed optimization for global access.

  • > Cloudflare CDN Integration
  • > Next.js Image Optimization

2. ATTRIBUTION LOGIC DEEP DIVE

How do we solve the "Who made the sale?" problem? We use a proprietary digital tracking system that works like a Digital Handshake. Here is the step-by-step process in plain English.

01

THE "MAGIC LINK"

Imagine giving every employee a stack of digital business cards. When an agent shares a tour on WhatsApp, they don't send a normal link. They send a "Magic Link" stamped with their unique ID.

Scenario: Agent sends:
stephlee.com/dubai?ref=JANE_DOE
02

THE 30-DAY MEMORY

When a client clicks that link, our system invisibly "tags" their device. It's like putting a sticky note on their browser that says "Sent by Jane Doe". This note stays stuck for 30 days, even if they close the website and come back next week.

Memory Active 30 DAYS
03

THE AUTO-CREDIT

When the client finally books and pays, the system checks for that sticky note. It sees "Jane Doe" and automatically assigns the commission to her dashboard. No manual reporting required.

Result: Commission -> JANE_DOE_WALLET

3. DATA LIFECYCLE & SECURITY

How we process, store, and protect sensitive traveler information. A fully compliant digital fortress.

STATUS: ENCRYPTED

3.1 THE DATA PIPELINE: FROM CLICK TO STORAGE

01

COLLECTION

Data intake points.

  • > Next.js Forms (React Hook Form)
  • > Zod Schema Validation (Frontend)
  • > Secure File Uploads (Passports)
02

TRANSMISSION

Secure transit layer.

  • > RESTful API / GraphQL
  • > HTTPS (TLS 1.3 Protocol)
  • > JWT Auth Headers
03

STORAGE

Persistent memory.

  • > PostgreSQL (Relational Data)
  • > AWS S3 (Encrypted Docs)
  • > Redis (Fast Caching)
04

RENDERING

Client-side display.

  • > Next.js SSR (Server Side)
  • > Dynamic API Hydration
  • > Real-time Socket Updates

3.2 SECURITY PROTOCOLS

🛡️

AES-256 ENCRYPTION

Applied to sensitive columns (Passport Numbers, Phone Numbers) in the database at rest. Even if the DB is compromised, data remains unreadable.

API RATE LIMITING

Built-in protection against DDoS attacks and bot scraping. Limits requests per IP address to ensure system stability.

3.3 CORE DATABASE SCHEMA

USERS TABLE (Identity) PK: ID
id INT
email VARCHAR (Unique)
role ENUM ('Agent', 'Client', 'Admin')
pass_hash VARCHAR (Argon2)
BOOKINGS TABLE (Finance) FK: RELATIONSHIPS
id INT
user_id INT [FK]
ref_agent_id INT [FK]
status ENUM ('Pending', 'Paid')

4. AGILE ROADMAP

01

FOUNDATION

WEEKS 1-2

  • > Requirement Analysis
  • > UI/UX Wireframing
  • > DB Schema Lockdown
  • > Server Env Setup
02

CORE ENGINE

WEEKS 3-6

  • > Backend API Dev
  • > Agent Logic Build
  • > Auth System (JWT)
  • > Admin Panel Alpha
03

VISUALS

WEEKS 7-8

  • > Frontend Integration
  • > Responsive Polish
  • > Payment Gateway
  • > Email Notifications
04

LAUNCH

WEEKS 9-10

  • > Security Audit
  • > Load Testing
  • > Staff Training
  • > GO LIVE

4.1 WEEKLY EXECUTION LOG

// WEEK 01: FOUNDATION

ARCHITECTURAL FREEZE

The initial phase is critical for long-term stability. We will be finalizing the Entity Relationship Diagrams (ERD) to ensure the database can handle complex relationships between Agents, Clients, and Bookings without redundancy. We will also provision the cloud environment (AWS/DigitalOcean) and set up the Git repositories with strict branch protection rules.

  • Database Schema Normalization (PostgreSQL)
  • Wireframing: Low-Fidelity User Flows
  • DevOps: Server Provisioning & CI/CD Setup
// WEEK 02: VISUALS

DESIGN SYSTEM & PROTOTYPING

We move from wireframes to High-Fidelity Design. Using Figma, we will create a pixel-perfect interactive prototype of both the Public Site and the Agent Portal. This ensures the client can "click through" the application logic before a single line of code is written, saving weeks of potential revisions later.

  • High-Fidelity UI Mockups (Desktop & Mobile)
  • Design System: Typography, Color Palette, Buttons
  • Client Approval: Visual Direction Sign-off
// WEEK 03: BACKEND CORE

SERVER LOGIC INIT

Coding begins. We will initialize the Node.js/Express server architecture. The priority here is Security and Authentication. We will implement JSON Web Tokens (JWT) to handle secure logins for Admins, Agents, and Clients, ensuring that data is completely siloed based on user roles (RBAC).

  • API Architecture: RESTful Endpoints Setup
  • Auth System: JWT Implementation & Password Hashing
  • Database Migration Scripts Execution
// WEEK 04: DATA OPS

CRUD & FILE HANDLING

We will build the logic for Creating, Reading, Updating, and Deleting (CRUD) tours and bookings. Crucially, we will integrate AWS S3 for secure file storage, allowing the system to handle sensitive uploads (Passport copies) with military-grade encryption during transit and rest.

  • Tour Management API (Inventory Logic)
  • Secure File Upload System (AWS S3)
  • Input Validation Middleware (Security)
// WEEK 05: THE ENGINE

AGENT ATTRIBUTION SYSTEM

This is the most complex engineering week. We will code the logic that generates unique cryptographic hashes for agent links and the middleware that detects these links to inject the persistent tracking cookie. We will also write the database triggers that calculate commissions automatically upon payment success.

  • Link Generation Algorithm
  • Cookie Injection Middleware
  • Commission Calculation Logic
// WEEK 06: FRONTEND

NEXT.JS SCAFFOLDING

We shift focus to the user interface. We will initialize the Next.js framework, optimizing for Server-Side Rendering (SSR) to guarantee SEO dominance. We will build the static pages (Home, About) and the dynamic Tour Listing layouts, ensuring they are fully responsive across mobile devices.

  • Next.js Environment Setup
  • Component Architecture (Header, Footer, Cards)
  • Mobile Responsiveness Implementation
// WEEK 07: INTEGRATION

DATA HYDRATION

This week, the "Brain" meets the "Face". We will connect the Frontend to our Backend APIs. Real-time data will start flowing: Tour availability will update live, search filters will query the database instantly, and the Agent Portal will begin displaying real metrics from the test database.

  • API Integration: Connecting React to Node.js
  • Search & Filter Algorithms
  • Real-time Data Fetching Hooks
// WEEK 08: COMMERCE

PAYMENTS & NOTIFICATIONS

We turn the platform into a business. We will integrate the M-Pesa Daraja API for STK Push payments and card gateways. Simultaneously, we will configure the Notification Engine (SendGrid/Twilio) to send automated emails and SMS for booking confirmations and visa status updates.

  • M-Pesa STK Push Integration
  • Card Payment Gateway Setup
  • Email/SMS Notification System Logic
// WEEK 09: QA

SECURITY AUDIT & TESTING

Before launch, we break things to make them stronger. We will conduct stress tests to ensure the server can handle high traffic. We will perform a security audit to patch potential vulnerabilities (SQL Injection, XSS). We will also run a full User Acceptance Testing (UAT) cycle with the client.

  • Penetration Testing & Security Patching
  • Load Testing & Speed Optimization
  • Cross-Browser Compatibility Checks
// WEEK 10: LAUNCH

DEPLOYMENT & HANDOVER

Go Live. We will migrate the production build to the live Cloud Server (AWS/DigitalOcean), install the final SSL certificates for HTTPS security, and perform the final domain mapping. We will also conduct a training session for Stephlee staff on how to use their new Admin and Agent portals.

  • Production Environment Setup
  • SSL Certification & Domain Mapping
  • Staff Training & Documentation Handover

5. Financial Investment

DEVELOPMENT COSTS

Public Tours Engine (Design & Dev) KES 45,000
Agent & Company Portal Logic KES 45,000
Payment Integrations (M-Pesa/Card) KES 20,000
Deployment & Staff Training KES 15,000
TOTAL INVESTMENT KES 125,000
PAYMENT TERMS Milestone-Based Phased Agreement
COMMITMENT FEE Project Kickoff
10%
Amount: KES 12,500
Due: Week 0 (Before Start)
Secures development slot & initiates discovery phase
PHASE 1 PAYMENT Foundation Complete
30%
Amount: KES 37,500
Due: Week 3-4
Database schema & core architecture deployed
Authentication system functional
PHASE 2 PAYMENT Feature Development
30%
Amount: KES 37,500
Due: Week 6-7
Agent portal & client dashboard live
Tour booking engine operational
PHASE 3 PAYMENT Final Delivery
30%
Amount: KES 37,500
Due: Week 10 (Upon Handover)
M-Pesa integration & payment gateway tested
Production deployment & staff training complete
TOTAL PROJECT COST KES 125,000
LIMITED OFFER

OPERATIONAL SAVINGS

Coded Solutions absorbs 100% of the Year 1 operational costs to ensure a risk-free launch.

Cloud Hosting (AWS) KES 30,000
Maintenance & Security KES 20,000
Priority Tech Support KES 10,000
TOTAL SAVINGS KES 60,000 100% FREE FOR YEAR 1

TOTAL YEAR 1 VALUE: KES 185,000  |  YOUR COST: KES 125,000

VALUE ANALYSIS

FREE INFRASTRUCTURE

Coded Solutions absorbs 100% of Year 1 Hosting & SSL costs. Immediate ROI for Stephlee.

SEO DOMINANCE

Next.js architecture ensures top Google Rankings compared to standard WordPress sites.

HR AUTOMATION

Commission tracking runs on autopilot. No more manual spreadsheets.