You are browsing as a guest. Sign up (or log in) to start making projects!

APOD Console

By @DevaanshPathak

  • 2 Devlogs
  • 1 Total hours

APOD Console is a mission-control-style dashboard for NASA's Astronomy Picture of the Day API. It presents each daily APOD as a decoded deep-space transmission, with a telemetry console, viewfinder media frame, UTC mission clock, local cache, recent transmission history, random archive jumps, and explicit signal-loss states.

Source
Open comments for this post

@DevaanshPathak on APOD Console

45m 7s logged

Added signature interaction for APOD Console: a boot overlay that gates initial rendering until both the simulated console startup and the real APOD fetch are ready.

  • Added boot sequence lines:
    • > ESTABLISHING DEEP SPACE NETWORK LINK...
    • > AUTHENTICATING APOD UPLINK...
    • > DECODING IMAGE PACKET...
    • > LINK ESTABLISHED.
  • Rendered the boot log in a <pre aria-live="polite">.
  • Added a progress bar that fills during typing and enters a waiting animation if the APOD response is still pending.
  • Cross-fades from the boot overlay into the main console only after boot and data are both complete.
  • Added a fixed, low-opacity CRT scanline overlay across the viewport.
  • Honored prefers-reduced-motion by skipping the boot typing sequence and going straight to the normal loading/content flow.
  • Kept retry behavior on the plain loading path instead of replaying the boot overlay.
0
0
0
Open comments for this post

@DevaanshPathak on APOD Console

20m 16s logged

Initialized APOD Console as a Vite-powered Vanilla JavaScript project and added the first functional APOD API integration.

Completed

  • Created the project documentation set: README.md, AGENTS.md, .gitignore, and local-only ROADMAP.md.
  • Added Phase 0 scaffold files:
    • package.json with Vite dev, build, and preview scripts.
    • vite.config.js with GitHub Pages base path /apod-console/.
    • .env.example with VITE_NASA_API_KEY=your_key_here.
    • index.html with Google Font links for JetBrains Mono and IBM Plex Sans.
  • Added Phase 1 app code:
    • src/main.js fetches today’s APOD from https://api.nasa.gov/planetary/apod.
    • Uses import.meta.env.VITE_NASA_API_KEY || 'DEMO_KEY'.
    • Renders APOD title, date, explanation, and media.
    • Supports image responses with <img> and video responses with an iframe.
    • Includes loading and retryable error states.
    • src/style.css provides a temporary mission-console baseline so the fetched data is readable before the full design phase.

Validation

  • Ran npm exec --yes --package [email protected] vite build.
  • Build completed successfully.

GitHub

  • Pushed Phase 0 to main in commit 854ae25.
  • Pushed Phase 1 to main in commit 6628354.

Next

Phase 2 should replace the temporary baseline styling with the full mission-control design system: palette custom properties, telemetry layout, viewfinder frame, and stronger console composition.

0
0
0

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…