Cosmic APOD

Ship by @gauravkhatriweb on my APOD site · just now

Live site: https://cosmic-apod.vercel.app/
Repository: https://github.com/gauravkhatriweb/cosmic-apod
Mission: https://stardance.hackclub.com/missions/nasa-page

I built Cosmic APOD, a fully deployed NASA Astronomy Picture of the Day website using HTML, CSS, and JavaScript with Vite. I wrote the interface from scratch and focused on making it feel like a real astronomy product instead of a plain API demo or template site.

The site has real features: NASA APOD API integration, a dashboard, an explorer with date-range browsing, favorites, history, shareable collections, offline caching, responsive layouts, animations, and accessibility improvements like keyboard navigation and reduced-motion support. The repo is public, has frequent commits, and the README explains the features, architecture, and how the project evolved from V1 to V3.

Devlog 1

I started with the core APOD flow: fetching NASA’s picture of the day, showing the image or video cleanly, and adding date navigation so users could move through the archive. Once the base worked, I designed a custom space-themed UI with my own layout, styling, and interaction patterns instead of relying on a template.

Devlog 2

After the single-page viewer felt stable, I expanded the project into a bigger discovery experience. I added a dashboard, an explorer, favorites, history, and collections so people could browse the archive in different ways instead of only looking at one APOD at a time.

Devlog 3

The last stage was polish and resilience. I improved caching with IndexedDB and a service worker, handled NASA API rate limits more gracefully, refined accessibility, added smoother animations, and kept improving the project with features like local image tagging and shareable collection links.

Why this fits the mission

Built with HTML, CSS, and JavaScript
Fully deployed, not just running locally
Public GitHub repository with regular commits
Custom UI and CSS
Uses a real API and includes real product features
README is detailed and actively maintained

I confirm that this project meets the mission guidelines above.

Try project → See source code →

Open comments for this post

@gauravkhatriweb on my APOD site · 1 day ago

1h 7m 27s logged

🚀 Just launched Cosmic APOD V3! (Zero-backend, 100% Vanilla JS)

Hey everyone! 👋 A while back, I wanted a faster, more modern way to explore NASA’s Astronomy Picture of the Day (APOD) archive. Today, I’m super excited to share Cosmic APOD V3!

I challenged myself to build this entirely without a backend. It’s just Vite and Vanilla JS, but it packs some serious features using browser-native APIs.

✨ What’s new in V3?

🤖 Local AI Tagging: I integrated TensorFlow.js (MobileNet) to generate image tags directly in your browser via WebGL. No server processing, completely private, and the 1.8MB model is lazy-loaded so the app stays blazing fast.
🔗 Shareable Collections: You can curate your favorite APODs and share them with friends. Because there’s no database, the collections are serialized into Base64 URLs! When someone clicks your link, they get a custom preview modal before importing it into their local IndexedDB.
📅 Date-Range Explorer: Batch-fetch and paginate through decades of space history without locking up the browser.
🚦 Smart API Limits: NASA limits you to 30 requests/hour. V3 elegantly catches HTTP 429s and lets power users plug in their own API key via localStorage to unlock 1,000 requests/hour.

I’ve learned so much about AbortControllers, IndexedDB, Service Workers, and client-side ML while building this.

If you’re interested in offline-first web apps or space, I’d love for you to check it out and let me know what you think! 🌌

🔗 Live Demo: [https://cosmic-apod.vercel.app]
💻 GitHub: [https://github.com/gauravkhatriweb/cosmic-apod]

Open comments for this post

@gauravkhatriweb on my APOD site · 1 day ago

1h 4m 15s logged

✦ Cosmic APOD V2 is Live! 🚀

Hey hackers! I just shipped V2 of my NASA Astronomy Picture of the Day explorer. ~~It was a messy prototype~~ It’s now a fully polished Single Page Application built entirely with Vanilla JS and Vite!

You can check it out here: Live Demo 🌌

🛠️ The Tech Stack

I wanted to see how far I could push the browser without heavy frameworks like React.

// The secret sauce: Aggressive caching & AbortControllers
const currentAbortController = new AbortController();
const data = await fetch(url, { signal: currentAbortController.signal });