🌌 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()andtransform-originpercentages. - 🔍 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/ThreeJS_juegos — 3 days ago