NASA APOD Dashboard Deployment Fix

Project Overview

An interactive space dashboard that displays the daily NASA Astronomy Picture of the Day (APOD). It features an integrated digital clock, an accurate asset age calculator, and a modern design.

Deployment Journey and Problem Resolution

Major Deployment Hurdles

Despite strictly following the guide, the website initially refused to work after deploying to GitHub Pages. While everything executed perfectly in the local environment, the live production site was stuck displaying a frustrating “403 Forbidden” network error.

Troubleshooting the Build Pipeline

The issue turned out to be an invisible barrier between the automated GitHub Actions pipeline and how Vite injects environment variables (the hidden NASA API key):

1. Incorrect Secret Payload: Due to a minor copy-paste oversight when adding the Secrets to GitHub, a wrong string format was being bundled into the production code.
2. Blocked Environment Access: GitHub Actions initially failed to map the key to Vite correctly, causing the builder to compile the code with an empty value (undefined). The NASA API automatically blocks these requests.

Mission Accomplished in One Evening

By introducing programmatic live tests (such as a temporary browser pop-up to inspect the live key status), the bug was systematically isolated.

Once the secret names were perfectly aligned, duplicated to both global and environment levels, and the GitHub build cache was forced to reset via a clean push, the roadblock collapsed. Despite the intense troubleshooting, I managed to fix the entire pipeline and successfully launch the project in a single evening. The direct feed to NASA is stable, and the live dashboard is fully operational.