Skip to content

README.md

Latest commit

 

History

History
155 lines (116 loc) · 10.5 KB

README.md

File metadata and controls

155 lines (116 loc) · 10.5 KB

Distributed Systems Visualizer

Interactive visual simulations for learning distributed systems, with step controls and in-page theory articles.

Distributed Systems Visualizer TypeScript Tailwind CSS

📚 Concepts Covered

Topic Resource
CAP Theorem Brewer keynote (PODC 2000)
Brewer's Conjecture overview
Lamport Clocks Time, Clocks, and the Ordering of Events
Causality and logical clocks (overview)
Vector Clocks Vector clocks (overview)
Vector clocks explained
Chandy-Lamport Snapshot Distributed snapshots (original paper)
Chandy-Lamport walkthrough
Eventual Consistency Dynamo: Amazon's key-value store
Eventually Consistent (Vogels)
CRDTs Conflict-free Replicated Data Types
Comprehensive CRDT study
Gossip & Anti-Entropy Epidemic algorithms for replication (overview)
SWIM membership protocol
Merkle Anti-Entropy Merkle tree overview
Cassandra repair and anti-entropy
Quorum Replication Quorum systems overview
Chain Replication
Replication Log Kafka: log processing paper
The Log (Jay Kreps)
Failure Detectors Unreliable failure detectors (references)
Phi accrual failure detector (implementation notes)
Consistent Hashing Consistent hashing and random trees
Jump consistent hash
Sharding + Rebalancing MongoDB sharding docs
FoundationDB data distribution
Load Balancing Power of two choices (chapter)
Maglev load balancer
Distributed Locking Chubby lock service
ZooKeeper
Two-Phase Commit (2PC) Two-phase commit notes
Consensus on transaction commit
Distributed Transactions Sagas
Life Beyond Distributed Transactions
Network Partitions FLP impossibility
Partial synchrony (DLS)
Paxos Paxos Made Simple
The Part-Time Parliament
Raft Consensus Raft paper
Raft project site
Consensus Variants Paxos Made Live
EPaxos
PBFT Practical Byzantine Fault Tolerance
HotStuff (modern BFT)

🚀 Getting Started

Prerequisites

  • Bazelisk (uses Bazel 9.0.0 via .bazelversion)

Installation

  1. Clone the repository:
git clone https://github.com/sandeepkv93/distributed-systems-visualizer.git
cd distributed-systems-visualizer
  1. Run the development server:
bazelisk run //:dev -- "$PWD"
  1. Open http://localhost:3000 in your browser

Building for Production

bazelisk build //:site_export

This generates a static export ready for deployment to GitHub Pages or any static hosting service. The exported site is emitted as Bazel output label //:site_export and materialized at bazel-bin/out/.

🎯 Usage

  1. Pick a topic from the home page or Topics menu.
  2. Choose a scenario or use manual controls.
  3. Use "Read the theory" for the long-form article.

Export & Share

Export your visualizations in multiple formats:

  • PNG Export: High-quality 2x resolution images perfect for presentations
  • SVG Export: Scalable vector graphics for editing and scaling
  • JSON Export: Save the current state as JSON for analysis
  • Share: Use the system share dialog to share via email, messages, etc.
  • Copy Link: Copy the current page URL to clipboard
  • Copy State: Copy the current state data to clipboard

Click the "Export" button in any concept visualizer to access these options.

Progress Tracking

Track your learning journey:

  • View Progress: Click the "Progress" button in the top navigation
  • Achievements: Unlock milestones by completing scenarios and concepts
  • Statistics: See your total time spent and completion percentages
  • Export/Import: Backup your progress or transfer it between devices

🏗️ Architecture

Tech Stack

  • Framework: Next.js 16 (App Router)
  • Language: TypeScript (strict mode)
  • Styling: Tailwind CSS
  • Animations: Framer Motion
  • Icons: Lucide React

Adding New Concepts

  1. Create algorithm implementation in lib/algorithms/
  2. Create scenarios in visualizers/your-concept/
  3. Create page in app/your-concept/
  4. Update navigation in components/Navigation.tsx

🎨 Color Scheme

Node states are color-coded:

  • 🟢 Green: Healthy nodes
  • 🔴 Red: Failed nodes
  • 🟠 Amber: Processing/Candidate
  • 🔵 Blue: Leader
  • 🟣 Purple: Special states

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

This project is open source and available under the MIT License.

Made with ❤️ for the distributed systems community