I've been navigating the world of full-stack development for a while now, but lately I've decided to make an exciting pivot. I've been diving deep into the world of Python, Data Science, and Machine Learning spending my days immersed in complex datasets, training models, and writing logic heavy backend code.
I wanted to build something purely for joy. I also didn't want my frontend skills to get rusty while I focused so much on the data side of things. I missed the immediate visual gratification of UI/UX, so I decided to combine my technical rigor with a little bit of digital magic.
That's how this project was born. I wanted to build a bridge between a traditional greeting card and a modern web experience something that feels personal, interactive, and just a little bit fun.
✨ My Approach
I wanted this app to be more than just a static “Happy Birthday” page.
It needed to be an experience. The goal was to create a digital ritual: the act of blowing out candles to unlock a heartfelt message.
React 18 ended up being the perfect engine for this. I focused on making the interaction feel tactile and rewarding:
Interactive Design: Using a component-based UI that reacts to the user in real-time.
The "Blow" Mechanism: On desktop, the magic happens via hover. On mobile devices, each candle is extinguished by tapping them individually.
Visual Reward: Once the last candle is out, the app triggers a surprise confetti celebration and a modal transition.
(Birthday Cake): A charming 3-tiered digital birthday cake, complete with colorful candles and Turkish text.
(Celebration State): The celebration is triggered! Confetti rains down as a surprise birthday message card appears.
🎂 A Touch of Soul (Turkish UI)
The interface and the celebration message are written in Turkish. Why?
Because some things, like a heartfelt birthday wish or the command to “Mumları üfle” (Blow out the candles), just carry more soul in your native language. It adds a personal, intimate touch to a digital interaction that code alone can't replicate.
🔍 Behind the Scenes (The Tech Stack)
While the final result looks like a simple celebration, the engine under the hood is built with the same precision I apply to my data-heavy projects:
Custom CSS Animations: I designed the spiral candles and the flickering flame effects using pure CSS3. It was a fun challenge to make the smoke and extinguishing transition feel smooth and responsive.
State Management: React handles the state of each candle. The app listens for when all five candles are toggled to false before launching the Confetti component.
Responsive UI: Whether someone opens this on a high-res desktop or a mobile phone, the cake stays centered and the interaction remains intuitive.
🖥️ Choose Your Experience: (Web or Code)
I wanted this project to be accessible for everyone—from my non-tech friends who just want to see the cake, to developers curious about the implementation.
Live Demo: Instant access via Netlify → Nice Birthday App
Source Code: Cleanly structured React components for those who want to see how the animations are triggered.
🚀 Explore the Project
lemancaliskan
/
birthday-app
Interactive React.js web application for birthday greetings. Includes state-managed animations, CSS-based spiral candle designs, and responsive Ul components.
🎂 Birthday Celebration App
This project is an interactive, fun, and modern digital greeting card application designed to celebrate your loved ones' birthdays Users can "blow out" the candles on the cake (by hovering over them) to trigger a secret message and a confetti celebration.
📺 Screenshots
✨ Features
- Interactive Candles: Realistic extinguishing effect when hovering over the candles.
- Surprise Celebration: Automatic confetti rain and a special message card triggered once all candles are blown out.
- Responsive Design: Fully compatible with mobile and desktop devices with a sleek interface.
-
Modern Tech Stack: Developed using
React.jsand theLucide-reacticon library.
🧬 Technologies Used
- React 18: Component-based UI development.
- CSS3: Custom spiral candle designs and smooth animations.
- Lucide React: Modern and lightweight icon sets.
- Google Fonts: Montserrat typeface for a clean look.
🚀 Live Demo (Web Version)
You can now try the application directly in your browser without any installation Go…
🫱🏻🫲🏻 Contributing
“If you have ideas for new interactive features perhaps adding different cake flavors or a ‘make a wish’ voice trigger feel free to open an issue or a Pull Request. Let’s keep building things that make the web a friendlier place.”
Top comments (0)