Building a Multi-Spectrum Astronomical Data Platform
The technical architecture behind integrating data from JWST, Australian radio telescopes, and real-time event feeds into a cohesive exploration experience.
Building a Multi-Spectrum Astronomical Data Platform
When I started building NebulaX, I knew I wanted to create something that went beyond a simple image gallery. The goal was ambitious: create a platform that could seamlessly integrate data from multiple astronomical sources across the electromagnetic spectrum, while remaining accessible and engaging for both space enthusiasts and citizen scientists.
The Challenge
Modern astronomy produces vast amounts of data from instruments operating across the electromagnetic spectrum. The James Webb Space Telescope captures stunning infrared images, while Australian radio telescopes like ASKAP and MWA observe phenomena invisible to optical telescopes. Unifying these data sources presents several challenges:
Architecture Overview
The platform uses Next.js 14 with the App Router, providing a modern React foundation with server-side rendering capabilities. Here's the high-level architecture:
┌─────────────────────────────────────────────────────┐
│ Client Layer │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Sky Map │ │ Gallery │ │ Classify │ │
│ │ (Aladin) │ │ (React) │ │ (React) │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────┘
│
┌─────────────────────────────────────────────────────┐
│ API Layer │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ MAST API │ │ CASDA TAP │ │ NASA APIs │ │
│ │ (JWST) │ │ (ASKAP) │ │ (Events) │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────┘
│
┌─────────────────────────────────────────────────────┐
│ State Layer │
│ ┌─────────────────────────────────────────────────┐│
│ │ Zustand Store (Persisted to LocalStorage) ││
│ │ - User preferences, favorites, view state ││
│ └─────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────┘Key Technical Decisions
Why Next.js 14?
The App Router provides excellent patterns for:
- Server Components - Fetch data on the server, reducing client bundle size
- Streaming - Progressive loading for better perceived performance
- Route Handlers - API routes for proxying external services
- Metadata API - SEO-friendly page metadata
Zustand for State Management
I chose Zustand over Redux for its simplicity and built-in persistence:
class="code-keyword">export class="code-keyword">const useNebulaXStore = create<NebulaXState>()(
persist(
(set, get) => ({
favorites: [],
toggleFavorite: (id) =>
set((state) => ({
favorites: state.favorites.includes(id)
? state.favorites.filter((f) => f !== id)
: [...state.favorites, id],
})),
class="code-comment">// ... more state
}),
{ name: 'nebulax-storage' }
)
)Aladin Lite for Sky Mapping
Rather than building a custom sky viewer, I integrated Aladin Lite from CDS Strasbourg. It provides:
- Multi-wavelength survey overlays
- SIMBAD/NED object lookups
- Smooth pan/zoom interactions
- Mobile touch support
Data Integration Patterns
MAST API (JWST/Hubble)
The MAST portal provides a comprehensive API for accessing JWST observations:
class="code-keyword">async class="code-keyword">function queryMAST(params: MASTQuery): Promise<Observation[]> {
class="code-keyword">const response = class="code-keyword">await fetch('https:class="code-comment">//mast.stsci.edu/api/v0/invoke', {
method: 'POST',
headers: { 'Content-class="code-keyword">Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({
request: JSON.stringify({
service: 'Mast.Caom.Filtered',
format: 'json',
params: {
filters: [
{ paramName: 'obs_collection', values: ['JWST'] },
{ paramName: 'dataproduct_type', values: ['image'] },
],
},
}),
}),
})
class="code-comment">// Transform MAST response to our Observation class="code-keyword">type
}CASDA TAP Service (Australian Radio)
The CSIRO ASKAP Science Data Archive uses TAP (Table Access Protocol):
class="code-keyword">async class="code-keyword">function queryCADSA(adql: string): Promise<RadioSource[]> {
class="code-keyword">const response = class="code-keyword">await fetch(
https:class="code-comment">//casda.csiro.au/casda_vo_tools/tap/sync?${new URLSearchParams({
query: adql,
lang: 'ADQL',
format: 'json',
})}
)
class="code-comment">// Parse VOTable response
}Looking Forward
Future plans include:
- 3D visualisation of galaxy distributions using Three.js
- WebGL-accelerated radio image processing
- Integration with more SKA precursor data
- Enhanced citizen science classification tools