ExposureMap – Frontend Case Study

A cyber‑punk style diagnostics cockpit: 3D globe, scan‑line overlays, glowing glass panels, and a live terminal — all orchestrated entirely from the frontend.

This project is designed first as a visual experience: a cinematic 3D cyber planet, layers of “cyber glass” UI, an operator‑style data layout, and micro‑interactions that make the dashboard feel like a live console.

Underneath that surface, the app is a frontend‑only exploration of advanced browser APIs, live telemetry visualizations, and 3D experiences in React, structured as an interactive control center that analyzes the runtime environment and surfaces privacy and security signals in real time.

---

1. Visual Experience and Frontend‑Driven UX

The experience is intentionally visual and immersive: a rotating React Three Fiber planet in the background; layered glass panels with neon accents; a streaming terminal; and subtle motion cues such as scan‑lines, pulsing indicators, and animated dots. The stack remains purely frontend: React, Tailwind CSS, WebGL, and browser APIs.

Visually, the interface blends retro cyberpunk terminals with modern glassmorphism. Retro details include scan‑lines, phosphor‑like greens, hard edges, and dense monospaced readouts; the glass layer adds transparency, blur, and soft glows to keep the dashboard contemporary and readable.

---

2. Design System and Visual Language

The interface is guided by a compact, explicit design system that turns the retro cyberpunk + glassmorphism concept into reusable patterns:

• “Cyber glass” surfaces for panels and shells, composed from Tailwind utilities and theme tokens for blur, transparency, borders, and glows.
• Typographic rules that pair monospaced readouts with compact all‑caps labels.
• A controlled color system with neon accents over a dark, desaturated base.
• Layout patterns for dashboard shells, split views, and stacked mobile layouts.
• Motion rules for scan‑lines, orbiting elements, pulsing indicators, and terminal activity.

The design system is implemented directly in Tailwind configuration, shared components, and utility patterns, so the codebase documents the visual language and interaction rules.

---

3. Tech Stack and Tooling

---

• Framework: Next.js (App Router), React 18
• Language: Modern JavaScript (ESNext)
• 3D / Graphics: React Three Fiber, Three.js, custom GLSL shaders
• Styling: Tailwind CSS with a custom “cyber glass” design system
• Linting: ESLint
• APIs used:
  • navigator.userAgent, navigator.hardwareConcurrency, navigator.deviceMemory
  • navigator.connection (Network Information API)
  • navigator.getBattery
  • navigator.permissions
  • navigator.geolocation
  • navigator.storage.estimate
  • navigator.plugins
  • navigator.serviceWorker
  • window.performance.getEntriesByType
  • window.AudioContext
  • window.DeviceMotionEvent / devicemotion
  • WebGL context + WEBGL_debug_renderer_info
  • WebRTC RTCPeerConnection

This stack supports a mix of visual, data, and systems work while remaining firmly in the browser.

---

4. Key Frontend Highlights

• Tabbed diagnostic views (System, Network, Browser, Hardware, Identity, Permissions, Fingerprints, Security).
• Live terminal with filtering/search, pause, and a latency sparkline.
• Derived security risk score with human-readable findings.
• WebRTC leak test, geolocation resolution, and privacy report export.
• 3D cyber planet background rendered with React Three Fiber and custom shaders.
• Keyboard-driven navigation shortcuts (1–8 for tabs, H for help, F for search, P for pause).

5. Skills Demonstrated

• Advanced React patterns with custom hooks and clean separation of data, state, and presentation.
• Browser API fluency across permissions, storage, WebGL, WebRTC, geolocation, and network information.
• Data visualization and UI engineering without heavy chart libraries.
• 3D and motion via React Three Fiber and shader-driven visuals.
• Design and interaction built on a Tailwind-based “cyber glass” design system.
• Defensive, lint-clean code using ESLint.