my APOD site - Stardance

Ship #1

@sujay_innovator_robu on my APOD site · 10 days ago

🚀 I built a clean, custom space dashboard that displays NASA's daily astronomy picture or video using their public APOD API!

What I Made:
A single-page web dashboard using Vite, Vanilla JS, and custom CSS. It loads the title, copyright information, hd-resolutions, and descriptions dynamically based on the date selected.

What was Challenging:
The biggest challenge was handling the different media formats returned by NASA's API. Sometimes they return static images, sometimes raw video files, and other times YouTube links. I wrote code in JS to dynamically detect these types and parse YouTube URLs to load them directly into custom, responsive iframes.

What I'm Proud of:
I'm proud of how clean the final space-themed dark layout looks and how responsive it is across desktop, tablet, and mobile screen sizes.

Testing the Project:
Open the Netlify link and try selecting past dates on the date picker to look up older pictures from NASA's history!

Try project → See source code →

Open comments for this post

@sujay_innovator_robu on my APOD site · 10 days ago

1h 14m 56s logged

🚀 Devlog #2: Time Travel & Media Playback (Netlify Deployment)

Hey hackers! 🌌 Today, I leveled up my APOD dashboard by adding date selectors, video support, and launching it live!

-Temporal Query (Date Selector) 📅: Integrated a dynamic date input. Users can now query NASA’s historical image database going back to 1995, with system-clock checks blocking future dates to prevent empty responses.

-Flexible Media Showcase 🎬: Handled all NASA APOD file formats! The display engine now automatically formats images (with full-res download flags), direct MP4/WebM videos, and translates standard YouTube watch links into silent, inline iframe embeds.

-Production Deployment 🌐: Configured netlify.toml for seamless compilation pipelines and successfully deployed the site live on Netlify!

-Clean Code & Git Branching 💻: Renamed branches and consolidated all code commits onto the GitHub main branch.

Check out the live dashboard at:
🌐 Live Link: https://sujay-nasa-apod.netlify.app/
💻 Source Code: https://github.com/sujayinnovatorrobu-ui/Give-Your-Website-a-Pulse

Open comments for this post

@sujay_innovator_robu on my APOD site · 10 days ago

54m 29s logged

🌌 Devlog #1: Intercepting Deep Space Signals (Vite & NASA API Setup)
Hey builders! 🚀 I’m starting a new devlog series for my APOD site!For my first milestone, I wanted to build a web dashboard that automatically fetches and showcases NASA’s

Astronomy Picture of the Day using their official public APOD API. 📡

Vite Dev Environment ⚡: Initialized a modern Vanilla JS project with Vite for a fast local server and hot-reloading.
NASA API & Secrets 🔐: Configured local environment variables (.env) to safely house my NASA API key and keep it hidden from public git commits.
Modern Space Dashboard 🎨: Crafted a refined dark dashboard using Space Grotesk and Orbitron typography, featuring custom loading spinner states, error handlers, and support for high-res image and video/YouTube embeds!
WakaTime Connected ⏱️: Set up project-level tracking to log all my building hours under give-your-website-a-pulse.