▲ 5 r/frontenddevelopment+1 crossposts

🌌 I built a NASA Deep Space Image Explorer with React (Selection Area Zoom, On-demand Translation & LocalStorage) - Live Demo

Hi everyone,

I wanted to share a web app I've been working on: NASA Deep Space Explorer & Inspector, a single-page application to search, inspect, and save deep-space images using the official NASA Image and Video Library API.

🛠️ Technical Details & Features:

  • 🔲 Custom CSS Zoom Inspector: To inspect deep space details without CORS issues caused by external CDNs (which happens when drawing on HTML Canvas), I built a custom bounding-box selection system in React using dynamic transform: scale() and transform-origin percentages.
  • 🔍 Debounced Search: Optimized HTTP requests with Axios using a 500ms debounce timer to prevent API spam while typing.
  • 💖 LocalStorage Persistence: Native browser storage implementation allowing users to save their favorite astronomical finds without needing a backend/database.
  • 🌐 On-Demand Translation: Integrated MyMemory API to translate English descriptions into Spanish on click.
  • Patreon: https://www.patreon.com/MISJUEGOS1111/posts/lanzamiento-de-y-166955775?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link

🚀 Live Demo: https://quequeres.github.io/Explorador-de-Galaxias/

🧡 Patreon Post: https://www.patreon.com/posts/166955775

📁 GitHub Repository: https://github.com/Quequeres/Explorador-de-Galaxias

Would love to get your thoughts, UX feedback, or technical suggestions!

reddit.com
u/ThreeJS_juegos — 3 days ago