SpaceViz

Explore orbit in 3D — real-world space data, visualized.

Comment

Inspiration

I’ve always been captivated by space—the mechanics of orbiting bodies, satellites, and cosmic events. This fascination, paired with a desire to make complex orbital dynamics visually intuitive, led me to dream of an interactive 3D space visualization that anyone could explore—from enthusiasts to students.

What it does

Displays real orbits: Using live TLE data to visualize satellites orbiting Earth in real time.

Interactive exploration: Click or hover on satellites to view info panels, launch schedules, APOD

(Astronomy Picture of the Day), and handy orbital calculators.

Sleek UI shell: Modern dashboard-style interface using Next.js, Tailwind, and Radix UI, designed to guide users through space tools and visuals.

How we built it

Generative scaffolding: Rapid prototyping with Vercel’s v0—using plain-English prompts to scaffold a Next.js 15.2 app with React 19, Tailwind, and Radix for accessible components.

3D rendering layer: Planned use of React Three Fiber (R3F) for satellite and orbit visualization, following performance best practices like mesh instancing and efficient useFrame() loops.

API placeholders: Landing UI lists future integrations—NASA APOD, launch schedules, orbital calculators—structured to connect via edge/server components later.

Challenges we ran into

Scope gap: Early README described an HPC simulation tool, not the current space viz shell—this mismatch required documentation overhaul.

Prototyping debts: We disabled TypeScript and ESLint for speed, which led to hidden bugs and a tech debt backlog waiting to be addressed.

Preparing for heavy graphics: Structuring for future 3D and data-heavy modules meant designing file layouts, dynamic imports, and performance-aware components from day one—even before wiring any data.

Accomplishments that we're proud of

High-fidelity UI shell: Clean, responsive landing page with interactive cards, accessible components, and modern stack readiness (Next.js 15 App Router, Radix/Tailwind).

Performance-first planning: Thoughtful architecture anticipating 3D visuals and large datasets, informed by best practices like instancing and optimized render loops.

What we learned

AI-assisted prototyping works: Tools like v0 let us iterate structure and UI fast without wrestling with boilerplate.

Component design matters early: Using Radix + Tailwind allowed accessible, scalable components—future extensibility is baked in.

3D needs conscious prep: Even before any 3D code, thinking about lazy-loading, dynamic imports, performance, and state management is key for future success.

What's next for SpaceViz

Update docs & readme to match actual space-focused scope.

Re-enable TypeScript & ESLint, with proper linting and testing via Vitest or Jest.

Build satellite tracker MVP:

Fetch live TLE data

Use React Three Fiber + instancing to render orbits

Add interactivity and camera controls

Connect live data sources: Implement NASA APOD, launch APIs, and orbital calculators.

Performance tuning: Leverage React’s useFrame, dynamic imports, and mesh instancing for smooth interactions.

Rollout CI/CD: GitHub Actions powering lint → test → deploy pipelines to Vercel.

Built With

Share this project:

Updates