An in-depth look at designing and developing a modern web application that tracks the International Space Station in real-time across the globe.
Understanding the vision and goals behind ORBITAL
ORBITAL is a web-based real-time tracking application that displays the current position of the International Space Station (ISS) as it orbits Earth at approximately 27,580 km/h.
The project was born from a fascination with space exploration and a desire to make complex orbital data accessible and visually engaging for everyone.
Identifying the gap and creating value
Existing ISS trackers often suffer from poor user experience, outdated designs, and lack of engaging visual elements.
ORBITAL addresses these issues with a modern, user-centric approach to satellite tracking.
The tools and technologies powering ORBITAL
Open-source JavaScript library for interactive maps with excellent mobile support.
RESTful API providing real-time ISS position, velocity, and visibility data.
OpenStreetMap's geocoding service for reverse geocoding ISS coordinates.
Custom properties enabling dynamic theming and consistent design tokens.
Browser API for detecting user location to calculate distance to ISS.
Pure JavaScript with modern ES6+ features, no framework dependencies.
Key obstacles encountered and how they were overcome
The Problem: Updating the map every second caused performance degradation, especially on mobile devices. The marker animation was choppy, and memory usage kept increasing.
Implemented a 5-second update interval with a visual countdown timer to maintain the "real-time" feel while being resource-efficient. Used `setLatLng()` instead of recreating markers, and implemented orbit path limiting to prevent memory leaks.
The Problem: The ISS API has rate limits, and the Nominatim geocoding API requires responsible usage. Too many requests would result in blocked access.
Implemented request debouncing for geocoding, caching for recently looked-up coordinates, and graceful error handling with fallback values. Added try-catch blocks around all API calls with user-friendly toast notifications.
The Problem: The two-column layout with a full-screen map and statistics panel was challenging to adapt for mobile screens without losing functionality.
Created a mobile-first approach using CSS Grid with responsive breakpoints. On smaller screens, the layout transforms to a stacked view with the stats panel becoming a scrollable bottom section. Key information is surfaced in the mini-status bar.
The Problem: Implementing multiple color themes that affect not just CSS but also JavaScript-controlled elements like the Leaflet orbit path required a unified approach.
Used CSS custom properties (variables) as the single source of truth. Theme changes update the root element's data attribute, and JavaScript reads computed styles when needed for dynamic elements.
The Problem: Calculating the distance from a user's location to the ISS required 3D geometry, accounting for both ground distance and the ISS's altitude.
Implemented the Haversine formula for ground distance calculation, then used Pythagorean theorem to combine with altitude for true 3D distance. This provides accurate results accounting for Earth's curvature.
What makes ORBITAL stand out
Watch the International Space Station move in real-time with 5-second position updates and visual orbit path.
Comprehensive data including altitude, velocity, orbital period, and days since launch—all in an intuitive interface.
Automatically identifies which country or ocean the ISS is currently flying over using OpenStreetMap data.
Optional geolocation integration shows your position on the map and calculates distance to ISS in real-time.
Visualize ISS speed by comparing it to familiar objects like cars, planes, and the speed of sound.
Four beautiful color themes—Cosmic Blue, Nebula Purple, Mars Orange, and Aurora Green.
Power users can navigate with shortcuts: C to center, O for orbit toggle, T for auto-track, R to refresh.
Native share functionality (or clipboard fallback) to share current ISS position with friends.
Educational rotating carousel with interesting ISS facts to enhance the learning experience.
Project metrics and achievements
What I gained from this project
Learned to handle rate limits, implement caching strategies, and build resilient applications that gracefully handle API failures.
Understanding the balance between update frequency and performance, and how visual feedback can make lower frequencies feel real-time.
Implemented Haversine formula and 3D distance calculations, deepening understanding of coordinate systems and Earth geometry.
Discovered the power of CSS variables for creating dynamic theming systems that work seamlessly with JavaScript.
Gained expertise in Leaflet.js for creating custom markers, polylines, popups, and handling map events efficiently.
Importance of making complex data accessible through thoughtful design, comparisons, and progressive disclosure.
Ideas for future iterations
Push notifications when ISS is about to fly over user's location, with optimal viewing times.
PlannedAutomatic theme switching based on ISS day/night status or user's local time.
PlannedDisplay current astronauts aboard, their nationalities, and mission details.
ResearchingTrack other satellites like Starlink, Hubble, and weather satellites.
PlannedView past positions and predict future orbital paths with time slider.
ResearchingPoint your phone at the sky to see where ISS is in augmented reality.
ExploringExperience real-time satellite tracking with a beautiful, modern interface. The ISS is orbiting right now at 27,580 km/h—don't miss it!