Solar System Visualisation

I built this project as part of a Hackathon, an immersive, interactive 3D web application that brings the solar system to life through modern web technologies. Users can explore planets, view real-time NASA data, and experience space through an engaging educational interface.

Features

Immersive 3D Solar System

• Realistic Planet Models: Main solar system uses simple spheres with textures (much lighter and faster)
• Dynamic Orbital Motion: Planets orbit the Sun with realistic speeds and distances
• Interactive Camera Controls: Smooth NASA-style pan, zoom, and rotation
• Dedicated Sidebar: Click planets to view detailed information, hover for quick facts
• Responsive 3D Scene: Optimized for smooth performance across devices

Live NASA Data Integration

• Astronomy Picture of the Day (APOD): Stunning daily space images from NASA
• Real-time Asteroid Tracking: Monitor near-Earth objects with live NASA data
• Space News Feed: Latest space exploration updates and discoveries
• Random Space Facts: Fun, educational facts paired with NASA imagery

Advanced User Experience

• Intuitive Controls: Seamless interactions for desktop and mobile
• Smooth Animations: Fluid transitions and responsive UI elements
• Modal Overlays: Animated panels for additional information
• Performance Optimized: Fast loading and smooth 3D rendering

Tech Stack

Frontend & 3D Graphics

• React – Modern component-based architecture with hooks
• Three.js – Industry-standard 3D graphics library
• React Three Fiber – Declarative 3D rendering for React
• React Three Drei – Pre-built helpers, controls, and utilities for R3F

Build & Development

• Vite – Lightning-fast build tool and dev server
• CSS3 – Custom styling with animations and responsive design
• ES6+ – Modern JavaScript with async/await and modules

APIs & Data Sources

• NASA APOD API – Astronomy Picture of the Day
• NASA NeoWs API – Near-Earth Object Web Service
• NASA Image Library – Planet images and astronomical data
• Spaceflight News API – Latest space exploration news

Getting Started

Prerequisites

• Node.js (v16+ recommended)
• npm or yarn package manager
• Modern web browser with WebGL support

Installation

# Clone the repo
git clone https://github.com/Suk022/Solar-system.git

# Navigate to project directory
cd solar-system

# Install dependencies
npm install

# Start development server
npm run dev

Development Commands

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run deploy       # Deploy to GitHub Pages

What Makes This Special

Award-Winning Project

• 3rd Place at AstroHack 2025 (Devpost)
• Recognised for execution and creative innovation

Technical Excellence

• Modern Architecture – Built with the latest React and Three.js patterns
• Performance Focused – Optimized for smooth 3D rendering
• Production Ready – Robust error handling and polished user experience
• Scalable Design – Flexible to extend with new features

Educational Value

• Interactive Learning – Explore the solar system in an engaging way
• Real NASA Data – Live information instead of static content
• Accessible – Designed for all ages and technical levels
• Edutainment – Blends education with entertainment

Future Enhancements

Planned Features

• Multi-language Support – Accessibility for global users
• Advanced Analytics – Track user interactions and insights
• Social Features – Share discoveries, facts, and favourites with friends
• Space Chatbot – Ask space-related queries and get real-time answers

Expanded Space Content

• Real-time Space Missions – Live updates on current and upcoming missions
• Constellations & Deep Space Objects – Extend beyond planets to stars, constellations, and galaxies
• Enhanced Solar System Functionality – More interactive elements like moons, rings, and asteroid belts

Technical Improvements

• WebGL 2.0 – Unlock advanced graphics capabilities
• PWA Support – Enable offline functionality and app-like experience
• Advanced Shaders – Realistic lighting, shadows, and atmospheric effects
• Performance Monitoring – Real-time optimization insights

Contributing🫶

This project started as a hackathon project and is still pretty basic. I’d love to keep improving it and make it more immersive, fun, and educational.
Contributions of any kind are welcome, from fixing bugs and improving the UI, to adding new space facts, features, or even just sharing ideas.

How to Contribute

1. Fork this repository
2. Create a branch (git checkout -b your-feature-name)
3. Make your changes and commit them
4. Open a Pull Request

Even small things — like suggestions, documentation fixes, or design ideas — are valuable!

Acknowledgments🙌

Special thanks to the communities and organisations that made this project possible:

• NASA – For providing incredible space data and imagery through open APIs
• Three.js Community – For building and maintaining the amazing 3D graphics library
• React Team – For the powerful and flexible frontend framework
• AstroHack 2025 – For the opportunity to showcase this project and push it forward

Built with 🩶 and 🍵 by Sudhanashu.