By
@shivar07
A retro-futuristic Cyberpunk/Sci-Fi HUD (Heads-Up Display) dashboard that acts as a tactical mission control command center, parsing and visualizing live astronomical telemetry and cosmic imagery from the NASA APOD database.
@shivar07
on
AstroPulse // Cosmic Mission Control
🧠 What was challenging?
CORS Bypass for Direct Image Saving: NASA hosts its APOD images on a different domain (apod.nasa.gov) that lacks open CORS headers, which normally prevents JavaScript from downloading them. I solved this by configuring a local reverse proxy in Vite and a production CDN rewrite proxy in netlify.toml so that image downloads run securely via same-origin fetches.
Network Hangs & Rate Limits: Standard API requests could sometimes hang indefinitely on slow connections, blocking the dashboard's loading state. I engineered an AbortController timeout guard (8-second limit) and auto-stopping rules that immediately halt automatic loop scanning if a 429 rate limit or authentication block is encountered.
🏆 What are you proud of?
Seamless Local Downloads: The direct-to-PC download tool. By translating target image streams into in-memory binary blobs, users can download the wallpapers directly to their device with a single click, completely avoiding browser tab redirects.
Interactive Scanning Engine: The auto-scan loop that generates random telemetry sectors every 15 seconds with a visual button countdown, which intelligently pauses as soon as a user manually interacts with the controls.
🧭 How to test your project?
Open the live site.
Click ◀ PREV SOL and NEXT SOL ▶ (or press the Left/Right arrow keys on your keyboard) to step day-by-day through the solar history.
Click RANDOM SCAN to trigger a random space telemetry search.
Toggle AUTO-SCAN: OFF to activate the 15-second automatic cosmic loop.
Click DOWNLOAD IMAGE on any picture to test the direct, same-origin file downloader.
@shivar07
on
AstroPulse // Cosmic Mission Control
1h 22m 43s logged
I wanted a quick way to browse different days. I added ‘PREV SOL’ and ‘NEXT SOL’ chevron buttons and set the date boundary rules—you can’t step earlier than NASA’s first post (June 16, 1995) or past today’s date. I also hooked up browser keydown listeners so you can page through days using the Left and Right Arrow keys. After that, I built an ‘Auto-Scan’ mode that cycles random space pictures every 15 seconds. If you manually select a date, the scanner pauses so it doesn’t interrupt your reading.
@shivar07
on
AstroPulse // Cosmic Mission Control
1h 22m 13s logged
While testing various dates, I noticed a big bug: the APOD API doesn’t just return images. On some days, they post YouTube video streams or interactive space maps. Trying to render a video inside an tag broke the site. I wrote a helper function buildMediaHTML(data) to inspect media_type. If it’s a video, it parses the YouTube ID and loads it inside a clean, autoplaying, and muted container.
@shivar07
on
AstroPulse // Cosmic Mission Control
52m 2s logged
Sometimes the high-resolution images from NASA take a few seconds to load. Having a blank screen during the fetch looked terrible, so I built a glowing, circular radar loader. I wrote a CSS animation that handles both the rotation and a glowing shadow pulse. In main.js, I added a showLoading state that replaces the container HTML during fetching, removing layout shifts.
@shivar07
on
AstroPulse // Cosmic Mission Control
36m 23s logged
Today I focused entirely on design. I didn’t want a generic grid list, so I went for a retro-futuristic spaceship HUD (Heads-Up Display) aesthetic. I imported three custom fonts from Google Fonts (Orbitron, Space Grotesk, and Black Ops One) and set up high-contrast neon CSS variables. I also added three layers of parallax stars using pure CSS translation loops to make the background feel like scrolling deep space.
@shivar07
on
AstroPulse // Cosmic Mission Control
24m 27s logged
First day of the project! My goal was simple: connect my code to NASA’s public database and pull the daily picture metadata. I registered for a NASA developer API key, created a local .env file in Vite to store it safely, and wrote a clean JavaScript fetch wrapper. The fetch handles network errors and successfully outputs raw JSON data in the console.
