ISS-Tracker Svelte Themes

Iss Tracker

Split screen ISS tracker showing trajectory of satellite and live view from ISS video feed

ISS Mission Control

Real-time International Space Station tracker with live telemetry, orbital pass predictions, and NASA video feeds on an immersive full-screen map.

About

After stargazing with my kids one night, I wanted a single screen that showed where the ISS was and a live view from its cameras — without juggling a satellite tracking app and YouTube. This started as a vanilla JS prototype and evolved into a production app with its own backend computing real orbital mechanics.

Live at iss.jimchristian.net

Features

  • Real-time ISS position via WebSocket, updated every 2 seconds
  • Own orbital data — ISS position computed from TLE data using satellite.js SGP4 propagation (no third-party position API dependency)
  • Real pass predictions — actual orbital mechanics, not approximations. Enter your location and see when the ISS will be visible overhead
  • Immersive full-screen map — glassmorphic floating panels over a dark CartoDB map. No traditional app chrome
  • Live NASA stream — picture-in-picture window, draggable and collapsible
  • Crew information — current ISS crew roster
  • Dark and light themes
  • Responsive — desktop, tablet, and mobile layouts
  • Keyboard shortcuts — F (follow), C (crew), P (passes), / (search), Esc (close)

Architecture

Browser (Svelte SPA)
    |
    |-- WebSocket (direct) --> VPS Backend (Node.js, Docker)
    |                            |-- TLE fetch (CelesTrak, every 6h)
    |-- REST ----------------->  |-- ISS position (satellite.js SGP4)
                                 |-- Pass predictions
                                 |-- Crew data (open-notify)
  • Frontend: Svelte 5 + Vite, Leaflet.js map, deployed to VPS via nginx
  • Backend: Node.js + Fastify + satellite.js, Dockerized on IONOS VPS
  • Edge cache: Cloudflare Worker with route-specific TTLs (optional layer)

Development

Frontend

cd frontend
npm install
npm run dev       # http://localhost:5173
npm run build     # Production build to dist/

Backend

cd backend
npm install
npm run dev       # http://localhost:3848
npm test          # 27 tests

Environment

Create frontend/.env:

VITE_API_URL=https://iss.jimchristian.net/api
VITE_WS_URL=wss://iss.jimchristian.net/ws

For local development, point at a local backend:

VITE_API_URL=http://localhost:3848
VITE_WS_URL=ws://localhost:3848/ws

Deployment

./deploy.sh           # Build + deploy frontend to VPS
./deploy-backend.sh   # Deploy backend Docker container to VPS

Tech Stack

Layer Technology
Frontend Svelte 5, Vite, Leaflet.js, anime.js
Backend Node.js, Fastify, satellite.js
Infrastructure Docker, nginx, IONOS VPS
Edge cache Cloudflare Workers

License

MIT - see LICENSE

Acknowledgements

Top categories

Loading Svelte Themes