Selenic

Selenic: Track the moon with a beautiful, interactive guide. Get instant phases, rise/set times, and a 7-day forecast for your location.

Comment

About Selenic

Inspiration

The moon has always been a source of wonder and fascination. We wanted to capture that feeling in a simple, beautiful web application. Our goal was to create more than just a utility; we wanted to build an experience. That's where the name Selenic came from, inspired by Selene, the ancient Greek goddess of the Moon. The idea was to create a modern tribute to an ancient wonder—a digital tool that felt both magical and personal.

What We Learned

This project was a fantastic learning journey. We deepened our understanding of modern front-end development, particularly:

  • JavaScript for Interactivity: We learned how to manipulate the DOM to create a dynamic, single-page application experience, from fetching user location to updating the UI in real-time.
  • Using External Libraries: Integrating SunCalc.js was a key part of the project. It taught us how to work with third-party APIs to handle complex calculations (like moonrise and moonset times) that would be incredibly difficult to implement from scratch.
  • CSS Animations & Transitions: A major focus was on the user experience. We spent a lot of time learning how to craft smooth, meaningful animations using CSS transitions and transforms to make the app feel fluid and responsive.
  • Responsive Design with Tailwind CSS: Using a utility-first framework like Tailwind CSS helped us quickly build a clean, responsive layout that looks great on both mobile devices and desktops.

How We Built It

The development process was iterative:

  1. Core Functionality: We started with the most basic feature: calculating and displaying today's moon phase.
  2. Adding Data: We integrated SunCalc.js to add accurate moonrise/moonset times and improve the phase calculation. This is also when we added the geolocation feature to provide location-specific data.
  3. UI/UX Design: With the core logic in place, we focused on the user experience. We designed and built the greeting page, the main tracker interface, and the smooth transitions between them. This is when the galaxy background and the "Quicksand" font were added to establish the theme.
  4. Polishing: The final stage was all about refinement. We added the cascading animation for the 7-day forecast, subtle click effects on buttons, and the real-time progress bar for moon visibility to make the app feel complete and polished.

Challenges We Faced

  • Accurate Moon Calculations: Our initial algorithm for the moon phase was a bit simplistic. The real challenge was finding a reliable and accurate method. Switching to SunCalc.js solved this but required learning how to properly use the library and interpret its data.
  • Smooth Animations: Creating the animated reveal for the 7-day forecast was tricky. We had to carefully manage CSS properties like max-height, opacity, and transform to get the smooth, scaling effect we wanted without causing the page layout to jump.
  • Graceful Fallbacks: Not every user will grant location access. A key challenge was ensuring the app still worked perfectly if permission was denied. We solved this by implementing a default location (Kozhikode, India) and displaying a clear message to the user.

Built With

Share this project:

Updates

Submission history