Tech Stack
Every technology powering this dashboard, and why it was chosen
Next.js 15
v15.2 · Framework
React framework with App Router, React Server Components, and Server Actions for full-stack development.
React 19
v19.0 · UI Library
The latest React with concurrent features, use() hook, and improved server component support.
TypeScript
v5.7 · Language
Strict type-safe development with advanced type inference and exhaustive pattern matching.
Tailwind CSS
v4.0 · Styling
Utility-first CSS with the new v4 engine featuring CSS-first configuration, @theme directives, and zero-config content detection.
Three.js + R3F
v0.172 · 3D Graphics
Interactive 3D globe widget using React Three Fiber for declarative Three.js with Drei utilities.
Recharts
v2.15 · Data Viz
Composable chart library for React. Used for area charts, bar charts, pie charts, and custom tooltips.
Framer Motion
v12.4 · Animation
Production-grade animation library for React. Powers all page transitions, staggered animations, and layout animations.
Zod
v3.24 · Validation
TypeScript-first schema validation. Used for form validation on both client and server-side.
Architecture Overview
🖥️ Server-Side
Next.js 15 App Router with React Server Components for zero-bundle server rendering. Server Actions handle form submissions with Zod validation.
🎨 Client-Side
Interactive widgets hydrate on the client with Framer Motion animations, Recharts visualizations, and Three.js 3D globe. Tailwind v4 handles all styling.
🔗 Data Layer
Real APIs (CoinGecko, GitHub) with graceful fallbacks. Mock WebSocket feed via setInterval. Zod schemas ensure type-safe data flow throughout.