ShortStream Analytics

Next-Gen URL Shortening & Real-Time Analytics Platform

Features • Architecture • Getting Started • Roadmap

---

🚀 Overview

ShortStream is not just another URL shortener. It is a high-performance System Design Simulator and Analytics Dashboard. While running entirely in the browser for demonstration purposes, it faithfully simulates a production-grade backend architecture involving Redis Write-Through Caching, PostgreSQL Persistence, and Asynchronous Analytics Pipes.

"A masterclass in modern web architecture, visualized."

---

✨ Features

⚡ Ultra-Low Latency Redirects

Simulating a "Hot Path" architecture where 99% of read traffic hits the cache layer.

• Cache Hit (Redis): <50ms latency (simulated)
• Cache Miss (DB): ~800ms latency (simulated)

📊 Real-Time Analytics

Visualize your reach with stunning, interactive charts.

• Click Velocity: Track spikes in traffic instantly.
• Device Breakdown: Detailed user agent parsing.
• Geolocation Estimates: IP-based region tracking simulation.

🛡️ Robust Validation

Enterprise-grade URL validation logic.

• Support for http, https, and localhost for dev testing.
• Smart protocol appending (automatically adds https:// if missing).
• Malicious pattern detection.

🧩 Interactive Backend Inspector

Unique "Glass Box" mode lets you see the code that would be running on the server.

• View actual Prisma Schemas.
• Inspect Redis Controller logic.
• Review Docker Compose configurations.

---

🏗️ Architecture

ShortStream simulates a dual-layer storage strategy maximizing read throughput.

graph TD
    User[User Clicks Link] -->|Get /:shortCode| API{API Gateway}
    API -->|1. Check Cache| Redis[(Redis Cache)]
    Redis -->|Hit| Redirect[Redirect 302]
    Redis -->|Miss| DB[(PostgreSQL DB)]
    DB -->|Found| CacheWrite[Write to Redis]
    CacheWrite --> Redirect
    Redirect -.->|Async| Analytics[Analytics Service]
    Analytics -->|Batch Write| DB

Loading

1. Read Path: First lookup is always against the in-memory store.
2. Write Path: New URLs are persisted to Disk (DB) immediately.
3. Analytics Path: Decoupled from the critical request path to ensure zero latency penalty for users.

---

💻 Tech Stack

• Frontend: React 19, TypeScript
• Styling: Tailwind CSS, Lucide Icons
• Visualization: Recharts
• Build Tool: Vite
• Deployment: Netlify

---

🛠️ Getting Started

Prerequisites

• Node.js 18+
• npm 9+

Installation

1. Clone the repository

   git clone https://github.com/yourusername/shortstream-analytics.git
   cd shortstream-analytics

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000 to see the app in action.

---

📸 Screenshots

Dashboard	Analytics

(Note: Replace with actual application screenshots)

---

_{Built with ❤️ by AMER. Distributed under the MIT License.}