🌌 NASA Pro - Explorer Dashboard

A dynamic new-tab dashboard built for the “Give Your Website a Pulse” challenge.

✨ Features

Zero-Delay Backgrounds: Instantly loads a cached cosmic background, while gracefully fetching the latest NASA APOD image.
Live Search Integration: Fully integrated web search (SerpApi) directly in the dashboard.
Dynamic Glassmorphism UI: Custom CSS featuring smooth backdrop-filters and hover animations.
Custom Bookmarks Engine: An interactive widget to add and manage your favorite links via localStorage.

🛠 Tech Stack & Setup

Tech: Pure HTML, Vanilla JavaScript, Custom CSS, and Vite.
Setup: npm install -> Add .env with VITE_NASA_API_KEY & VITE_SERPAPI_KEY -> npm run dev

📝 Challenge Checklist

HTML + CSS + JS required
Public repository with good README
Devlogs included
No AI one-click builders (100% manual code)
Custom UI/CSS
Real Features (APIs, localStorage)
Fully deployed website

NASA Pro - Devlogs

Day 1: Project Setup

Scaffolded the project using Vite to test my vanilla JavaScript skills. Created the basic HTML structure, JS entry points, and added a fallback cosmic image (hero.png) to guarantee the background never breaks.

Day 2: NASA API & Local Caching

Hooked up the NASA APOD API. To prevent hitting API rate limits, I engineered a localStorage caching system that saves the last 20 fetched images and falls back to them automatically.

Day 3: Clock & DOM Skeleton

Built a precise digital clock function with a dynamic time-based greeting. Sketched out the search bar and built a collapsible “Info Panel” with CSS transitions to display the NASA APOD descriptions.

Day 4: SerpApi Integration & Glassmorphism

Integrated SerpApi for native Google Search results. Configured a Vite proxy to fix CORS, built a custom Vanilla JS rendering engine for the results, and completely overhauled the CSS to a “Glassmorphism” theme.

Day 5: Refactoring & Bookmarks

Modularized the 650-line main.js into clean components. Replaced hardcoded quick links with a dynamic Custom Bookmarks engine, and polished the background to load instantly with zero delay.

Try project → See source code →

Open comments for this post

@DEEPML18 on my APOD site · about 4 hours ago

38m 19s logged

day 3 - Final Polish & Refactoring

massive code cleanup: broke down a monolithic main.js into clean modules (clock.js, apod.js, bookmarks.js, search.js soon)
fixed UI visibility issue where search results background obscured the NASA image
fixed z-index bug to ensure the APOD description info panel is fully readable while searching
built custom bookmarks functionality: users can now dynamically add and remove their own links that persist via localStorage (goodbye hardcoded links)
implemented zero-delay background rendering: app now instantly loads a cached background on initial load while fetching the fresh NASA API image in the background, eliminating any black screen delays
project is officially ready to ship! 🚀

Open comments for this post

@DEEPML18 on my APOD site · 1 day ago

1h 14m 21s logged

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.

Open comments for this post

@DEEPML18 on my APOD site · 3 days ago

2h 4m 5s logged

Kicked off the project. Built the Vite skeleton, wired up the NASA APOD fetch with a localStorage daily cache so it doesn’t hammer the API every reload. Added the always-visible caption bar at the bottom and a collapsible info panel behind the i button. Background controls (open HD image, Google Image Search) live in the bottom-left corner. Ran a production build locally to confirm Vite outputs a clean dist/.Files touched: src/main.js, src/styles.css, index.html