Flip Clock Countdown with Dark/Light Mode using React & Tailwind CSS

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

• ✨ Pixel-Perfect Execution: I’m extremely proud of achieving a pixel-perfect design. I paid close attention to every detail to ensure the final result matches the original challenge exactly.

• 🎨 Custom Light Mode Challenge: I pushed myself to design and implement a custom Light Mode, which wasn't part of the initial requirements, providing a more versatile user experience.

• 🏗️ Clean Architecture: I followed a strictly component-based approach. I’m proud of how I separated the UI from the Logic using Custom Hooks, making the codebase modular, clean, and easy to maintain.

• ✨ Animated Starfield: To bring the background to life, I implemented an animated starry night effect. The challenge was to make the stars feel natural without distracting the user from the main countdown. By using subtle opacity transitions and randomized animation delays, I created a dynamic yet soothing atmosphere that works beautifully in both Dark and Light modes.

What challenges did you encounter, and how did you overcome them? 🧠 Challenges & Solutions

• 🧩 3D Perspective & Layering: The core challenge was managing the multiple layers of the flipping card (top half, bottom half, and the rotating face). I solved this by implementing a 3D perspective context and using backface-hidden to ensure smooth transitions between the current and next numbers during the 180-degree flip.

• ⚡ State & Animation Sync: Synchronizing the exact moment the number changes with the CSS animate-flip sequence was tricky. I overcame this by creating a useFlip custom hook, which handles the timing logic separately from the UI component.

• 🎨 Precision Styling: To achieve a "Pixel-Perfect" look, I meticulously added details like the side notches and inner shadows using absolute positioning and pseudo-elements, ensuring the component felt like a real physical flip-clock.

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

I'm really excited to share this project! After a long break, I've finally returned to my coding journey, and completing this challenge feels like a great comeback. It’s been a blast getting back into the flow of things, and I'd love for you to check it out. Feel free to share any feedback or thoughts—I'm happy to be back! ✨