Owen McGinley
This is the main onboarding screen of SkyCast. A little blurb about what SkyCast does is offered, and then a MUI date picker is shown so you can pick what date you want a SkyCast for. The date field is set to the current date on page load. As of n

SkyCast

I have a thing for taking walks at sunset. Sunsets are really pretty when the conditions line up, they’re always lasting about 30-45 minutes as clouds illuminate in different ways, and it generally gets me to walk a solid 2-3 miles which is good for my physical health. But sometimes, I want to know in advance if a sunset walk is worth going on, or if I should focus my attention elsewhere.

And that’s where SkyCast comes in! SkyCast uses a custom-built algorithm to calculate an approximate sunset (or sunrise) score based on important weather factors, all shown in a nice simple UI that’s mobile friendly.

SkyCast is notable as it’s the first semi-major project built using React. I’ve still got a lot to learn about React, but SkyCast has been a great stepping stone to build better and better web apps. The backend is written in Python using the Flask framework.

—

Lines of code: ~1,000

Languages/Frameworks: React w/ MUI for the frontend (+ plain old JavaScript), Python w/ Flask for the backend, Dark Sky API

Timeframe: June 2022 - present

—

You can visit this project at https://skycast.owenthe.dev.

Here’s what you first see when you launch SkyCast! It’s a pretty simple UI, and that extends through the rest of the app. You’re presented with one field, the date to get a SkyCast for. It’s automatically set to the current day, although clicking i

Here’s what you first see when you launch SkyCast! It’s a pretty simple UI, and that extends through the rest of the app.

You’re presented with one field, the date to get a SkyCast for. It’s automatically set to the current day, although clicking it brings up a MUI date picker.

For now, SkyCast can only get a forecast for your current location. Maybe in the future I’ll add support for custom locations, but it’s not a huge priority.

One cool thing - I updated the code so that it gets your current elevation (when supported by your device) to enhance the accuracy of some timings you’ll see later on.

And here’s the forecast page! Again, super simple, but let’s break each part down. There’s two boxes for sunrise and sunset. Each of them have a score that’s easy to view, in addition to a circular percentage filled to whatever the score is. Just

And here’s the forecast page! Again, super simple, but let’s break each part down.

There’s two boxes for sunrise and sunset. Each of them have a score that’s easy to view, in addition to a circular percentage filled to whatever the score is.

Just below that, you’ll see golden hour timings for sunrise and sunset. The elevation data mentioned an image ago comes in handy to enhance the accuracy of these timings! In addition, the exact time of sunrise/sunset is shown.

Below all that is a quick blurb describing what this prediction means. A score around 40% means a pretty standard sunrise/sunset with little cloud cover.

Clicking on the show details button, the boxes expand to reveal the factors that went into the prediction. SkyCast only looks at weather data at the users location and at points to the east and west, weighing the value of each data point around sun

Clicking on the show details button, the boxes expand to reveal the factors that went into the prediction.

SkyCast only looks at weather data at the users location and at points to the east and west, weighing the value of each data point around sunrise/sunset to determine a final score.

The actual algorithm was developed using weather data correlated to images in my camera roll, plus some trial and error during the summer when the weather was much nicer for walks (it’s getting too cold now that it’s winter!). Overall, the algorithm tends to get things right if Dark Sky is accurately reflecting what’s happening with the cloud cover.

You’ll also notice that those circular percentage things are color coded! The one on the right is color coded green for when the score is above 65-70%, and the one on the left is color coded red because it’s a pretty low score.

SkyCast is also mobile optimized, with MUI making this a breeze. When the screen width becomes too small, the sunrise/sunset boxes stack on top of each other. Having good mobile usability was super important here, usually I’m checking these forecas

SkyCast is also mobile optimized, with MUI making this a breeze. When the screen width becomes too small, the sunrise/sunset boxes stack on top of each other.

Having good mobile usability was super important here, usually I’m checking these forecasts on my phone (and rarely on my laptop).

In the last couple updates to SkyCast, I did lots more error handling so that it was harder to get a generic 500 internal server error when making a forecast. Notable improvements include nicely erroring forecast requests for way in the future, and

In the last couple updates to SkyCast, I did lots more error handling so that it was harder to get a generic 500 internal server error when making a forecast.

Notable improvements include nicely erroring forecast requests for way in the future, and also erroring out requests when a sunrise/sunset time isn’t present (basically only applies to places close to the poles).

Because SkyCast has to make 3 Dark Sky requests per SkyCast, users are rate limited to making 10 forecasts in an hour. Exceed that rate limit and SkyCast handily informs you that you’re being rate limited, but also when the rate limit expires.

Because SkyCast has to make 3 Dark Sky requests per SkyCast, users are rate limited to making 10 forecasts in an hour. Exceed that rate limit and SkyCast handily informs you that you’re being rate limited, but also when the rate limit expires.

Lastly, here’s the origins of SkyCast - a Python script that prints out the forecast for a fixed location (my apartment in this case). Things have definitely come a long way since this little script (look carefully and you’ll see this project was o

Lastly, here’s the origins of SkyCast - a Python script that prints out the forecast for a fixed location (my apartment in this case).

Things have definitely come a long way since this little script (look carefully and you’ll see this project was originally called SunCast).

On the day I made the SkyCast prototype, it predicted a solid 80-85% sunset score. I then proceeded to trust my code, walk to the nearest hill, and the sunset was actually pretty good!

And that’s SkyCast! A cool little project in React that was fun to code, and I keep using it on the regular!