🚀 Space Telemetry Dashboard — ISS UPA Monitor

“Houston, we have a problem… or at least a full tank.” Dit project is een real-time missiecontrole-dashboard dat de Urine Processing Assembly (UPA) aan boord van het International Space Station monitort. Het combineert live NASA-telemetrie met complexe webarchitectuur om een functioneel en visueel indrukwekkend systeem neer te zetten.

---

🎯 Het Concept

Het doel was om een “Mission Control” interface te bouwen die echte data uit de ruimte verwerkt. Het dashboard streamt live vloeistofniveaus van de Waste Storage Tank (telemetrie-id NODE3000005), trackt de ISS-positie op een interactieve kaart, toont de huidige crew-manifest en crawlt NASA’s blog voor het laatste nieuws.

🛠️ Technische Deep-Dive

• Astro Islands Architectuur: De frontend maakt gebruik van Astro 5 met een “Islands” aanpak. Elke widget (telemetrie, kaart, nieuws) is een onafhankelijk gehydrateerd Preact component. Dit zorgt voor een razendsnelle initiële laadtijd (zero-JS HTML) terwijl interactieve onderdelen pas laden wanneer nodig.
• Real-time Data Streaming: Via de Lightstreamer SDK maakt de app een WebSocket-verbinding met NASA’s live feeds. Data wordt gepusht naar het dashboard zonder dat de gebruiker de pagina hoeft te verversen.
• Cross-Island Communication: Voor state-management tussen de verschillende “eilanden” (bijv. de connectiestatus in de header koppelen aan de telemetrie-panel) wordt gebruik gemaakt van nanostores. Dit zijn lichtgewicht, atomaire stores die framework-agnostisch werken.
• Multi-gefacetteerde PHP Backend: De API-laag (PHP 8) demonstreert verschillende data-acquisitie technieken:
  • Guzzle (Composer): Voor het ophalen van de crew-manifest.
  • cURL: Voor de ISS-locatiegegevens.
  • DOMDocument & XPath: Een custom web-crawler die de RSS-feed van NASA’s blog ontleedt.
• AI-Collaborative Development: Dit project is ontwikkeld in samenwerking met AI-coding agents (Claude/Copilot), waarbij de focus lag op het refactoren van monolithische code naar een modulaire component-structuur en het oplossen van specifieke CSS-scoping uitdagingen binnen Astro.

📂 Tech Stack

Categorie	Technologie
Frontend Framework	Astro 5 (Islands Architecture)
Interactiviteit	Preact & nanostores
Real-time Data	Lightstreamer (WebSockets)
Backend API	PHP 8 (Guzzle, cURL, XPath)
Mapping	Leaflet.js

---

🚀 Space Telemetry Dashboard — ISS UPA Monitor

“Houston, we have a problem… or at least a full tank.” This project is a real-time mission control dashboard designed to monitor the Urine Processing Assembly (UPA) aboard the International Space Station. It merges live NASA telemetry with complex web architecture to create a functional and visually striking command center.

---

🎯 The Concept

The objective was to build a professional-grade interface powered by actual data from space. The dashboard streams live fluid levels from the Waste Storage Tank (telemetry ID NODE3000005), tracks the ISS position on an interactive map, displays the current crew manifest, and crawls NASA’s official blog for the latest updates.

🛠️ Technical Deep-Dive

• Astro Islands Architecture: The frontend utilizes Astro 5 with an “Islands” architecture. Each widget (telemetry, map, news) is an independently hydrated Preact component. This allows for lightning-fast initial loads (zero-JS HTML) while only hydrating interactive elements as they become necessary.
• Real-time Data Streaming: Using the Lightstreamer SDK, the app establishes a WebSocket connection with NASA’s live telemetry feeds. Data is pushed to the dashboard in real-time, providing an authentic “live” experience.
• Cross-Island Communication: To handle state between different “islands” (e.g., reflecting connection status in the header based on the telemetry panel), the project uses nanostores. These are tiny, atomic state stores that facilitate framework-agnostic communication.
• Multi-faceted PHP Backend: The API layer (PHP 8) showcases various data acquisition methods:
  • Guzzle (Composer): To fetch the live crew manifest.
  • cURL: To retrieve ISS orbital position data.
  • DOMDocument & XPath: A custom web crawler designed to parse NASA’s blog RSS feed into a clean JSON format.
• AI-Collaborative Development: Built in partnership with AI coding agents (Claude/Copilot), focusing on refactoring monolithic code into a modular component structure and navigating specific Astro CSS-scoping challenges.

📂 Tech Stack

Category	Technology
Frontend Framework	Astro 5 (Islands Architecture)
Interactivity	Preact & nanostores
Real-time Data	Lightstreamer (WebSockets)
Backend API	PHP 8 (Guzzle, cURL, XPath)
Mapping	Leaflet.js