Cosmos

A real-time space data visualisation dashboard: šŸ›°ļø Real-time ISS tracking šŸŒ Interactive Earth tracker šŸ“Š Live data analytics with dynamic charts šŸŒŒ Space gallery with images and news

Comment

Inspiration

I've always been fascinated by space, but I noticed something frustrating: all the cool space data is scattered across different websites and buried in complex APIs. Want to know where the ISS is? Check one site. Space weather? Another site. Mars data? Yet another place.

One night while browsing NASA's APIs, I thought: "Why isn't there a simple dashboard where anyone can see what's happening in space right now?"

I imagined my little cousin being able to open her phone and instantly see the International Space Station flying overhead at 17,500 mph, or a teacher showing students live Mars weather data. That's when COSMOS was born - to make space exploration as easy as checking Instagram.

What it does

COSMOS Dashboard brings real-time space data to your fingertips in a beautiful, easy-to-use interface.

  • šŸŒ Live ISS Tracking - See exactly where the space station is right now (currently speeding over the Atlantic at 27,559 km/h with 7 astronauts aboard).
  • ā˜€ļø Space Weather - Check if there might be auroras tonight (currently 65% chance!)
  • šŸ“” Satellite Network - Monitor 8,684+ active satellites including the massive Starlink constellation
  • šŸ”“ Mars Updates - Current conditions on Mars (Sol 8,175, chilly -74Ā°C)
  • šŸ“± Works Everywhere - Perfectly designed for your phone, tablet, or computer

It's like having NASA's mission control in your pocket, but actually fun to use.

How we built it

The Stack:

  • React + Vite for fast, modern web development
  • Real-time APIs pulling live data from space agencies
  • Vercel deployment for instant global access
  • Mobile-first design because everyone uses their phone

48-Hour Sprint:

Day 1: Built the foundation - set up React, figured out which space APIs work, and got basic ISS tracking running. Spent way too long making the mobile navigation work properly. Day 2: Added space weather, satellite data, and Mars info. Fixed a million little bugs, deployed to Vercel (after some deployment drama), and polished the design until it looked professional.

Key Decision: I opted to build everything from scratch instead of using heavy frameworks. This made it lightning-fast and gave me complete control over the mobile experience.

Challenges I ran into

  • My first deployment hung for 13 minutes because Vite was running in dev mode instead of build mode. Learned a lot about deployment configs at 2 AM.

  • The mobile navigation completely broke - users couldn't tap anything. Turns out I had conflicting z-index values and overcomplicated touch event handlers. Sometimes simple is better.

  • After fixing the build, CSS and JavaScript files were being served as HTML. The browser was basically saying "this is not CSS, I refuse to load it." Had to simplify the Vercel config completely.

  • Space APIs are... quirky. Some go down randomly, some have weird rate limits, and some return data in formats that make no sense. Built lots of error handling and fallbacks.

  • Added some cool animations that made the site feel sluggish on mobile. Removed most of them - performance > pretty effects.

Accomplishments that I'm proud of

  • Actually finished in 48 hours - from idea to live, working website
  • Mobile-first design - works beautifully on phones (where most people will use it)
  • Real-time data - everything updates live, so you're seeing actual current space information
  • Made complex data accessible - turned intimidating space APIs into something my mom could use
  • Solved every deployment issue - learned more about Vercel, MIME types, and build configs than I ever wanted to
  • Clean, professional design - looks like something NASA might actually use

What we learned

Technical Skills:

  • React performance optimization for real-time data
  • Mobile touch event handling (the hard way)
  • Deployment debugging and configuration
  • API integration and error handling
  • Responsive design beyond just "make it smaller"

Real Lessons:

  • Start simple, add complexity gradually - my first mobile nav was way overcomplicated
  • Deploy early and often - catch issues before the deadline
  • Mobile users are real users - if it doesn't work on phones, it doesn't work
  • Error handling is not optional - space APIs fail more than you'd think
  • Performance matters more than fancy animations - especially on mobile

Space Knowledge: I actually learned a ton about orbital mechanics, space weather, and satellite networks. Did you know the ISS orbits Earth every 93 minutes? Or that there are over 8,000 active satellites up there?

What's next for Cosmos

Immediate Goals

  • Mobile apps for iOS and Android with push notifications when the ISS passes overhead
  • More space missions - track SpaceX launches, NASA missions, Mars rovers
  • User accounts so you can customize your space dashboard
  • Better error handling because space APIs will always be unpredictable

Bigger Goals

  • AR features - point your phone at the sky to see where satellites are
  • Educational tools - partner with schools to teach space science
  • Social features - share cool space events with friends
  • Multiple languages - make it accessible worldwide

Dream goals:

  • The go-to platform for space data - like Weather.com but for space
  • Educational partnerships with schools and museums
  • Citizen science projects - let users contribute to real space research
  • VR space exploration - virtual ISS tours and Mars walks

My ultimate vision: Make space exploration as accessible as checking the weather. Every kid should be able to track the ISS from their phone and feel connected to humanity's greatest adventure.

COSMOS Dashboard - because space should be for everyone, not just rocket scientists. šŸŒŒ

Built with ā¤ļø and way too much coffee during a 48-hour hackathon

Built With

Share this project:

Updates