Interactive Solar System

• 

  Experience a 3D view of our solar system in full-screen mode.

• 

  Main Website Design Overview.

• 

  Quick Insights on Planet Hover and Essential Tips for Navigation.

• 

  Sidebar for each planet featuring detailed scientific, cultural, and real-time information.

• 

  Featured event for each planet fetched using the NASA API.

• 

  Menu to explore and learn about Solar System Bodies and to see latest Space News & Event.

• 

  Asteroid tracker, View real-time or recent data about near-Earth asteroids using NASA’s Asteroids - NeoWs API.

• 

  Random Space Event, educate users with interesting, lesser-known facts or events from the universe each time.

• 

  The APOD feature helps users discover new wonders of the universe every day.

Inspiration

I wanted to make space science accessible, interactive and visually stunning for everyone. Inspired by the awe of looking up at the night sky, I tried to build a tool that lets users explore the solar system in 3D, learn, and connect with live NASA data - all from their browsers.

What it does

• Explore a realistic, interactive 3D model of the solar system.
• Click on planets to reveal detailed scientific and cultural information in a sidebar.
• Hover over planets for quick facts and stats.
• View high-resolution textures and zoom in for close-up details.
• Access live NASA data, including Astronomy Picture of the Day and asteroid tracking.
• Enjoy a modern, responsive, and space-themed UI.

How I built it

• Frontend: React, Vite, and Three.js (via @react-three/fiber and @react-three/drei) for 3D rendering.
• UI/UX: Custom CSS for a modern, space-inspired look; responsive design for all devices.
• Data: Planetary data from NASA APIs and custom datasets; high-res textures for realism.
• Features: Modular React components for planets, sidebar, quick facts, and more.
• APIs: Integrated NASA APIs.

List of all APIs used

1. NASA Image and Video Library API: Used in
   • Live Planet Gallery: Fetches images for planets
   • Random Space Fact: Fetches a random image and fact
2. NASA Astronomy Picture of the Day (APOD) API: Used in
   • Featured Event: Astronomy Picture of the Day modal
3. NASA Near Earth Object Web Service (NeoWs) API: Used in
   • Asteroid Tracker: Shows near-Earth asteroids for the current day
4. Spaceflight News API: Used in
   • Space News & Events: Fetches latest space news articles

Challenges I ran into

• Handling high-resolution textures efficiently in the browser.
• Achieving smooth, NASA-like camera controls for 3D navigation.
• Managing state between 3D interactions, sidebars, and info overlays.
• Dealing with CORS and rate limits on NASA APIs.
• Ensuring the UI remained responsive and visually appealing across devices.

Accomplishments that I'm proud of

• Built a fully interactive, educational 3D solar system in a short time.
• Created a seamless, modern user experience with smooth transitions and overlays.
• Integrated live NASA data for real-time learning.
• Designed a UI that’s both beautiful and highly usable.
• Tried to make space science fun and accessible for all ages.

What I learned

• Deepened my skills in React, Three.js, and 3D web development.
• Learned best practices for integrating third-party APIs and handling CORS.
• Gained experience in designing for both performance and aesthetics.

What's next for Interactive Solar System

• Add more live data sources (e.g., exoplanets, space weather, missions).
• Implement user-driven exploration (e.g., fly to any point, custom orbits).
• Add quizzes, challenges, or AI chat bots.
• Expand to cover more celestial bodies (moons, asteroids, comets).

Built With

• apis
• css
• javascript
• jsx
• react
• react-modal
• react-three/drei
• react-three/fiber
• three.js
• vite
• vscode
• web