COSMOS
An Interactive Atlas of the Cosmos — TypeScript / Next.js 16.2.4 (App Router, static export)
COSMOS is a fully client-rendered Next.js App Router site presenting an interactive atlas of 52 celestial objects, with all catalog content and locale strings bundled at build time and no backend service. It tracks user discovery progress in a persisted Zustand store backed by localStorage.
Generated 4 Jun 2026 · 60 files · 13 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 · next.config.mjs |
| Language | TypeScript | 5.7.3 | tsconfig.json (strict) |
| UI Runtime | React / React DOM | 19.2.4 | package.json |
| Styling | Tailwind CSS v4 | ^4.2.0 | postcss.config.mjs · app/globals.css |
| UI Primitives | Radix UI + shadcn (new-york) | various | components.json · components/ui/ |
| Client State | Zustand (persist) | ^5.0.13 | store/cosmos.store.ts |
| Animation | Motion (motion/react) | ^12.38.0 | lib/motion.ts · *.tsx |
| i18n | i18next + react-i18next | ^26.3.0 / ^17.0.8 | lib/i18n/ · locales/en/common.json |
| Forms / Validation | react-hook-form + Zod | ^7.54.1 / ^3.24.1 | package.json (deps; UI form wrappers) |
| Icons | lucide-react | ^0.564.0 | components/**.tsx |
| Charts | Recharts | 2.15.0 | components/ui/chart.tsx |
| Utilities | clsx + tailwind-merge | ^2.1.1 / ^3.3.1 | lib/utils.ts (cn) |
| Dates | date-fns | 4.1.0 | package.json |
| Analytics | @vercel/analytics | 1.6.1 | app/layout.tsx (production only) |
| Image CDN | Vercel Blob Storage | — | next.config.mjs remotePatterns |