Build systems. Break systems. Learn to think like an architect.
Architech is an interactive system design and software architecture learning platform that turns abstract architecture concepts into hands-on, consequence-driven challenges.
Users build software systems on a visual drag-and-drop canvas, connect components, swap technologies, and watch metrics like cost, scalability, reliability, and latency change in real time. An AI architect then critiques their design, identifies risks, and explains the tradeoffs behind their decisions.
Instead of memorizing the "right" architecture, Architech gives users a space to experiment, make mistakes, and understand why architectural decisions matter.
System design is difficult to learn because most resources are passive. Students can watch lectures, read case studies, or practice interview questions, but rarely get to actually build and break systems themselves.
Architech solves this by:
- Turning system design into an interactive experience
- Letting users visually construct architectures
- Showing the consequences of architectural decisions in real time
- Allowing users to experiment with different technologies
- Identifying architectural risks and failure points
- Using AI to provide contextual feedback
- Reinforcing learning through post-design reviews
-
Drag and drop architecture components onto a visual canvas
-
Connect components to define system flow
-
Curated component library including:
- Frontend
- Backend
- Database
- Cache
- Queue
- CDN
- Load Balancer
- Authentication
-
Configure individual components
-
Save and load architecture designs
-
Display real-time architecture metrics
-
Track:
- Estimated cost
- Scalability
- Reliability
- P95 latency
-
Update metrics as components are added, removed, or connected
-
Highlight potential bottlenecks and risks directly on the architecture
-
Swap the implementation behind any architecture component
-
Compare different technologies and their tradeoffs
-
Example comparisons:
- PostgreSQL vs. MongoDB
- Redis vs. Memcached
-
Recalculate architecture metrics based on implementation choices
-
Help users understand that architectural decisions involve tradeoffs rather than universally "correct" answers
- AI-powered chat sidebar
- Analyze the current architecture and its metrics
- Identify potential risks and failure points
- Ask follow-up questions about design decisions
- Suggest architectural improvements
- Explain tradeoffs between different approaches
- Provide contextual feedback based on the actual architecture
Example:
⚠️ Risk: Payments have no fallback if Stripe becomes unavailable.
- Generate a summary of the completed architecture
- Highlight major design decisions
- Identify key risks and bottlenecks
- Summarize important tradeoffs
- Provide key lessons learned
- Give users a final review of their system
Remove the curated component palette and give users a freeform whiteboard-style environment.
This simulates a real system design interview where users must determine the architecture themselves.
- Paste a GitHub repository URL
- Parse the codebase
- Identify major application components
- Automatically generate an architecture diagram
- Visualize the architecture of a real-world codebase
| Week | Frontend | Backend |
|---|---|---|
| Week 1 | Project setup, Next.js + TypeScript + Tailwind configuration, React Flow setup, initial wireframes for canvas, metrics panel, and AI sidebar | PostgreSQL setup, project/environment configuration, initial database schema |
| Week 2 | Draggable architecture nodes, node connections, component configuration panel, implementation swapping UI | Component library data model, implementation variants, base cost/latency/reliability/scalability values, design save/load CRUD |
| Week 3 | Live metrics panel connected to canvas state, architecture metric displays | Metrics calculation engine, weighted graph model, cost and scalability calculations |
| Week 4 | Visual risk indicators on nodes/edges, real-time metric updates and architecture feedback | Reliability and P95 latency calculations, graph traversal logic, unit tests against reference architectures |
| Week 5 | AI Architect chat sidebar, message UI, streaming responses | OpenAI/Anthropic API integration, structured prompts using graph JSON + architecture metrics |
| Week 6 | AI suggestion UI, "Apply Suggestion" interactions, contextual architecture feedback | Deterministic architecture pre-checks, risk detection, suggested fixes, caching and rate limiting |
| Week 7 | Review/summary screen, onboarding flow, loading and empty states, responsive/accessibility pass | Authentication, metrics engine edge cases, disconnected components/cycles/missing tiers, save/load performance |
| Week 8 | Final UI polish, demo architecture flows, error handling | Integration testing, bug fixes, performance testing, deployment |
| Week 9 | Final demo preparation, presentation polish, rehearsal | Final integration verification, stability testing, demo environment preparation |
- Next.js
- React
- TypeScript
- Tailwind CSS
- React Flow
- Figma
- Node.js
- PostgreSQL
- WebSockets or polling for live metric updates
- OpenAI API or Anthropic API
- GitHub REST API (Reverse Mode)
- GitHub
- VS Code
- Figma
Real-world architecture tradeoffs are highly context-dependent, making it difficult to produce perfectly accurate cost, scalability, reliability, and latency estimates.
Solution:
Use a transparent weighted-scoring model with documented assumptions for each component and connection.
The goal is not perfect real-world accuracy, but directionally correct and explainable estimates that help users understand tradeoffs.
Generic LLM responses can be vague or fail to identify the specific architectural problem in a user's design.
Solution:
Use deterministic pre-checks to identify known architecture issues, such as:
- Single points of failure
- Missing retries
- Missing fallbacks
- Hot database paths
- Disconnected components
The AI receives these structured results alongside the architecture graph and metrics, allowing it to focus on explaining the problem and providing useful feedback.
Metrics need to update quickly as users drag, connect, and modify components.
Solution:
- Keep the metrics engine as a pure function over the graph JSON
- Perform calculations client-side where possible
- Debounce expensive recalculations
- Avoid unnecessary backend requests
- Memoize repeated calculations
To go from zero to building Architech.
- React JS Crash Course – Components, state, props, and building interactive UIs.
- TypeScript React Tutorial – TypeScript fundamentals and integration with React.
- Next.js Tutorial – Routing, layouts, server components, and application structure.
- Tailwind CSS Tutorial – Utility-first CSS and responsive UI development.
- React Flow Tutorial – Build interactive node-based diagrams and workflows.
- Node.js Tutorial – Backend fundamentals, modules, and server-side JavaScript.
- PostgreSQL Full Course – Tables, queries, relationships, and CRUD operations.
- REST API Crash Course – Build APIs for frontend/backend communication.
- WebSockets Tutorial – Real-time communication between clients and servers.
- Learn the fundamentals of distributed systems
- Study common architecture patterns
- Understand scalability and reliability
- Learn about caching, queues, load balancing, and CDNs
- Practice identifying single points of failure
- Compare database and infrastructure tradeoffs
- Study real-world system design case studies
- OpenAI API Tutorial – Learn how to integrate an LLM into an application.
- Learn structured prompting and JSON-based model outputs
- Explore prompt engineering for contextual critique
- Learn how to combine deterministic logic with LLM-generated explanations
- Git & GitHub Crash Course – Version control, branches, commits, and pull requests.
- Git Tutorial – Git fundamentals and collaborative workflows.
- HTML → CSS → JavaScript
- React → TypeScript → Tailwind → Next.js
- Node.js → REST APIs → PostgreSQL
- React Flow → Interactive graph/canvas development
- System design fundamentals → Distributed systems → Architecture patterns
- Graph algorithms → Architecture metrics engine
- OpenAI/Anthropic API → Structured prompting → AI Architect
- WebSockets → Real-time updates
- Git → GitHub → Collaborative development
Built by students through ACM Projects at UT Dallas.