SOC Showcase: Security Operations Dashboard Demo

[+] Status: Complete [+] Origin: Portfolio Project [+] Date: 2025.01
>> TECH_STACK:
[React][TypeScript][Framer Motion][Tailwind CSS][Recharts][Vite]

SOC Showcase is an interactive Security Operations Center dashboard demonstration. It simulates a live SOC environment with streaming security alerts, incident metrics, and configurable widget layouts. The dashboard generates realistic security events in real time, demonstrating how modern SOC interfaces handle data flow, alert triage, and operational metrics.

The project focuses on two things: realistic SOC workflow representation and polished UI animation. Framer Motion handles smooth transitions for alert arrivals, chart updates, and widget repositioning. The result is a dashboard that looks and feels like a production SOC tool, built entirely as a frontend demonstration.

Open Source

This project is open source and available on GitHub

Live Demo View Repository 21 Commits Star on GitHub

Frontend dashboard with real-time animation and data visualization:

React + TypeScript
UI Framework

Component architecture for modular dashboard widgets with type-safe data models for alerts, incidents, and metrics

Framer Motion
Animation Library

Smooth transitions for real-time data updates, alert notifications, widget resizing, and dashboard layout changes

Recharts
Chart Library

Responsive charts for alert trends, MTTR metrics, severity distributions, and timeline visualizations

Tailwind CSS
Styling

Dark-first design system matching SOC environments with responsive grid layouts and consistent spacing

Data Simulation Realistic Alert Generation
Problem: A static dashboard with hardcoded data does not demonstrate how a real SOC interface handles live data
Solution: Built a configurable alert generator that produces realistic security events: brute force attempts, malware detections, DLP violations, and anomalous login patterns. Events arrive at configurable intervals with randomized but plausible metadata (source IPs, usernames, severity levels)
Result: Dashboard feels alive with streaming data, demonstrating real-time update handling
Animation Framer Motion Data Transitions
Problem: Chart updates and new alert arrivals need visual feedback so analysts can track changes without cognitive overload
Solution: Used Framer Motion's AnimatePresence for alert list updates, layoutId for smooth widget repositioning, and spring animations for chart value transitions. New alerts slide in with severity-coded border flashes
Result: Polished transitions make the dashboard feel responsive and professional without distracting from the data
Dashboard Design Configurable Widget Grid
Problem: Different SOC roles need different dashboard layouts. A manager wants metrics. An analyst wants the alert queue
Solution: Built a drag-and-drop widget grid where users can add, remove, resize, and rearrange dashboard components. Layout preferences persist to localStorage. Pre-built layouts available for common roles (analyst, manager, threat hunter)
Result: Role-adaptive interface demonstrates understanding of SOC workflow differences
Dashboard Design
  • Widget-based layouts
  • Real-time data display
  • Role-based views
  • Responsive grids
Animation
  • Framer Motion patterns
  • Layout animations
  • AnimatePresence
  • Spring physics
Data Visualization
  • Recharts integration
  • Trend analysis charts
  • Severity distributions
  • Timeline views
Security Operations
  • SOC workflow modeling
  • Alert triage interfaces
  • MTTR/MTTD metrics
  • Incident classification
Complete
  • ✓ Real-time alert generation and display
  • ✓ Configurable drag-and-drop widget grid
  • ✓ Framer Motion animated transitions
  • ✓ Recharts metric visualizations
  • ✓ Role-based layout presets
  • ✓ Dark-first responsive design