An AI-powered educational board game for practicing Architecture/System Design interviews
Sidebar is an interactive web application that transforms system design interview preparation into an engaging, visual experience. Built to bridge the gap between theoretical knowledge and practical interview skills, it provides a realistic simulation environment where engineers can practice designing scalable systems with AI-powered feedback.
Drag-and-drop interface with categorized system components (Network, Security, Compute) for building architecture diagrams
Intelligent chat interface that conducts realistic system design interviews with contextual questioning
Example of a completed system design showing load balancer distributing traffic to multiple web servers connected to relational databases
- Drag-and-drop interface for creating system architecture diagrams
- 30+ system components including Web Servers, Databases, Load Balancers, Message Queues, CDNs, and more
- Real-time connections between components to visualize data flow and relationships
- Categorized components (Compute, Storage, Network, Messaging, Security) for easy organization
- Realistic mock interviews that follow industry standard system design interview patterns
- Context aware questioning based on the components and connections placed on the board
- Progressive interview phases: Requirements Clarification → High Level Design → Deep Dive → Scale & Reliability
- Constructive feedback and performance evaluation with actionable insights
- User authentication and project management
- Persistent storage of board designs and chat history
- Project sharing capabilities for collaboration and review
- Real-time synchronization of board state with AI conversation context
- Structured interview flow following best practices from top tier tech companies
- Multiple difficulty levels from new grad to senior engineer scenarios
- Comprehensive component library covering modern distributed systems patterns
- Performance tracking and improvement suggestions
- React with TypeScript for type safe component development
- Interactive board using modern drag-and-drop React Flow library
- Real-time chat interface with markdown support
- Responsive design for desktop and mobile usage
- Node.js server with RESTful API design
- PostgreSQL database with optimized schema for scalability
- UUID-based primary keys for distributed system compatibility
- JSONB storage for flexible component properties
-- Core entities
Users → Projects → Components/Connections
→ Chat Sessions → Messages
→ Scratch Notes- Contextual prompting system that understands board state
- Interview phase management with appropriate questioning strategies
- Performance evaluation algorithms for constructive feedback
- Start Interview: Choose from various system design problems (URL Shortener, Chat App, Video Streaming, etc.)
- Requirements Phase: AI interviewer asks clarifying questions about scale, features, and constraints
- Design Phase: Build your architecture by dragging components onto the visual board
- Deep Dive: AI probes deeper into specific components and design decisions
- Scale Discussion: Explore how your design handles growth and reliability challenges
- Feedback: Receive detailed performance analysis and improvement suggestions
Compute: Web Server, Microservice, API Gateway, Service Discovery, Circuit Breaker, Health Check
Storage: Database, Cache, Relational DB, Object Storage, In-Memory Cache, Data Warehouse
Network: Load Balancer, CDN, Reverse Proxy, DNS, Firewall
Messaging: Message Queue, Message Broker, Pub/Sub Event Bus, Stream Processing
Security: Authentication Service, Authorization, Rate Limiter, WAF, VPN
Monitoring: Monitoring, Logging, Metrics, Analytics, APM, Real-time Dashboard
- Software Engineers preparing for system design interviews
- Computer Science Students learning distributed systems concepts
- Engineering Teams conducting internal training and knowledge sharing
- Interview Coaches looking for interactive teaching tools
# Clone the repository
git clone https://github.com/yourusername/sidebar.git
# Install dependencies
cd sidebar
npm install
# Set up database
psql -d your_database -f server/db/schema.sql
# Start development server
npm run devWe welcome contributions! Whether it's new system components, interview scenarios, AI improvements, or bug fixes, check out our contributing guidelines to get started.
Built for the engineering community