Today’s session was a full transformation of nasa_pro — from a basic Vite page with a clock into a working search engine with a premium space-themed UI, powered by two live APIs.

SerpApi Search Engine

The old search bar just opened Google in a new tab. I ripped that out and replaced it with a real SerpApi integration. Now when you type a query and hit Go, the app makes an API call to SerpApi’s Google engine, parses the JSON response, and renders the top 5 organic results directly on the page — each with a clickable title and snippet preview. A close button dismisses the results panel. The entire search flow happens without leaving the page. To bypass CORS restrictions, I set up a Vite dev proxy in vite.config.js that routes /search.json requests through to serpapi.com, so the browser treats it as a same-origin request. The API key is stored in .env as VITE_SERPAPI_KEY.

NASA APOD Background Fix

The APOD integration existed but was completely broken — the background was pure black. I traced this to three issues: the code was loading the full-res hdurl (tens of megabytes, 40+ seconds to download) instead of the optimized 1024px web version; NASA’s servers were rejecting requests because the browser sent a Referer header from localhost; and there was zero fallback if the image failed. I fixed all three — prioritized the smaller d.url, added a no-referrer meta tag to index.html, and built a proper loading chain using Image() preloading with onload/onerror handlers that tries the web image first, falls back to hdurl, then to a local hero.png asset. The .bg element now starts with a cosmic radial gradient so the page always looks like space, even if every image source fails. I also busted the localStorage cache so stale data doesn’t persist.

UI Redesign

Rewrote styles.css almost entirely. The search panel now uses glassmorphism — backdrop-filter blur, translucent rgba backgrounds, subtle borders, and deep box shadows. The search input transitions on focus with a glowing border. Buttons lift on hover. The info toggle has a continuous pulse animation that stops on hover and swaps to a scale-up glow. The info panel opens with a bouncy cubic-bezier scale transition. The clock is 64px extra-bold with text-shadow depth. Quick links have hover states with fading borders. Everything feels alive and responsive.

Bug Fixes

Fixed the clock greeting saying “Good morning” at 9 PM — the original code used the 12-hour variable to decide time of day, so 9 PM registered as morning. Switched it to the 24-hour value.

Features

Live clock with AM/PM and context-aware greeting. SerpApi-powered inline Google search with results panel. NASA APOD daily background with smart preloading and triple fallback. Collapsible info panel showing APOD title, explanation, and date. Quick links bar. Glassmorphic UI with micro-animations throughout. Cosmic gradient fallback. localStorage caching. Responsive layout. Both API keys configured via .env with Vite proxy for CORS-free development.