Next.js 16.0.3 (Static Export)
Styling & UI Components
Zustand 5.0.8
localStorage via Zustand middleware
Next.js provides file-based routing, automatic code splitting, and built-in optimization for images,
fonts, and JavaScript bundles. The static export capability (output: 'export') generates
pure HTML, CSS, and JavaScript that deploys directly to S3 without requiring a Node.js server. TypeScript
integration delivers compile-time type checking and enhanced IDE support, catching errors before deployment.
The framework's optimization pipeline reduces bundle size and improves load times without manual configuration.
AWS S3 (Static Website Hosting)
AWS CloudFront (CDN)
Build & Deploy Workflow:
pnpm build creates optimized static files in out/ directoryaws s3 sync out/ s3://bucket-name --delete uploads files to S3Load Time:
Bundle Size:
Runtime Performance:
The MVP implements single-player gameplay with client-side state management and localStorage persistence. This approach eliminates backend infrastructure requirements during initial development, allowing the team to focus resources on simulation mechanics, game balance, and user experience refinement. Static hosting provides zero-cost scaling and maintenance-free operation, with CloudFront automatically handling traffic distribution globally.
Game logic resides in modular TypeScript utilities that can execute in either browser or Node.js environments. This architecture supports incremental server integration when features like multiplayer, leaderboards, or analytics justify the infrastructure complexity. Client-side state management persists for UI responsiveness while servers add authoritative validation, creating a hybrid model that preserves instant local feedback while preventing exploitation in competitive scenarios.
The simulation operates in discrete turns that represent time periods for infrastructure deployment and operations. This structure reflects how real infrastructure projects progress through phases rather than completing instantly, with build timers ranging from 1-5 turns depending on connection type and complexity. Turn-based progression creates space for strategic planning, requiring players to anticipate future needs and budget constraints rather than reacting to immediate pressures.
The turn system enables sophisticated mechanics like recurring budget cycles (every 5 turns), multi-turn events (outages lasting 2-4 turns), and operational cost spreading (paid over 5 turns). Events can span multiple turns, creating sustained challenges that test whether players built genuinely resilient systems rather than barely-sufficient architectures. Players can consider decisions carefully without time pressure, making the simulation accessible while maintaining strategic depth through resource management and planning challenges.
Zustand provides lightweight state management at 5KB gzipped, handling game state for turns, budget, connections, events, and mission points. The library's minimal API enables direct state updates without actions, reducers, or dispatch patterns, reducing boilerplate and simplifying state mutations for game logic. Built-in persist middleware synchronizes state to localStorage automatically, enabling save/resume functionality with a single configuration option.
The store structure supports complex game state with nested objects (connections, site-to-site links, events) while maintaining simple update patterns. State changes trigger efficient React re-renders through shallow comparison, updating only components that subscribe to modified state slices. The straightforward API accelerates development velocity and simplifies debugging, with state changes visible in browser DevTools and localStorage persistence providing transparent save/load behavior.
Frontend: Next.js static files served via CloudFront CDN, providing global edge caching and automatic scaling. No manual configuration needed—CloudFront handles any traffic volume.
Hosting: S3 + CloudFront automatically scale based on traffic. No server management, no capacity planning, no scaling configuration.
Game Logic: Runs entirely client-side, scaling is automatic (each player's browser handles their own game state).
Code Splitting: Next.js automatically code-splits by route, loading only required JavaScript for each page.
Lazy Loading: Non-critical components (modals, charts) are lazy-loaded to reduce initial bundle size.
Image Optimization: Images optimized and served via CloudFront with proper caching headers.
Bundle Size: ~200-300KB gzipped for initial load (React, game logic, UI components).
Turn Processing: <100ms for full turn processing (build updates, budget, events, throughput calculation, mission points).
State Updates: Zustand triggers efficient React re-renders (only changed components update).
localStorage: Asynchronous writes, non-blocking (doesn't affect UI responsiveness).
Phase 2 (Server-Side Features):
Migration Path: