RepoDesign - System Design Evaluation Platform

🎯 Overview

RepoDesign is the world’s first canvas-based artboard judging system built to help users design, evaluate, and learn system architecture in an interactive way. It features a drag-and-drop interface where users can visually create complex systems using pre-built components, then receive instant automated feedback through advanced evaluation algorithms.

The platform enables hands-on learning through real-world challenges, guiding users to improve scalability, performance, and reliability in their designs. By combining visualization, automation, and education, RepoDesign transforms system design from a theoretical concept into a practical, engaging experience.

• Design system architectures using an intuitive drag-and-drop artboard
• Visualize complex systems with 150+ pre-built infrastructure components
• Evaluate designs automatically with sophisticated judging algorithms
• Learn through guided challenges from real world!
• Embed the artboard in external applications via iframe

🎥 Demo & Highlights

🖼️ Amazing Interactive Artboard

Design complex architectures on a drag-and-drop canvas with real-time connections and intuitive controls.

🧩 150+ Pre-Built Components

Choose from a wide variety of infrastructure components—databases, caches, queues, containers, serverless, and more.

🎮 Playground & Experimentation

Experiment freely in the playground, test ideas instantly, and explore different architectural patterns.

🧪 Automated Judging System

Get instant feedback on scalability, reliability, performance, cost, and best practices using intelligent automated evaluation.

📚 Guided Learning Challenges

Practice real-world system design problems with hints, step-by-step guidance, and reference solutions for faster learning.

📊 Insights & Analysis

Visualize results, receive optimization suggestions, and improve your designs based on detailed scoring and performance insights.

✨ Features

🎨 Interactive Artboard

• Drag-and-drop interface with 150+ components
• Beautiful tech icons for popular services (Redis, Kafka, PostgreSQL, etc.)
• Real-time connection visualization
• Export to PNG, PDF, and JSON
• Responsive design for all screen sizes

🧪 Automated Judging System

• 24+ test types for comprehensive evaluation
• Pattern detection (microservices, event-driven, etc.)
• Cost analysis and optimization suggestions
• Scalability and redundancy checks
• Security vulnerability detection
• Latency estimation

📚 Problem-Based Learning

• Curated system design challenges
• Multiple difficulty levels (Easy, Medium, Hard, Expert)
• Step-by-step hints and guidance
• Reference solutions for learning
• Global leaderboard

🔧 Customization

• Create custom questions with specific requirements
• Define custom test cases and scoring rules
• Lock components for guided exercises
• Set budget constraints
• Configure time limits

🔌 Integration

• RESTful API for all operations
• iframe embedding with postMessage communication
• Webhook support for external integrations
• Organization management

🚀 Quick Start

Prerequisites

• Docker & Docker Compose (recommended)
• Or: Python 3.11+, Node.js 18+, PostgreSQL, Redis

Using Docker (Recommended)

# Clone the repository
git clone https://github.com/your-org/repodesign.git
cd repodesign

# Copy environment file
cp .env.example .env

# Start all services
make quickstart

Access the application:

• User Interface: http://localhost:3000
• Admin Panel: http://localhost:3001
• API: http://localhost:8000/api/v1/

Default credentials:

• Username: admin
• Password: admin123

Manual Installation

# Backend
cd repodesign-core
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install -r requirements.txt
python manage.py migrate
python manage.py seed_data
python manage.py create_sample_questions
python manage.py runserver

# Frontend (in another terminal)
cd repodesign-ui
npm install
npm run dev

# Admin Panel (in another terminal)
cd repodesign-admin
npm install
npm run dev

📦 Project Structure

repodesign/
├── repodesign-core/      # Django backend API
│   ├── artboard/         # Artboard models and API
│   ├── core/             # User management, utilities
│   ├── judging/          # Judging engine and models
│   └── repodesign/       # Django settings
├── repodesign-ui/        # Next.js user interface
│   ├── src/
│   │   ├── app/          # App router pages
│   │   ├── components/   # React components
│   │   ├── data/         # Component and icon data
│   │   └── store/        # Zustand state management
├── repodesign-admin/     # Next.js admin panel
├── docker/               # Docker configurations
├── k8s/                  # Kubernetes manifests
├── docker-compose.yml    # Production compose
└── docker-compose.dev.yml # Development compose

🔧 Configuration

Environment Variables

See .env.example for all options.

📖 API Documentation

Questions API

# List all questions
GET /api/v1/judging/questions/

# Get question details
GET /api/v1/judging/questions/{slug}/

# Submit solution
POST /api/v1/judging/questions/{slug}/submit/
{
  "board_data": {
    "nodes": [...],
    "edges": [...]
  }
}

Artboard API

# List user boards
GET /api/v1/artboard/boards/

# Create board
POST /api/v1/artboard/boards/
{
  "name": "My Design",
  "data": {...}
}

# Get components
GET /api/v1/artboard/components/
GET /api/v1/artboard/categories/
GET /api/v1/artboard/connection-types/

Health Checks

GET /health/          # Liveness check
GET /health/ready/    # Readiness check
GET /health/detailed/ # Detailed status (staff only)

🎨 Available Components

RepoDesign includes 150+ infrastructure components organized in 25 categories:

🧪 Running Tests

# All tests
make test

# Backend tests only
make test-backend
cd repodesign-core && python manage.py test

# Frontend build test
make test-frontend
cd repodesign-ui && npm run build

🚢 Deployment

Docker Compose (Simple)

# Production deployment
docker-compose up -d

# View logs
docker-compose logs -f

Kubernetes (Scalable)

# Apply manifests
kubectl apply -k k8s/overlays/production

# Check status
kubectl get pods -n repodesign

The Kubernetes configuration includes:

• Horizontal Pod Autoscaler (5-50 replicas)
• Pod Disruption Budgets
• Redis Sentinel for HA
• PgBouncer connection pooling
• CDN integration
• Network policies

📊 Architecture

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• React Flow - Interactive node-based editor
• Tailwind CSS - Utility-first CSS framework
• Lucide Icons - Beautiful icon set
• TechIcons - Technology brand icons