[ ] | Devpost

Inspiration

Our inspiration for this project was the recent Artemis II Launch and what it means for humanity. A historic launch, it reminded us of all the advancements in technology that were made because humans wanted to go deeper into space and discover it further, and that the history of space travel has made our lives on Earth far more comfortable.

What it does

Our project was to design and build a web-app that depicts Earth and all of the amazing space events throughout history that have happened, and how those intergalactic parts of history have helped us advance down here on Earth. Our web-app depicts a rotating 3D Earth, with accurate geographical information, marked with pins in different locations to symbolize different space events that have happened. Clicking on the pins informs you about that specific event and any technological advancements that happened because of that event that affects our everyday lives. There is a timeline slider that focuses on different decades of space travel and technology for user experience.There is also a satellite that orbits our 3D Earth, providing information about the purpose of our web-app and more about the amazing inventions we have due to space travel.

How we built it

We built our project as a React-based interactive web application, with our frontend developed using React to make the functional components of the website. We combined multiple datasets that included historical space data and live satellite data and normalized them for uniform rendering of our UI. The styling was done using custom CSS to make space-themed design. We prototyped our web-app on Figma first, and edited into something that visually looked like what we wanted to accomplish, and then developed our web-app on React based off of our prototype.

Challenges we ran into

Our team used React for the first time during this project, and we struggled a little bit with it, but eventually pulled through. One thing we tried to do was implement an external API that would have comets orbit the planet, however despite troubleshooting, we couldn’t implement the API, making us scrap that aspect. Another idea we had to push for later in this project was adding a day-night cycle to the Earth, because the shadow wouldn’t move with the Earth’s rotation. Lastly, we struggled to get a 3D version of Earth, however we were able to implement one eventually.

Accomplishments that we're proud of

We are very proud of the fact that after our challenges we have a full working 3D model of the Earth that people can interact with and learn more about Earth without any issues, delays, or other glitches. Our web-app is also visually cohesive, accurate and visually appealing, which we are very proud of and worked very hard to do. Making the 3D model of Earth as accurate to the actual Earth involved integrating multiple datasets and making a functional and polished UI/UX experience took a lot of trial and error, so we are very proud of our final product, turning a complex idea into something understandable and appealing.

What we learned

Technically, we learned how to structure a React application, managing data across multiple sources and data normalization/processing, and integrating real-world APIs into visual applications. On the non-technical side, we learned a lot about time management and how to break down a technical project that adds onto each other into different steps for multiple people to complete simultaneously and also how to adapt quickly and pivot and debug when something does not work as planned while still holding ourselves and our project to high standards.

What's next for [ ]

While our web-app is functional and visually appealing, there are always more features to add. Our main goal would be to update our web-app so that there are more space events and inventions on there so that our web-app is more comprehensive. We also plan on updating our visuals so there is more accuracy and so that it is more visually appealing to users.