SunTimer

Firstly, I refactored my API calls using the SWR API in order to make the code more readable. This took some time to implement as I had to learn the new framework. Afterwards, I embarked on updating my UI for this project. After I installed three.js and dependencies on the file, I used blender to design a room for the UI! I used a free room model and then spent a lot of time trying to get the windows in place.

Finished up the retrieve sunset/sunrise time part of my API calls. To find the sunrise time, I had to run a second API call so that it would retrieve sunrise time for the next day. I also refactored the isDay calculation so that now it calculates if it is day or night based on the retrieved sunset/sunrise times. I set it to display the current sunset/sunrise time based on whether it is day or night (along with a light/dark theme).

Currently the code is quite complicated, so my efforts will focus on moving towards more efficient and readable code. However, I have the basics down now.

I also want to learn how to make a cool “window effect” where the website looks like it’s looking out a window into the current sky. Maybe we can model a clock which displays the time instead of directly displaying it with text.

So far, I’ve used Claude to generate a temporary UI. I learned how to make an API call properly through react, and then was able to first fetch the user’s ip and then use that to get the coordinates.
TODO: I’ll need to call https://sunrise-sunset.org/api in order to get the times. I also need to figure out a way to implement timezone into the API call.
Attached: The current UI.