SynthArchitecture

options to create account
saving architecture or data of generated backend
history tab of user shows all generated architecture
terminal shows problems
user mode
basic backend architecture with developer mode
overload situation
2 server failed so it shows effect on complete backend

Inspiration

As developers, we often design cloud architectures on static drawing boards without immediately knowing how they will perform under stress. We wanted to build an interactive, living canvas where engineers can not only draft full-stack architectures but also immediately simulate disaster scenarios—such as live node outages or sudden traffic spikes—and watch how the system handles the load in real-time.

How we built it

Interactive Canvas: Built with React, TypeScript, and Vite, utilizing modern React state models and lightweight dynamic SVG paths to render an interactive architecture board.
Simulation Engine: Developed a custom, event-driven simulation engine that models real-time traffic routing, active server loads, database queues, and network latency.
Resilience Scoring: Integrated an active grading system that analyzes the drafted layout across four core architectural pillars: Reliability, Security, Performance, and Cost-Efficiency.
Secure User Accounts: Integrated Firebase Authentication supporting Email/Password and Google Sign-In, enabling users to safely save, load, and manage their cloud architecture drafts.

Challenges we faced

Simulating Dynamic Network Loads: Modeling realistic request propagation that visually responds to sudden node failures or massive traffic surges without blocking the main browser thread.
Surgical State Management: Managing deeply nested node layouts and connection lines in React while keeping canvas rendering and drag-and-drop operations running at a fluid 60 FPS.
Robust Authentication Fallbacks: Configuring smooth and intuitive login screens with helpful user guides for authorizing new domains in production environments.

What we learned

How to design sophisticated visual flow builders from scratch using modern SVG coordinate systems.
Best practices in modeling operational metrics, automated failure propagation, and auto-scaling logic programmatically.
Designing responsive, high-contrast user interfaces with polished, professional negative space and modern typography.