📄 System Design Document
Project: URL Shortener with Logging Middleware
Author: Sameer
Date: 08-Sept-2025
1. Overview
The system is a URL Shortener that:
Converts long URLs into unique short codes.
Handles default and custom expiry.
Tracks statistics (clicks, timestamps, etc.).
Provides a React-based frontend (Material UI) for user interaction.
Uses a custom Logging Middleware (instead of console.log) for monitoring requests and
errors.
Runs exclusively on http://localhost:3000.
2. High-Level Architecture
┌───────────────────────────┐
│ Frontend │
│ (React + Vite + MUI) │
│ - Form for URL shortening │
│ - Stats dashboard │
│ - Error alerts │
└───────────────▲───────────┘
│ HTTP (fetch / axios)
┌───────────────┴───────────┐
│ Backend │
│ (Express.js + Node.js) │
│ - API endpoints (/api/..) │
│ - Redirect handler (/:id) │
│ - Logging Middleware │
│ - Expiry validation │
│ - Stats recording │
└───────────────▲───────────┘
│ DB Access
┌───────────────┴───────────┐
│ Database │
│ (MongoDB / In-memory) │
│ - URL mappings │
│ - Expiry timestamps │
│ - Stats: clicks, IP, time │
└───────────────────────────┘
3. Components
3.1 Frontend (React + Material UI)
URL Shorten Form: Input long URL, expiry (optional), custom shortcode (optional).
Results Display: Show shortened URL with copy option.
Statistics Page: List of all created links with click count, expiry, etc.
Error Handling: Friendly alerts (invalid URL, duplicate code, expired).
3.2 Backend (Express.js)
APIs:
o POST /api/shorten → Create a new short link.
o GET /api/stats/:code → Fetch statistics of a link.
o GET /:code → Redirect to original URL if valid.
Logging Middleware:
o Logs request method, path, timestamp, status code.
o Logs errors separately.
Business Logic:
o Generate unique short codes.
o Validate custom codes.
o Default expiry = 30 minutes.
o Increment click counters on redirects.
3.3 Database (MongoDB / In-Memory for test)
Schema (example with MongoDB):
"shortcode": "abcd1",
"originalUrl": "https://example.com",
"expiry": "2025-09-08T10:00:00Z",
"clicks": 5,
"history": [
{ "timestamp": "2025-09-08T09:30:00Z", "ip": "192.168.0.10" }
4. API Design
4.1 Create Short URL
Endpoint: POST /api/shorten
Body:
"url": "https://example.com",
"expiry": 45,
"shortcode": "custom123"
Response:
"shortUrl": "http://localhost:3000/custom123",
"expiry": "2025-09-08T10:45:00Z"
}
4.2 Redirect to Original
Endpoint: GET /:code
Redirects if valid and not expired.
Returns 404 if not found / expired.
4.3 Get Statistics
Endpoint: GET /api/stats/:code
Response:
"shortcode": "abcd1",
"originalUrl": "https://example.com",
"expiry": "2025-09-08T10:45:00Z",
"clicks": 5,
"history": [
{ "timestamp": "2025-09-08T09:30:00Z", "ip": "192.168.0.10" }
5. Logging Middleware Design
File: Logging_Middleware/index.js
Captures:
o Request method + URL
o Timestamp
o Response status
o Errors (with stack trace)
Example log:
[2025-09-08 14:05:01] POST /api/shorten - 200
[2025-09-08 14:07:10] GET /abcd1 - 302 (redirect)
6. Error Handling
Frontend:
o Invalid URL → "Please enter a valid URL (http/https only)."
o Expired → "This link has expired."
o Shortcode collision → "Custom code already exists."
Backend:
o 400 Bad Request → Invalid input.
o 404 Not Found → Invalid shortcode.
o 409 Conflict → Duplicate shortcode.
7. Non-Functional Requirements
Performance: Redirection in O(1) (hash lookup).
Scalability: Can extend DB from in-memory → Redis/Mongo.
Maintainability: Clear separation between frontend, backend, middleware.
Security: Validate URLs, sanitize inputs, prevent XSS.
8. Future Improvements
Authentication for managing user-specific URLs.
Analytics (location, device, browser).
QR Code generation for shortened URLs.
Dockerization for deployment.
