Skip to content

Latest commit

 

History

History
203 lines (163 loc) · 8.88 KB

File metadata and controls

203 lines (163 loc) · 8.88 KB

PrepGuides.dev

Master technical interviews with interactive diagrams and comprehensive guides for cloud computing, containerization, and distributed systems.

🌐 Live Site

Visit prepguides.dev to explore interactive diagrams and interview resources.

🚀 What's Included

Interactive Learning Tools

  • Algorithm Visualizations - 6 interactive algorithm visualizations with real-time performance metrics
    • Sorting Algorithms - 6 sorting algorithms (Bubble, Selection, Insertion, Merge, Quick, Heap)
    • Binary Search Tree - Insert, delete, search, and traversal operations
    • BFS/DFS Graph Traversal - Breadth-first and depth-first search algorithms
    • Trie Operations - Prefix tree with insert, search, and delete operations
    • Dijkstra's Algorithm - Shortest path finding in weighted graphs
    • Dynamic Programming - Knapsack and Longest Common Subsequence problems
  • Kubernetes Request Flow - Complete bidirectional network flow with step-by-step explanations
  • OSI 7-Layer Model - Fundamental networking concepts with detailed layer information
  • Interview Questions - Curated questions for each diagram topic

Technical Topics Covered

  • Algorithms - Sorting, searching, and data structures with live visualizations
  • Kubernetes - Container orchestration, microservices, and cluster architecture
  • Networking - OSI model, TCP/IP, protocols, and network troubleshooting
  • System Design - Scalability patterns, caching strategies, and architecture design
  • Databases - Replication, sharding, ACID properties, and CAP theorem
  • Microservices - Service mesh, API gateways, and distributed systems

🎯 Perfect For

Technical Interview Preparation

  • System Design Interviews - Visual explanations of complex architectures
  • Coding Interviews - Interactive algorithm visualizations
  • DevOps Interviews - Kubernetes and networking concepts
  • Architecture Discussions - Scalability and design patterns

Learning & Understanding

  • Visual Learning - Complex concepts made simple through diagrams
  • Step-by-Step Explanations - Break down complex processes
  • Real-World Examples - Practical scenarios and use cases
  • Interview Practice - Common questions and answers

📊 Interactive Features

Sorting Algorithms Visualizer

  • 6 Algorithms: Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quick Sort, Heap Sort
  • Real-time Metrics: Comparisons, swaps, and execution time
  • Adjustable Parameters: Array size and animation speed
  • Performance Analysis: Time and space complexity for each algorithm

Kubernetes Request Flow

  • Complete Flow: External client → Load balancer → Ingress → Service → Pod
  • Component Explanations: What each component does and why it's needed
  • Troubleshooting Guide: Common issues and debugging strategies
  • Interview Questions: System design and technical deep-dive questions

OSI 7-Layer Model

  • Layer-by-Layer Breakdown: Detailed explanation of each layer
  • Protocol Examples: HTTP, TCP, IP, Ethernet, and more
  • Data Flow Process: How data moves through the layers
  • Troubleshooting Approach: Systematic debugging methodology

🛠️ Quick Start

Local Development

# Clone the repository
git clone https://github.com/prepguides/prepguides.dev.git
cd prepguides.dev

# Start local server
./serve.sh

# Open http://localhost:8000 in your browser

Adding Your Own Content

  1. Add HTML files to the public/diagrams/ directory
  2. Create new pages following the existing structure
  3. Update navigation in index.html
  4. Deploy to Vercel - automatic deployment on push

Documentation and Testing

  • Documentation: All project docs are organized in the docs/ directory
  • Testing: Test files and resources are in the tests/ directory
  • Development: Follow the workflow in docs/development/DEVELOPMENT_WORKFLOW.md
  • Algorithm Development: Use the template in docs/algorithm/ALGORITHM_TEMPLATE.html

🎨 Content Structure

├── index.html              # Main navigation hub
├── algorithms.html         # Algorithm visualizations index
├── kubernetes.html         # K8s request flow diagram
├── networking.html         # OSI model diagram
├── databases.html          # Database concepts (coming soon)
├── microservices.html      # Service architecture (coming soon)
├── system-design.html      # Scalability patterns (coming soon)
├── algorithms/             # Interactive algorithm visualizations
│   ├── sorting.html        # 6 sorting algorithms
│   ├── binary-search-tree.html  # BST operations with explicit positioning
│   ├── bfs-dfs-graph-traversal.html  # Graph traversal
│   ├── trie-operations.html     # Trie data structure
│   ├── binary-heap.html         # Min/Max heap operations
│   ├── dijkstra-algorithm.html  # Shortest path algorithm
│   ├── segment-tree.html        # Range queries and tree construction
│   ├── dynamic-programming.html # DP concepts and examples
│   └── code/                    # Shared code and styles
│       ├── algorithm-layout.css # Generic layout styles
│       ├── code-highlighting.css # Syntax highlighting
│       └── code-execution-sync.js # Code synchronization
├── docs/                   # Project documentation
│   ├── algorithm/          # Algorithm development docs
│   ├── development/        # Development workflow docs
│   ├── testing/           # Testing documentation
│   └── reports/           # Issue reports and fixes
├── tests/                  # Testing files and resources
│   ├── core/              # Core algorithm tests
│   └── visualization/     # UI and visualization tests
└── public/diagrams/        # Static diagrams and resources
    ├── algorithms/
    ├── kubernetes/
    ├── networking/
    └── ...

🚀 Deployment

Vercel (Recommended)

  1. Push code to GitHub
  2. Connect repository to Vercel
  3. Automatic deployment on every push
  4. Custom domain support

Other Platforms

  • Netlify: Drag and drop the folder
  • GitHub Pages: Enable in repository settings
  • Any Static Host: Upload the files directly

🤝 Contributing

We welcome contributions! Here's how you can help:

  1. Add New Diagrams - Create interactive visualizations
  2. Improve Explanations - Make concepts clearer
  3. Add Interview Questions - Expand question banks
  4. Fix Issues - Report bugs or submit fixes
  5. Suggest Topics - What would you like to see?

📈 Roadmap

Phase 1 - Essential (Complete - 6/6 ✅)

  • Sorting Algorithms - 6 sorting algorithms with performance metrics
  • Binary Search Tree - Complete BST operations with explicit left/right positioning
  • BFS/DFS Graph Traversal - Graph traversal algorithms
  • Trie Operations - Prefix tree with D3.js visualization
  • Binary Heap Operations - Min/Max heap with insert, extract, and heapify
  • Dijkstra's Algorithm - Shortest path finding in weighted graphs

Phase 2 - Important (In Progress - 1/4 Complete)

  • Segment Tree - Range queries and tree construction with sum/min/max operations
  • KMP String Matching - Pattern matching with failure function
  • Topological Sort - DAG ordering and dependency resolution
  • Union-Find - Disjoint sets with path compression

Phase 3 - Advanced (Planned)

  • A Pathfinding* - Heuristic search with grid visualization
  • Red-Black Tree - Self-balancing tree with color properties
  • Maximum Flow - Network flow with capacity constraints
  • Convex Hull - Computational geometry algorithms
  • B-Tree Operations - Multi-way trees for database indexing

Other Topics

  • Database Diagrams - Replication, sharding, and indexing
  • Microservices Architecture - Service mesh and API gateways
  • System Design Patterns - Caching, load balancing, and scaling
  • Interactive Quizzes - Test your knowledge

Future Features

  • Dark Mode - Toggle between light and dark themes
  • Search Functionality - Find content quickly
  • User Progress - Track learning progress
  • Mobile App - Native mobile experience

💡 Usage Tips

  1. Study the Complete Flow - Don't just memorize individual components
  2. Practice Explaining - Use the diagrams to practice verbal explanations
  3. Understand Failures - Know what happens when each component fails
  4. Scale Considerations - Think about how systems behave under load
  5. Security Implications - Understand security at each layer

📄 License

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


Built with ❤️ for the developer community

Helping developers excel in technical interviews through visual learning and comprehensive guides.