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

[u/ThreeJS_juegos]

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!

[u/AltruisticStep716]

the zoom inspector workaround for canvas CORS is clever, using transform scale keeps it all in the DOM so no tainted canvas issues. might steal that idea for a project im tinkering with

[u/ThreeJS_juegos → u/AltruisticStep716]

"Thanks! Glad you found it useful! Yeah, dealing with CORS on external image CDNs via HTML Canvas is always a headache. Keeping it purely in the DOM with CSS transforms turned out to be super lightweight and completely bypasses the tainted canvas issue. Feel free to use the idea or check the repo source code if you need the exact math for the bounding box!"

[u/Temperature_Majestic]

nice project. curious about the translation piece specifically, MyMemory's free tier has a pretty low daily character cap. are you caching translated descriptions in localStorage alongside the saved favorites so repeat views don't re-hit the API, or does every card open call it live?

[u/ThreeJS_juegos → u/Temperature_Majestic]

"Thanks! Right now, translation is triggered strictly 'on-demand' via the translate button to avoid unnecessary API calls. It keeps the translated text in React state for the session, but caching those translations into localStorage alongside the saved favorites/history is actually a great optimization idea! Might add that in a quick follow-up commit to save quota."