Spotify Stats Universe
TypeScript · Next.js ^16.2.4 (App Router) · React 19.2.4 · Tailwind CSS v4
A Next.js App Router web app that visualizes a user's Spotify listening statistics. The Next.js Route Handlers act as a backend-for-frontend (BFF) proxy: the React client never calls Spotify directly except for the OAuth authorize redirect, and all data calls pass through server routes that read the httpOnly access-token cookie.
Generated 4 Jun 2026 · 59 files · 12 components · 5 flows
File Architecture
The full source tree as a layered graph — every file with its role, imports, exports and reverse dependencies.
System Design
Runtime topology across the five zones — client, edge, application, data and external services.
Flow Graph
The five most significant application flows, step by step — startup, auth, write, read and error recovery.
Technology
| Component | Technology | Version | Source of Detection |
|---|---|---|---|
| Framework | Next.js (App Router) | ^16.2.4 | package.json |
| UI Library | React / React DOM | 19.2.4 | package.json |
| Language | TypeScript | ^5 | package.json, tsconfig.json |
| Styling | Tailwind CSS | ^4 | package.json, postcss.config.mjs |
| Server State | @tanstack/react-query | ^5.99.2 | lib/hooks/use-spotify-data.ts |
| Client State | Zustand | ^5.0.12 | stores/*.ts |
| HTTP Client | axios | ^1.15.1 | lib/services/spotify-api.ts |
| Spotify SDK | spotify-web-api-node (types only used) | ^5.0.2 | package.json |
| Animation | framer-motion | ^12.38.0 | app/page.tsx, components/* |
| Charts | recharts | ^3.8.1 | package.json (genre-chart) |
| 3D Visuals | three / @react-three/fiber / drei | ^0.184.0 / ^9.6.0 / ^10.7.7 | package.json |
| i18n | next-intl | ^4.9.1 | components/providers/intl-provider.tsx |
| Icons | lucide-react / react-icons | ^1.8.0 / ^5.6.0 | component imports |
| Image Export | html2canvas | ^1.4.1 | package.json (share) |
| Class Utils | clsx / tailwind-merge / cva | ^2.1.1 / ^3.5.0 / ^0.7.1 | lib/utils/cn.ts |
| Linting | ESLint + eslint-config-next | ^9 / 15.3.1 | eslint.config.mjs |
| Git Hooks | husky + prettier | ^9.1.7 / ^3.8.3 | package.json (devDependencies) |
| Deployment | Vercel (region iad1) | *[unresolved]* | vercel.json |