Architecting Fault-Tolerant Systems for 20K+ Concurrent Users

System Challenge: Building distributed systems that maintain sub-100ms response times across 20K+ concurrent users while ensuring 99.9% uptime during network partitions and service failures.

---

Systems Architecture Overview

Failure-First Design Philosophy: Every system component is architected with the assumption that failures will occur. What happens when payment gateways fail during Black Friday traffic? When authentication services crash under 10K simultaneous login attempts? When network partitions split distributed systems?

Scale-Proven Solutions:

1. High-Throughput Fintech Processing: Engineered M-Pesa integration handling 50K+ transactions/hour with idempotency guarantees and saga pattern for distributed payment consistency
2. Fault-Tolerant AI Infrastructure: Deployed voice processing system serving 20K+ concurrent users with circuit breaker patterns and graceful degradation to text-only mode during service failures

CAP Theorem Applications: Strategic trade-offs between Consistency, Availability, and Partition tolerance based on system requirements - choosing AP for real-time chat (eventual consistency acceptable) vs CP for financial transactions (strong consistency required).

Production Resilience Metrics:

• 99.9% Uptime across distributed microservices architecture
• Sub-100ms Response Times under 20K+ concurrent load
• Zero Data Loss during network partitions through eventual consistency patterns
• Automatic Failover with <30 second recovery time across AWS regions
• Horizontal Scaling from 1K to 50K+ users without architectural changes

Architectural Guarantee: Systems designed with failure-first principles. If architectural decisions cause production issues within 30 days, I provide immediate remediation at no cost - because robust systems thinking prevents failures before they occur.

---

QR Code Generator

Generate QR codes for easy sharing of the portfolio with employers and clients.

Features:

• Clean, centered interface for professional presentation
• Generate QR codes for any URL
• Download as SVG or PNG
• Share directly via Web Share API
• Optimized for mobile scanning

Access: https://owuorvincent.vercel.app/qr

---

Secure QR Code System Architecture

Create Short Link Flow

sequenceDiagram
    participant User
    participant PWA as Frontend (PWA)
    participant API as Backend API
    participant DB as Database

    User->>PWA: Click "Share QR"
    PWA->>API: POST /api/shorten { targetUrl, ttl }
    API->>API: Validate targetUrl (whitelist)
    API->>API: Rate Limit Check
    API->>DB: Insert short_links (id, target, expiry)
    DB-->>API: Returning id
    API->>API: Compute HMAC signature
    API-->>PWA: Return { shortUrl: "https://s.owuorvincent.vercel.app/id.sig" }
    PWA->>PWA: Generate QR SVG
    PWA-->>User: Display QR / Web Share

Loading

Redirect Flow

sequenceDiagram
    participant User as User (Phone)
    participant API as Backend API
    participant DB as Database

    User->>API: GET /:id.:sig
    API->>API: Parse id, sig
    API->>DB: SELECT * FROM short_links WHERE id = :id
    DB-->>API: Link Record
    alt Link Not Found / Expired / Revoked
        API-->>User: 404/410 Error Page
    else Link Valid
        API->>API: Re-compute HMAC (id|target|expiry)
        API->>API: Constant-time Compare(sig, computed_sig)
        alt Signature Invalid
            API-->>User: 403 Forbidden (Tampering Detected)
        else Signature Valid
            API->>DB: INSERT INTO link_scans (Async)
            API-->>User: 302 Redirect -> targetUrl
        end
    end

Loading

---

System Architecture: The AI Voice Agent

This is not a static site. The application features a Generative AI layer deeply integrated into the React frontend, now enhanced with a hybrid voice architecture.

• Intelligence Engine: Google Gemini Pro API.
• Voice Architecture: Hybrid implementation using Web Speech API for low-latency Speech-to-Text (STT) and Text-to-Speech (TTS), combined with Gemini for semantic understanding.
• Backend: Backend-for-Frontend (BFF) pattern using Vercel Edge Functions.
• Context Injection: The AI is system-prompted with my full Resume, "Zero Risk" guarantee, and technical project details.

Chat with the AI Agent Live: https://owuorvincent.vercel.app/

---

Tech Stack & Engineering

Cloud & DevOps (The Heavy Lifting)

• AWS: Lambda (Serverless), Rekognition (AI Vision), VPC (Networking), EC2.
• IaC: Terraform for reproducible infrastructure.
• Oracle: OCI Certified Foundations & AI integration.
• CI/CD: GitHub Actions pipelines.

Full-Stack & Fintech

• Frontend: React 19, TypeScript, Framer Motion.
• Voice Engineering: Web Speech API, Custom React Hooks (useSpeechRecognition, useSpeechSynthesis).
• Backend: Node.js/Express (Microservices) & ASP.NET MVC.
• Payments: M-Pesa Daraja API (STK Push, Callback handling, OAuth).

---

Featured Case Studies

1. AI Voice Assistant Implementation

• Challenge: Creating a natural, hands-free conversational interface without incurring high latency or third-party audio API costs.
• Solution: Built a custom React hook system to bridge the browser's native SpeechRecognition and SpeechSynthesis APIs with the Gemini LLM.
• Key Features:
  • Bi-directional Communication: Users can speak to the bot and hear responses aloud.
  • Auto-Send Logic: Detects natural pauses in speech to automatically trigger submission.
  • Visual Feedback: Real-time visualizers for "Listening," "Thinking," and "Speaking" states.
• Stack: React 19, Web Speech API, TypeScript.

2. M-Pesa E-commerce Integration

• Challenge: Implementing robust payment processing in a region with high transaction failure rates.
• Solution: Built a direct integration with Safaricom's Daraja API handling STK Pushes and async callbacks.
• Stack: React 18, Express.js, Daraja API.

3. AWS 3-Tier Web Infrastructure

• Challenge: Manual deployment led to configuration drift and security gaps.
• Solution: Automated the entire stack using Terraform. Deploys VPCs, Subnets, and EC2 instances with a single command.
• Stack: Terraform, AWS VPC, AWS EC2.

---

Key Features

Advanced AI Voice Mode (New)

• Full Conversational AI: Users can switch between typing and speaking modes seamlessly.
• Auto-Read Capabilities: The agent automatically vocalizes responses when Voice Mode is active.
• Playback Controls: Users can pause, resume, or stop the audio response at any time.
• Smart Visuals: Dynamic animations indicate when the microphone is active or when the agent is processing.
• Markdown Stripping: Custom logic cleans formatting (markdown, bolding, bullet points) from the text before synthesis to ensure natural-sounding speech.

Premium Design System

• Warm Color Palette: Sophisticated amber/orange theme with cream backgrounds.
• Professional Animations: Elegant particle network with smart visibility controls.
• Typography Excellence: Pure black text on warm backgrounds for maximum readability.

Technical Excellence

• Modern React 19: Latest features with TypeScript integration.
• Performance Optimized: 95+ Lighthouse scores across all metrics.
• Accessibility First: WCAG 2.2 AA compliant with excellent contrast ratios.

---

Project Structure

The application follows a modular architecture with clear separation of concerns:

src/
├── components/         # Reusable UI components
│   ├── Chatbot/       # AI Agent interface
│   ├── Navigation/    # Site navigation
│   └── StatsCounter/  # Animated statistics
├── sections/          # Main page sections
│   ├── Hero/          # Landing section
│   ├── Guarantee/     # Zero Risk guarantee
│   ├── Projects/      # Project showcase
│   ├── Skills/        # Technical skills & certifications
│   ├── Services/      # Service offerings
│   ├── Testimonials/  # Client testimonials
│   └── Contact/       # Contact information
├── hooks/             # Custom React hooks
├── styles/            # Global styles and design tokens
├── services/          # External API integrations
└── lib/               # Utility functions and helpers

Key Features

Premium Design System

• Warm Color Palette: Sophisticated amber/orange theme with cream backgrounds
• Professional Animations: Elegant particle network with smart visibility controls
• Typography Excellence: Pure black text on warm backgrounds for maximum readability
• Responsive Grid Layouts: Optimized card layouts across all devices
• Consistent Styling: SCSS design tokens across all components

Advanced UI/UX

• Smart Particle System: Professional network animation excluding footer areas
• Seamless Interactions: Smooth hover effects and micro-animations
• Accessibility First: WCAG 2.2 AA compliant with excellent contrast ratios
• Mobile Optimized: Perfect responsive behavior across all devices
• Loading Experience: Custom warm-themed loading screen

AI & Voice Assistant Features

AI & Voice Assistant Features

→ Voice Input & Output: Users can speak AND hear responses
→ Auto-Read with Controls: Automatically speaks responses when in voice mode; pause/stop anytime
→ Professional Voice: Female UK/US English voice for clear, natural speech
→ Visual Indicators: Animated mic icon when listening, speaking animation, clear status updates
→ Speech-to-Text: Real-time transcription of user speech
→ Text-to-Speech: Bot reads answers aloud naturally
→ Auto-send: Detects when user stops speaking (1.5-second pause detection)
→ Clean Speech: Strips markdown formatting for natural delivery
→ Playback Controls: Pause/Stop while bot is speaking
→ Mobile-friendly: Works seamlessly on phones and tablets

User Flow:

1. Click 🎤 Voice button
2. Mic animates: "Listening..."
3. Speak question naturally
4. Real-time transcription appears
5. Message auto-sends after pause
6. Bot shows "Thinking..."
7. Response appears + auto-reads aloud
8. Sound icon animates: "Speaking..."
9. User can click ⏸️ Pause or ⏹️ Stop anytime
10. Toggle back to typing anytime

---

Technical Challenges Solved

Challenge 1: File Corruption

• Problem: Multi-edit approach corrupted Chatbot.tsx
• Solution: Used wrapper component pattern
• Benefit: Preserved original chatbot; easy rollback

Challenge 2: Markdown in Speech

• Problem: Bot was saying "asterisk asterisk bold text asterisk asterisk"
• Solution: Added stripMarkdown()
• Result: Natural speech

Challenge 3: Auto-send Timing

• Problem: Detecting when user finished speaking
• Solution: 1.5-second pause detection
• Result: Natural conversation flow

Development Metrics:

• New Files Created: 4
• Lines of Code Added: ~1,200
• Modified Files: 2
• Development Time: ~2 hours
• Cost: $0 (Web APIs)
• Browser Support: 95%

---

Recent Updates (Latest Release)

• Premium Warm Design: Complete color system overhaul
• Professional Animations: Smart particle network
• Enhanced Readability: Pure black text on optimized backgrounds
• Zero Risk Guarantee: New section added
• AI Chatbot Branding: Orange/peach theme
• Navigation Improvements: Resume link + Hire Me CTA
• Stats Update: Accurate project counts
• Footer Cleanup: Streamlined professional appearance
• Voice Assistant Features: Full conversational AI with TTS/STT

---

Learning Outcomes

Demonstrates proficiency in:

1. Modern React Development: Functional components, hooks, Context API, custom hooks
2. Advanced Styling Techniques: CSS-in-JS, design system, responsive patterns
3. Performance Optimization: Bundle size, rendering, loading strategies
4. Cloud Deployment: CI/CD pipelines, environment management
5. Accessibility & Best Practices: Semantic HTML, keyboard navigation, screen reader support
6. AI Integration: Gemini API, context-aware conversational AI, secure key management

---

Deployment

The application is deployed on Vercel with continuous integration through GitHub Actions. Each push to the main branch triggers automated build and deployment.

Live Site: https://owuorvincent.vercel.app/

---

License

© 2025 Vincent Omondi Owuor. All rights reserved.
This code is proprietary and cannot be used, copied, modified, or distributed without explicit permission.

---

Contact

For inquiries or collaboration opportunities:

• Email: owuorvincent069@gmail.com
• LinkedIn: Vincent Owuor
• GitHub: owuorviny109
• Portfolio: https://owuorvincent.vercel.app/

Or open an issue in the GitHub repository.