Inspiration
The beauty and mystery of the sky have always fascinated people, whether it’s tracking the sun during the day or observing the stars at night. We wanted to create an interactive experience that brings the wonders of the sky to life, right on your screen. Inspired by the natural rhythms and celestial movements, EARTH N SKY Explorer aims to educate and connect users with real-time data and visuals about our skies.
What it does
EARTH N SKY Explorer provides a dynamic experience of the sky based on the time of day. During the day, it displays information about solar activity, like solar flares and sunspots, while at night, it transitions to showcase lunar phases and star navigation. Users can explore constellations visible from their location and stay updated on upcoming celestial events, all within an engaging, animated environment.
How we built it
The project is built using React for the front-end, enhanced with framer-motion for animations to bring subtle transitions and movements. lucide-react provides the icons for sun, moon, and stars. We incorporated data from open APIs to fetch real-time solar and lunar data, which allowed us to dynamically update content. The background images and visuals are sourced from Unsplash to match the day and night themes.
For a smooth user experience, we used CSS with Tailwind classes to style elements and create a frosted glass effect for the content cards, which provides contrast without overpowering the background.
Challenges we ran into
One of the primary challenges was dynamically changing the background and content based on the time of day in a way that felt seamless and natural. Ensuring smooth transitions without lag or performance issues required some optimization. Additionally, working with real-time data from celestial events presented some complexity with handling API data consistency and responsiveness, especially for users across different time zones.
Accomplishments that we're proud of
We’re proud of creating a visually captivating and interactive experience that connects users with the sky above them in real-time. The responsive animations and smooth transitions between day and night themes have created a unique and engaging interface. The project’s ability to share educational insights about the sky, coupled with live data, makes it a valuable tool for users interested in astronomy.
What we learned
Building EARTH N SKY Explorer taught us a lot about integrating dynamic content and animations in React. We gained experience with framer-motion for handling interactive animations and lucide-react for adding detailed and customizable icons. Additionally, we deepened our understanding of handling real-time data in a web application and optimizing performance for a smooth user experience.
What's next for EARTH N SKY Explorer
Next, we plan to add a feature where users can set reminders for upcoming celestial events, such as meteor showers or eclipses. Additionally, we aim to introduce interactive sky maps that allow users to explore constellations based on their geographic location and time. Integrating augmented reality features, such as using device cameras to overlay constellations on the real sky, is another goal. We also hope to make the platform accessible as a mobile app for on-the-go stargazers.
Log in or sign up for Devpost to join the conversation.