RepoDesign - System Design Evaluation Platform

A comprehensive platform for designing, visualizing, and automatically evaluating system architectures

Features • Quick Start • Documentation • API • Contributing

---

🎯 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

Variable	Description	Default
SECRET_KEY	Django secret key	Required
DEBUG	Enable debug mode	0
DATABASE_URL	PostgreSQL connection	Required
REDIS_URL	Redis connection	Required
CELERY_BROKER_URL	Celery broker	Required
ALLOWED_HOSTS	Allowed hostnames	localhost
CORS_ALLOWED_ORIGINS	CORS origins	http://localhost:3000

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:

Category	Components
Clients	Web Users, Mobile App, IoT Devices
CDN & Edge	CloudFront, Cloudflare, Fastly, Akamai
Load Balancers	ALB, NLB, HAProxy, Nginx, Envoy
Databases	PostgreSQL, MySQL, MongoDB, Redis, Cassandra
Message Queues	Kafka, RabbitMQ, SQS, NATS
Containers	Docker, Kubernetes, ECS, EKS
Serverless	Lambda, Cloud Functions, Azure Functions
Monitoring	Prometheus, Grafana, Datadog
CI/CD	GitHub Actions, Jenkins, ArgoCD
...	And many more!

🧪 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

---

⬆ Back to Top

Made with ❤️ by the Dwin Gharibi for amazing Repovive