LumiLight

Inspiration

Light pollution is something that many people experience every night without realizing its full impact. We were inspired by the increasing difficulty of seeing stars in cities and suburban areas, as well as the lack of accessible tools that demonstrate how artificial light affects the night sky over time. We wanted to create a tool to visualize/understand light pollution and engage a wide audience.

What it does

It displays color-coded intensity levels on a dynamic map to help users identify low, medium, and high light pollution areas. Users can scroll a light pollution timeline, view estimated night-sky quality using Bortle scale logic, and identify optimal stargazing locations. The app also has a page that provides a practical overview of the effects of light pollution on various aspects of society.

How we built it

We built LumiLight using a combination of React with Vite, HTML/CSS, and JavaScript for the frontend design. For the backend, we used JavaScript logic that processes light pollution data to assign intensity levels, color codes, and sky-quality estimates. We used Leaflet and OpenStreetMap as the software to power the interactive map and worldwide navigation. We also used a Gemini API key to show contextual insights from sky data. Our browser’s Geolocation API centered the map on the user’s current location. Lastly, we set up Firebase for authentication to store user data for the login and sign-up.

Challenges we ran into

One major challenge was correctly aligning the light pollution intensity values with the color-coded map markers. At one point, very different locations, such as South Brunswick and Hong Kong, were appearing with the same shade of orange. We also faced challenges syncing VS Code with Git and GitHub, especially during Live Share sessions, which made it difficult at times to ensure changes were appearing correctly on all teammates’ ends.

Accomplishments that we're proud of

We’re especially proud of the UI/UX. We built a futuristic, galaxy-inspired design with smooth animations and a spinning globe-style map that allows users to navigate worldwide data intuitively. We are also very proud of our creativity of coming up with such an interesting and helpful idea and identifying key features. Overall, we successfully navigated technical challenges and built a visually engaging and interactive experience that makes complex environmental data easy to explore.

What we learned

Through this project, we learned how to collaborate effectively on a shared codebase, integrate APIs/mapping technologies, and manage real-time updates across a team using Git and GitHub. We learned a lot about how light pollution plays a role in how our pollution has grown over time. During 2010, light pollution was very high in South Brunswick due to rapid development. We spent some time trying to fix our timeline because we assumed that it was wrong and that light pollution should have increased over the years, but after some research we realized it was working correctly.

What's next for LumiLight

We want to add population density data and incorporate real-world satellite datasets for even more accurate light pollution measurements. We also want to modify the code to make it a cross-platform app rather than just a web app and improve the UI/UX's futuristic, galaxy effect further by adding more stars, more of a rotation effect, and a fade in effect for the welcome screen. Lastly, we want to get an own link for the website that others can view by clicking.

Built With

• browser
• css
• firebase
• gemini
• gps
• html
• javascript
• leaflet.js
• openstreetmap
• react
• tailwind
• vite