An interactive 3D satellite visualization dashboard built with Next.js, React Three Fiber, and real-time TLE (Two-Line Element) data from Space-Track.org. Go to https://spacevizbe--spaceviz-4aa96.us-central1.hosted.app/ to view hosted app!
- 🌍 Real-time 3D visualization of Earth with satellites orbiting
- 🛰️ Multiple satellite categories: Space Stations, Weather, GPS, Science, and Starlink
- 📡 Live orbital data from Space-Track.org
- 🎯 Interactive satellite selection with orbital path visualization
- 🎨 Unique 3D models for different satellite types
- 📊 Satellite information panel with orbital parameters
- Framework: Next.js 16
- 3D Rendering: React Three Fiber + Three.js
- Satellite Calculations: satellite.js
- Styling: Tailwind CSS
- Language: TypeScript
- Node.js 18+
- A free Space-Track.org account
git clone https://github.com/calebjsmith7/spaceDashboard.git
cd spaceviznpm installCreate a .env file in the root directory with your Space-Track.org credentials:
SPACE_TRACK_USER=your_spacetrack_username
SPACE_TRACK_PASS=your_spacetrack_passwordNote: You must create a free account at Space-Track.org to obtain these credentials. The API provides real-time TLE data for satellite position calculations.
npm run devOpen http://localhost:3000 with your browser to see the result.
app/
├── api/satellites/ # Space-Track API proxy
├── context/ # React context for camera and satellite state
├── dashboard/ # Main dashboard page and components
│ └── components/
│ ├── planets/ # Earth, Sun, and orbit visualizations
│ └── satellites/ # Satellite components and 3D models
├── services/ # Satellite data processing utilities
└── types/ # TypeScript type definitions
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
The easiest way to deploy your Next.js app is to use the Vercel Platform.
Remember to add your SPACE_TRACK_USER and SPACE_TRACK_PASS environment variables in your Vercel project settings.
MIT