Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Saganaki22/StarMap

Repository files navigation

StarMap ๐ŸŒŒ

Live Demo

React Three.js JavaScript Tailwind CSS Lucide Icons NASA API

og-img

๐Ÿš€ About StarMap

StarMap is an interactive 3D visualization of our solar system that brings the cosmos to your browser. Built with React and Three.js, it provides a real-time, immersive experience exploring planets, stars, and near-Earth objects with live data from NASA.

โœจ Features

๐ŸŒ Real-time Solar System

  • Interactive 3D solar system with accurate planetary orbits
  • Realistic planet shaders with unique visual effects for each celestial body
  • Dynamic lighting and atmospheric effects

๐Ÿ” Smart Search System

  • Search through all celestial bodies including planets, the Sun, and asteroids
  • Real-time suggestions with object classification
  • Instant navigation to any celestial object

๐Ÿ›ฐ๏ธ Live NASA Data Integration

  • Real-time Near-Earth Object (NEO) tracking
  • Daily Astronomy Picture of the Day (APOD)
  • Potentially hazardous asteroid identification
  • Live data freshness indicators

๐ŸŽฎ Intuitive Controls

  • Mouse drag to rotate the solar system
  • Scroll to zoom in/out
  • Click objects for detailed information
  • Reset view functionality

๐Ÿ“Š Detailed Object Information

  • Comprehensive data for each celestial body
  • Scientific facts and educational content
  • High-quality NASA imagery
  • Orbital and physical characteristics

๐Ÿ› ๏ธ Technology Stack

  • React 18+ - Modern React with hooks for state management
  • Three.js - WebGL-based 3D graphics rendering
  • Tailwind CSS - Utility-first CSS framework for styling
  • Lucide React - Beautiful, customizable icons
  • NASA APIs - Real-time space data integration
  • Custom Shaders - GLSL shaders for realistic planetary effects

๐ŸŒŸ Key Components

Interactive 3D Scene

  • WebGL-powered solar system simulation
  • Real-time orbital mechanics
  • Shader-based planetary materials with atmospheric effects

Live Data Dashboard

  • Real-time NASA NEO tracking with ~20+ objects daily
  • Live data freshness indicators
  • Automatic data refresh every 30 minutes

Search & Navigation

  • Universal search across all celestial bodies
  • Smart suggestions with object typing
  • Keyboard shortcuts (Enter to select, Escape to close)

Educational Content

  • Detailed scientific information for each object
  • Fun facts and educational tidbits
  • High-resolution NASA imagery

๐ŸŽฏ User Experience

StarMap is designed to be both educational and entertaining, making space exploration accessible to everyone from students to space enthusiasts. The intuitive interface allows users to:

  • Explore the solar system at their own pace
  • Learn fascinating facts about celestial bodies
  • Track real asteroids currently near Earth
  • Experience the scale and beauty of our cosmic neighborhood

๐Ÿ”ฌ Educational Value

Perfect for:

  • Students learning about astronomy and space science
  • Educators looking for interactive teaching tools
  • Space enthusiasts wanting to explore real space data
  • Anyone curious about our solar system

๐ŸŒ Browser Compatibility

StarMap works best on modern browsers with WebGL support:

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

๐Ÿ“ฑ Responsive Design

Optimized for desktop viewing with plans for mobile optimization in future updates.