LiteCDN - Educational Content Delivery Network with GUI Dashboard

A lightweight, educational CDN implementation with built-in web-based GUI dashboard for monitoring and testing.

What's Included

Core CDN System

Origin Server (Port 4000) - Serves static content
3 Edge Servers (Ports 3001-3003) - Caching layer with round-robin routing
CDN Gateway/Router (Port 3000) - Main entry point with reverse-proxy

NEW: Interactive GUI Dashboard 🎉

Real-time test execution (Load, Cache, Routing tests)
Beautiful charts & visualizations using Chart.js
System status monitoring with metrics
Professional web interface with responsive design

Features

System Features

✓ Round-Robin Routing - Distributes requests evenly
✓ Edge Caching - Caches content locally
✓ Deterministic Behavior - Predictable routing for testing
✓ Multi-Origin Support - Connect edges to origin servers

Dashboard Features

✓ Load Distribution Chart - Bar chart showing requests per edge
✓ Cache Status Chart - Doughnut chart for hit/miss ratio
✓ Routing Accuracy Chart - Verification of round-robin
✓ System Status Panel - Shows active edges and URLs
✓ Test Metrics - Real-time performance data
✓ Detailed Results - Full test logs and data

Quick Start

Prerequisites

Node.js ≥ 16
npm (comes with Node.js)

Installation

cd LiteCDN
npm install

Start the System

npm run start:all

Access the Dashboard

Open your browser:

http://localhost:3000/dashboard.html

Using the Dashboard

1. Load Test

Tests load balancing across 3 edges

Sends ~100 concurrent requests
Shows request distribution
Displays balance metrics
Expected: ~33 requests per edge

2. Cache Test

Verifies caching behavior

Tracks cache hits vs misses
Shows hit rate percentage
First request = MISS, subsequent = HIT
Expected: >50% hit rate

3. Routing Test

Validates round-robin routing

Verifies deterministic sequence
Checks accuracy percentage
Each request goes to next edge in order
Expected: 100% accuracy

Project Structure

LiteCDN/
├── backend/
│   ├── config.js              # Configuration (ports, URLs)
│   ├── cdn.js                 # CDN Gateway with API endpoints
│   ├── testAPI.js             # Test runner for dashboard
│   ├── routing.js             # Round-robin routing logic
│   ├── edge/edge.js           # Edge server with caching
│   └── origin/origin.js       # Origin server
├── frontend/
│   ├── dashboard.html         # GUI Dashboard (NEW!)
│   ├── index.html             # Basic interface
│   └── styles.css
├── scripts/
│   └── startAll.js            # Launcher script
├── testing/
│   ├── testCache.js           # Cache testing
│   ├── testLoad.js            # Load testing
│   ├── testRouting.js         # Routing testing
│   └── testZipf.js            # Zipf distribution test
├── GUIDE.md                   # Basic guide
├── DASHBOARD_GUIDE.md         # Dashboard usage guide
├── GUI_IMPLEMENTATION.md      # Implementation details
└── package.json

Dashboard UI

Color Scheme

Gradient Background: Purple (#667eea → #764ba2)
Status Green: #48bb78 (healthy)
Status Red: #f56565 (error)
Status Yellow: #feebc8 (warning)

Responsive Design

Works on desktop (full layout)
Works on tablet (2-column)
Works on mobile (single column)

Example Outputs

Load Test

{
  "distribution": {
    "Edge-1": 34,
    "Edge-2": 33,
    "Edge-3": 33
  },
  "summary": {
    "totalRequests": 100,
    "imbalancePercent": 3.45,
    "status": "Balanced ✓"
  }
}

Cache Test

{
  "summary": {
    "hits": 24,
    "misses": 6,
    "hitRate": "80.0%",
    "status": "Good ✓"
  }
}

Routing Test

{
  "summary": {
    "totalRequests": 12,
    "correctCount": 12,
    "accuracy": "100.0%"
  }
}

API Endpoints

Content Delivery

GET /cdn/<path>     → Route request through CDN
GET /health         → Check gateway status
GET /status         → Get system status (edges, index)

Dashboard/Testing

GET /api/tests/load         → Run load test
GET /api/tests/cache        → Run cache test
GET /api/tests/routing      → Run routing test
GET /dashboard.html         → Dashboard UI

Testing

Manual Testing (without dashboard)

# Terminal 1 - Start system
npm run start:all

# Terminal 2 - Run individual tests
node testing/testLoad.js
node testing/testCache.js
node testing/testRouting.js
node testing/testZipf.js

Automated Testing (with dashboard)

Start system: npm run start:all
Open: http://localhost:3000/dashboard.html
Click test buttons for live results

What Each Component Does

Origin Server (Port 4000)

Stores master copies of content
Serves requests from edge caches when miss occurs
Static files: hello.txt, data.json, sample.txt

Edge Servers (Ports 3001-3003)

Local caching layer
Serves cached content (HIT)
Falls back to origin on cache miss (MISS)
Round-robin distributed by gateway

CDN Gateway (Port 3000)

Main entry point for clients
Implements round-robin routing
Routes requests to appropriate edge
Serves dashboard UI and API

Dashboard Features in Detail

System Status Panel

Shows:

Number of active edges
Current round-robin index
Edge URLs and ports
Auto-detected on first load

Test Summary Panel

Displays quick results:

Load test: Balanced/Imbalanced
Cache test: Hit rate %
Routing test: Accuracy %

Interactive Charts

Load Distribution (Bar Chart)
- Requests per edge
- Balance metrics
- Hover for details
Cache Status (Doughnut Chart)
- Hit vs miss ratio
- Percentages
- Color-coded (green/red)
Routing Accuracy (Bar Chart)
- Correct vs incorrect routes
- Accuracy percentage
- Pass/fail indication

Detailed Results Table

Timestamp for each request
Edge ID
Cache status (HIT/MISS)
Response time
Searchable and sortable

Configuration

Edit backend/config.js to change:

Gateway port (default: 3000)
Edge server ports (default: 3001-3003)
Origin server URL (default: http://localhost:4000)

module.exports = {
  cdn: { port: 3000 },
  edges: [
    { id: 'Edge-1', port: 3001 },
    { id: 'Edge-2', port: 3002 },
    { id: 'Edge-3', port: 3003 },
  ],
  origin: { port: 4000 },
};

Troubleshooting

Dashboard won't load

Ensure npm run start:all is running
Check port 3000 is available
Try full URL: http://localhost:3000/dashboard.html

Tests show errors

Verify all servers started successfully
Check console (F12 → Console) for errors
Ensure no ports are blocked

Charts not rendering

Clear browser cache
Refresh the page
Check if Chart.js loaded (F12 → Network)

Load imbalance detected

This is normal for small samples
Run load test multiple times
Check if one edge is slower

Documentation

GUIDE.md - Basic setup guide
DASHBOARD_GUIDE.md - Complete dashboard usage
GUI_IMPLEMENTATION.md - Technical implementation details
DASHBOARD_VISUAL_REFERENCE.md - Visual layout reference

Learning Objectives

This project demonstrates:

✓ CDN architecture and round-robin routing
✓ Edge caching and hit/miss behavior
✓ Load distribution and balancing
✓ Reverse proxy implementation
✓ REST API design
✓ Real-time web dashboards
✓ Data visualization with charts

Security Notes

This is an educational project not for production
No authentication or authorization
No data encryption
Use only in trusted networks
No sensitive data handling

Dependencies

{
  "axios": "^1.7.0",      // HTTP client
  "express": "^4.21.0",   // Web framework
  "cors": "^2.8.5"        // CORS middleware
}

Frontend uses:

Chart.js (via CDN) - Easy charting
HTML5 - Modern web standards
CSS3 - Responsive design

Performance

Typical test results:

Load Test: 5-10 seconds (100 requests)
Cache Test: 2-5 seconds (12 requests)
Routing Test: 1-3 seconds (12 requests)
Dashboard rendering: <500ms

Features Showcase

What Makes This Cool

Beautiful UI - Modern gradient design with smooth animations
Real-time Tests - Run tests directly from browser
Smart Charts - Auto-scaling visualizations
Live Updates - No page reloads needed
Responsive - Works on all devices
Educational - Learn CDN concepts interactively

Support

For issues or questions:

Check the documentation files
Review browser console (F12)
Check server logs in terminal
Verify all servers are running

License

Licensed under MIT License

Educational Value

This CDN implementation is perfect for learning:

How CDNs distribute content
How round-robin routing works
How edge caching improves performance
How to monitor distributed systems
How to build web dashboards
Real-time data visualization

Start learning: npm run start:all → http://localhost:3000/dashboard.html

Name		Name	Last commit message	Last commit date
backend		backend
frontend		frontend
production		production
scripts		scripts
testing		testing
.gitignore		.gitignore
Dockerfile		Dockerfile
GUIDE.md		GUIDE.md
LICENSE		LICENSE
README.md		README.md
docker-compose.yml		docker-compose.yml
metrics.csv		metrics.csv
package-lock.json		package-lock.json
package.json		package.json

Latest commit

History

Folders and files

Repository files navigation