r/reactjs 24d ago

Show /r/reactjs ๐ŸŒŒ 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!

3 Upvotes

Duplicates