AWS Well-Architected Framework Interactive Showcase & Defense Platform
Engineered & Presented by: Devarsh Patel & Aman Kumar
AWS Certified Solutions Architect Defense & Executive Modernization Blueprint
🌟 Executive Overview
An enterprise-grade, Apple-standard interactive presentation and real-time cloud architecture simulation platform. Built from the ground up to contrast fragile, un-tiered Single Point of Failure (SPOF) Anti-Patterns against resilient, cost-optimized AWS Well-Architected Architectures across 15 mission-critical enterprise domains and all 6 Pillars:
- Operational Excellence
- Security
- Reliability
- Performance Efficiency
- Cost Optimization (FinOps)
- Sustainability
⚡ Core Interactive Features
1. Side-by-Side Architectural Topologies
- Real-time comparative topologies for all 15 domains.
- Interactive component inspection modals with deep-dive technical specs, security policies, cost profiles, and IaC snippets (Terraform HCL).
- Dynamic animated data packet flight streams demonstrating latency deltas.
2. Live Traffic Load Sandbox & Disaster Attack Vectors
- Traffic Load Slider: Dynamically simulate concurrency from 500 to 100,000+ users/sec with instant presets:
Normal (1k): Nominal baseline.Flash Sale (25k): High traffic surge.Black Friday (100k): Extreme peak load.
- 4 One-Click Disaster Injection Vectors:
- 🔴 AZ-a Power Failure: Hardware outage in us-east-1a.
- 🔴 Ransomware Wiper Attack: Malicious deletion vs. S3 Object Lock (WORM).
- 🔴 500k SYN Flood DDoS: Connection exhaustion vs. AWS WAF & CloudFront Edge absorption.
- 🟡 FinOps Bill Shock: On-demand waste vs. Graviton3 ARM Savings Plans.
- Visual Physical Consequences: Fragile server violently shakes (
@keyframes spof-shake), CPU climbs to 99% (OVERHEATED 🔥), latency spikes to 4,800 ms (504 Gateway Timeout), while the Well-Architected cluster dynamically auto-scales Graviton3 container workers (+AUTO-SCALED) across Multi-AZ subnets!
3. Grounded AI Solutions Architect & Copilot (Hotkey: A)
- Grounded in authoritative AWS Well-Architected Whitepapers across the 6 Pillars.
- Domain-Aware Prompt Starters: Dynamic suggestions tailored to the active module.
- Token Streaming Lifecycle: Real-time typing with stop, copy, and clear controls.
- Verified Citations: Traceable whitepaper section quotes and reference IDs (
REL-09, COST-06, SEC-01, PERF-01).
- Two-Phase Human Confirmation Safeguard: Proposes simulated agent remediations with blast radius, cost impact, and requires human sign-off before modifying the live topology.
- Prompt Injection Defenses: Intercepts adversarial overrides and enforces least privilege boundaries.
4. Enterprise AI Governance & Launch-Readiness Inspector (Hotkey: G)
- 12-section compliance audit covering:
- AI Taxonomy (Assisted vs Powered vs Personalized vs Agent)
- Product-First Value Proposition & Metric Baselines
- Non-Negotiable Website Foundations (WCAG 2.2 AA)
- Task-Driven Feature Matrix
- UI Interaction Lifecycle & Two-Phase Confirmations
- Technical Architecture & RAG Pipeline
- Privacy, Security & Injection Mitigations
- Failure Modes & Practical Fixes
- Testing, Red-Teaming & Evaluation
- Telemetry & Analytics
- Practical Delivery Sequence
- Interactive 12-Gate Launch-Readiness Checklist (Real-time 100% Launch Score calculation).
5. Specialized Deep-Dive Labs
- Packet Flight Latency Simulator (
Hotkey: L): Interactive packet flight benchmark.
- Client Workload Solutions (
Hotkey: W): Real-world e-commerce, SaaS, and healthcare case studies with cost-cutting blueprints.
- Subtopic Deep-Dive Labs (
Hotkey: T): RDS Proxy, EBS gp3 IOPS, Aurora Quorum, and S3 Lifecycle simulators.
- Theoretical Foundations Compendium (
Hotkey: K): Academic citations including CAP Theorem, PACELC, Gall's Law, and Amdahl's Law.
- Executive Review & ROI Calculator: Comprehensive HRI audit scoring and multi-year savings forecasting.
- Presentation Deck (
Hotkey: P): A light, 16:9 slide deck of 38 slides. It covers the core theory (six pillars, single points of failure, availability arithmetic, blast radius, RTO/RPO), then each of the 15 modules with a theory slide and a comparison slide. The naive and Well-Architected diagrams sit side by side on one screen. Speaker scripts run about 21 minutes. Each line is in the phone remote, and the deck can be downloaded as a PowerPoint file with the scripts in the speaker notes.
⌨️ Presentation Keyboard Shortcuts
| Shortcut | Action |
|---|
| → / ← | Navigate Next / Previous Module (1 to 15) |
| P | Open the light presentation deck |
| A | Open Grounded AWS AI Architect Copilot |
| G | Open 12-Pillar AI Governance & Launch-Readiness Inspector |
| L | Open Packet Latency & Flight Benchmark Simulator |
| W | Open Client Workload Solutions Explorer |
| T | Open Subtopic Deep-Dive Labs |
| K | Open Theoretical Foundations Compendium |
| S | Toggle Speaker Script & Defense Prompter |
| C | Trigger Multi-AZ Chaos Outage |
| R | Reset Chaos Outage to Nominal State |
| Esc | Dismiss any open modal, or leave the deck for Studio view |
Deep links
?present=1 opens the deck. ?present=1&line=N opens it on spoken line N (counting from 0).
🚀 Running Locally
# 1. Install dependencies
npm install
# 2. Start development server
npm run dev
Visit http://localhost:5173/ in your browser.
🌐 Production Deployment (Vercel)
The platform is continuously deployed to Vercel with global edge CDN distribution, zero cold-starts, and isolated WebRTC remote chunks:
📱 Phone Remote: Connection Requirements
Phones pair with the stage through a QR code and a WebRTC link (PeerJS). The stage must stay reachable for signalling and the phones must reach the stage directly:
- Open the stage on a reachable address. The QR code uses the page you are on.
localhost cannot be opened from a phone, so run npm run dev -- --host and open the Network address it prints, or use the deployed site.
- Same network or a relay. Direct links work on the same Wi-Fi and most home connections. Cellular phones and networks with client isolation need a TURN relay. Set these at build time (for example in
.env.local):
| Variable | Example | Purpose |
|---|
VITE_TURN_URL | turn:turn.example.com:3478 | TURN relay address |
VITE_TURN_USERNAME | presenter | TURN username |
VITE_TURN_CREDENTIAL | secret | TURN credential |
- Automatic recovery. The stage re-registers after a Wi-Fi drop or laptop sleep. Phones show a "Not linked" banner with a Reconnect button while they are not linked, and reconnect on their own after screen lock or a network change.
🛠️ Technology Stack
- Framework: React 19 + TypeScript
- Build Tool: Vite 8 (Ultra-fast HMR and bundle compilation)
- Styling: Vanilla CSS with a light design system: flat white surfaces, hairline borders, no gradients, glows or blur
- Icons: Official Amazon Web Services SVG icon library + Lucide React
- Audio: Native Web Audio API procedural sound synthesizer (Click, Alert, Chime)
- Automated QA: Puppeteer end-to-end verification test suite
👥 Authors & Presenters
