Starry 🌌

A new tab page that displays NASA's Astronomy Picture of the Day as a full-screen background, with a live clock and date overlay.

Live Site →

---

What it does

• Fetches today's APOD from the NASA APOD API on every page load
• Displays the image as a full-screen background that fades in
• Shows a live clock (updates every second) and the current date
• Shows the photo title in the bottom-left corner
• Updates automatically every day — no manual refresh needed

Tech stack

• Vite — local dev server and build tool
• Vanilla JS — no frameworks
• NASA APOD API — public API for the astronomy image
• GitHub Actions — auto-deploys to GitHub Pages on every push

Running locally

1. Clone the repo

git clone https://github.com/catsarepro21/starry.git
cd starry

2. Install dependencies

npm install

3. Get a free NASA API key at api.nasa.gov and create a .env file

VITE_NASA_API_KEY=your_key_here

4. Start the dev server

npm run dev

Open http://localhost:5173/starry in your browser.

Deploying to GitHub Pages

The repo includes a GitHub Actions workflow (.github/workflows/deploy.yml) that builds and deploys automatically on every push to master.

Before it works, add your API key as a repository secret:

1. Go to your repo → Settings → Secrets and variables → Actions
2. Click New repository secret
3. Name: VITE_NASA_API_KEY, Value: your NASA API key

Then push to master and GitHub will handle the rest.

Why .env?

The API key is stored in a .env file locally and a GitHub Secret in CI. The .env file is in .gitignore so it never gets pushed to the repo. Vite reads it via import.meta.env.VITE_NASA_API_KEY.

Note: since this is a frontend-only project, the key ends up in the built JS bundle. This is fine for a free public API like NASA's — the worst case is someone finds it and hits the rate limit.