World Clock App Built With React + SCSS

What are you most proud of, and what would you do differently next time?

This was a big challenge for me as I had very little experience working with API's, and I had made it a big point for myself to start working and getting comfortable with them. This challenge had three different API's that needed to be integrated; one of which was dependent on the other. So I definitely had my work cut out for me.

It was also a chance for me to practice some more React that I had learned recently, specifically useEffect, useRef and custom hooks.

I also got to work with a React animation library for the first time, Framer Motion. This was very interesting, and although it was very minor exposure, I can see how useful this can be for future projects.

Given that, it was a simple project but I'm proud that I was able to complete it and get it working. I wouldn't say it perfect as there are some areas where the functionality could be improved, but I would say it's the best I can do at this given moment with the knowledge that I have.

What challenges did you encounter, and how did you overcome them?

As mentioned above, getting all the API's to work correctly with each other was the biggest challenge. There was also the issue where the API's provided had a usage limit for their free plans, so I had to source alternatives which worked out in the end.

In order to get the app to function properly, these were my priorities:

• Get the user's location
• Use the location data to receive the timezone
• Determine what data is dynamic and what is static
• Determine when to trigger each API call

Given this, the most challenging part of this task was definitely order of operations; how and when to call each API, especially since one API was dependent on the payload of another so calling said API too early would result in the app breaking completely.

What specific areas of your project would you like help with?

What I'd like some feedback on is the following:

1. What could I have done differently with the way I laid out my code, specifically the JSX? I'm really open to all feedback as while I'm learning React, I'd like to stick to best-practices as much as possible.

2. Is there manner in which I'm using the 'useEffect' hooks correct? I noticed that React was mentioning I had missing dependencies, but when adding these it would cause the effect to break.

3. I used Framer Motion for the 'Additional Info' window so that it would animate on mount and dismount, but I noticed it would break the layout during the animation. So any feedback there would be appreciated, as this is my first rodeo with the library.

4. General performance seems to be quite slow. Specifically with the API calls. It takes a few seconds for the data to be retrieved, so any feedback there would also be appreciated.