COSMOS REWIND

Cosmic Virtual Time Travel – A magical space journey through NASA’s pictures of the day, where users can explore the universe, save favorite moments, and leave messages in a personal time capsule.

Comment 3

Inspiration

The cosmos has always fascinated me — vast, mysterious, and full of moments that shaped human understanding. I wanted to create a space where anyone could explore those cosmic events and also reflect personally. That's how Cosmos Rewind was born — a project that combines science, storytelling, and serenity.

What it does

Cosmos Rewind is a space-themed web application where users can:

  • Select any date to view NASA’s Astronomy Picture of the Day (APOD).
  • Discover random space events with a single click.
  • Experience background music that changes based on the cosmic theme (like “Mars” or “Moon”).
  • Save personal thoughts or reflections in a local "Time Capsule".
  • Bookmark favorite events in a personal "Space Scrapbook".

The goal was to create something that feels both informative and emotionally immersive.

How I built it

  • Frontend: HTML, CSS, and vanilla JavaScript for structure, styling, and interactivity.
  • API Integration: NASA’s APOD API to fetch daily space imagery and descriptions.
  • Backend: A Node.js + Express server to proxy API requests securely and hide my NASA API key using environment variables.
  • Deployment: Hosted using Render to serve both frontend and backend.
  • Storage: Used browser LocalStorage to persist user-entered memories and favorite events.

The focus was on keeping the stack simple, while still delivering a polished experience.

Challenges I ran into

  • Handling errors from the NASA API, especially rate limits and missing data for future dates.
  • Making sure my API key remained hidden in public deployments using .env and backend routing.
  • Managing static assets and ensuring audio files played correctly across browsers.
  • Figuring out how to deploy a full-stack app on Render and troubleshoot static file paths.

Accomplishments

  • Built a fully working full-stack app solo using only core web technologies.
  • Designed and implemented an interactive, music-backed experience that ties into real NASA data.
  • Successfully hid my API key and deployed the app live without exposing sensitive information.
  • Created a personal feature — the Time Capsule — that blends emotion with astronomy.

What I learned

  • How to use NASA’s APOD API effectively, and work around its constraints.
  • Best practices for securing API keys in frontend projects using backend proxies.
  • The importance of clear file structure and relative paths in full-stack deployment.
  • That even with basic tools, it’s possible to build an engaging and deeply personal web app.

What’s next for Cosmos Rewind

  • Add video support for APODs that are YouTube-based.
  • Enhance the Time Capsule to export entries or sync across devices.
  • Expand beyond APOD to other NASA datasets like Mars Rover photos or asteroid tracking.
  • Let users share favorite events or memories publicly in a “Starlog” feed.
  • Polish the UI and improve accessibility for more inclusive interaction.

Built With

Share this project:

Updates