Responsive Countdown page using React

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

I'm proud that I actually finished the project. I was going down so many rabbit holes regarding the flip animation, I had an initial idea to have a top/bottom static card and then a two other ones that would do the flip using CSS perspective, rotate, transform-style: preserve-3d and backface-visibility: hidden.

But I did not get that to work, and after a lot of retries and trying to grasp what was missing, I did some googling to try and find some examples that kind of matched the idea I had. And after a lot of trial and error to match the design I managed to come rather close.

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

A lot regarding the actual flipping animation, but after that the new challenges was the small details in the card like the circle, line and that the color will be a bit darker (when flipping). But a lot of brute force trial and error and stubbornness. But having a working example the codepen made it a bit easier to extend.

Another issue I had was that the sound toggle (yes I included some sound effects). When pressing the toggle it messed up the counting, but after some thinking it was obvious I needed to memoize the <FlipCountdown /> component

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

I will probably checkout other solutions and see how they solved the issues I had. But feel free to write something nice!