An interactive web application that visualizes AWS VPC network architecture and provides comprehensive educational content about AWS networking concepts. Built with React, React Flow, and TypeScript — packaged as a Docker container for easy deployment.
- Interactive VPC Topology Diagram — Zoom, pan, and click through a complete VPC architecture with custom nodes for every AWS networking component (VPC, Subnets, Security Groups, NACLs, Route Tables, NAT Gateway, Internet Gateway, VPC Peering, VPC Endpoints, Elastic IPs, ENIs, Flow Logs, DNS Settings)
- Educational Info Panel — Click any component to view detailed explanations covering purpose, key concepts, configuration options, best practices, and related components
- Packet Flow Simulator — Simulate network traffic step-by-step through the VPC, visualizing how packets traverse Route Tables, NACLs, Security Groups, NAT Gateways, and more
- IP Addressing & CIDR Education — Learn about IPv4 structure, subnet masks, private IP ranges, CIDR notation, and AWS-specific subnet calculations
- Dark / Light Mode — Toggle between themes for comfortable viewing
- Search & Navigation — Sidebar navigation with search to quickly find and focus on any component
- Responsive Layout — Works on screen widths from 1024px to 2560px
docker-compose up -dThe application will be available at http://localhost:8080.
To use a different port:
PORT=3000 docker-compose up -d# Build the image
docker build -t vpc-visualizer .
# Run the container
docker run -d -p 8080:80 --name vpc-visualizer vpc-visualizer- Node.js 22+
- npm
npm installnpm run devnpm run buildnpx vitest --runnpm run lint├── src/
│ ├── components/
│ │ ├── AppShell.tsx # Main layout (sidebar + canvas + info panel)
│ │ ├── VisualizationEngine.tsx # React Flow canvas with custom nodes/edges
│ │ ├── InfoPanel.tsx # Educational content panel
│ │ ├── PacketSimulator.tsx # Packet flow simulation controls
│ │ ├── PacketAnimation.tsx # Animated packet on canvas
│ │ ├── SidebarNavigation.tsx # Component list with search
│ │ ├── nodes/ # Custom React Flow node components
│ │ └── edges/ # Custom React Flow edge components
│ ├── data/
│ │ ├── vpcTopology.ts # Static VPC architecture data
│ │ ├── connections.ts # Network connections between components
│ │ └── educationalContent.ts # Educational content for all components
│ ├── store/
│ │ └── appStore.ts # Zustand state management
│ ├── types/ # TypeScript type definitions
│ ├── utils/
│ │ ├── cidrUtils.ts # CIDR/IP calculation utilities
│ │ ├── layoutUtils.ts # Node positioning logic
│ │ ├── securityGroupEvaluator.ts # Security Group rule evaluation
│ │ ├── naclEvaluator.ts # NACL rule evaluation (ordered)
│ │ ├── routeEvaluator.ts # Route Table evaluation (longest prefix match)
│ │ └── packetPathCalculator.ts # Full packet path calculation
│ └── main.tsx # Application entry point
├── Dockerfile # Multi-stage build (Node → Nginx)
├── docker-compose.yml # Docker Compose configuration
├── nginx.conf # Nginx config with SPA routing & gzip
├── index.html # HTML entry point
├── vite.config.ts # Vite build configuration
└── package.json
| Technology | Purpose |
|---|---|
| React 19 + TypeScript | UI framework with type safety |
| React Flow (@xyflow/react) | Interactive node-based diagram |
| Tailwind CSS | Utility-first styling with dark mode |
| Zustand | Lightweight state management |
| Framer Motion | Packet flow animation |
| react-markdown | Markdown rendering in Info Panel |
| Mermaid | Diagrams in educational content |
| Vite | Build tool with fast HMR |
| Vitest | Unit and property-based testing |
| Nginx (Alpine) | Production static file server |
| Docker | Containerized deployment |