Table of contents
Open Table of contents
🪐 What the Project Does
Users can explore a catalogue of real asteroids, each uniquely rendered as a stylized SVG “space rock” generated deterministically from NASA’s Near-Earth Object API data. Every asteroid has its own CosmoCoin price calculated from its physical properties like size, brightness, velocity, and rarity.
On top of that, users can:
- Log in via Firebase authentication
- “Claim” daily rewards in CosmoCoins
- Track and show off purchased asteroids
- See in real time how many other people are eyeing the same object via WebSocket connections
⚙️ The Tech Stack
This project was built as a modern full-stack application, blending the latest frontend and backend technologies into a cohesive developer workflow.
Frontend
- Next.js 15 (App Router) — for server-side rendering, static generation, and streamlined routing.
- TypeScript — for type-safe development across the entire codebase.
- Tailwind CSS 4 — enabling responsive, utility-first UI design with a cosmic aesthetic.
- Zustand — lightweight state management, used for the MVVM-style frontend architecture.
- Apollo Client — integrates the GraphQL backend seamlessly for efficient data fetching and caching.
Backend
- Node.js + Express — the foundation for the server runtime and routing.
- Apollo Server (GraphQL) — exposing a unified API to query, mutate, and cache asteroid data.
- Mongoose + MongoDB 7 — for data persistence and query optimization.
- WebSocket (ws) — providing real-time updates when multiple users view the same asteroid.
- Firebase Admin SDK — for secure authentication and user management.
Infrastructure
- Docker Compose — powering local and production environments with isolated containers for frontend, backend, and MongoDB.
- Caddy — reverse proxy and automatic HTTPS termination for production deployments.
🌍 Integrating NASA’s API
The app retrieves live data from NASA’s Near-Earth Object API, fetching asteroids approaching Earth within a given date range. We process that data, derive attributes like hazard level and approach velocity, and feed it through a deterministic random generator to create a unique visual for each asteroid.
That means the same asteroid ID always produces the same shape, color, and crater pattern — a blend of math, art, and code.
💡 Architecture at a Glance
The system follows an MVVM (Model–View–ViewModel) pattern, with Zustand serving as the ViewModel layer for the client. GraphQL acts as the single source of truth, bridging NASA’s external API with our MongoDB cache for faster querying and richer filtering.
Cron jobs periodically refresh cached asteroid data, while WebSockets deliver live session updates to the frontend.
🧩 Development & Deployment Workflow
Local development is a breeze:
docker compose up --build
This spins up MongoDB, the backend, and the frontend in watch mode — all hot-reloading automatically.
For production, we deploy using:
docker compose -f docker-compose.caddy.yaml up --build
This stack uses Caddy to handle reverse proxying and HTTPS termination, making deployment simple and secure.
🚀 What Makes It Special
- A real-data-driven app with whimsical storytelling.
- A full-stack GraphQL implementation, wrapping a public API into a cohesive backend.
- A Next.js + WebSocket hybrid for a smooth, interactive UX.
- Built entirely with Dockerized microservices, ready to run anywhere.
✨ Final Thoughts
The Shop at the End of the Galaxy isn’t just about selling space rocks — it’s about combining playfulness and precision engineering.
From real-time data streams to procedural graphics generation, it showcases how creative web development can turn science into art.