This Birthday Wish App is an interactive birthday celebration built with Next.js. Users can light candles, pop balloons, and enjoy confetti along with a celebratory sound, all through smooth animations. Customize the experience with different sound options, making it a fun way to send someone a virtual birthday wish!
- Interactive Candles: Click the button to light candles one by one.
- Balloon Popping: Balloons pop after the candles are lit.
- Confetti Celebration: Confetti animation plays when celebrating.
- Custom Sounds: Choose from different sound effects to play during the celebration.
- Dynamic Animations: All elements animate smoothly with Framer Motion.
- Responsive Design: Works on all screen sizes.
- Next.js: Framework for React-based applications.
- Framer Motion: Animations for a smooth, dynamic UI.
- React Icons: Icons for candles and balloons.
- useSound: For playing celebration sound effects.
- Dynamic Import: For loading the confetti component only on the client-side.
- Vercel: Hosting the app for fast, serverless deployment.
-
Clone the repository:
git clone https://github.com/Sheikh-Muhammad-Mujtaba/birthday-wish_app.git
-
Install dependencies:
cd birthday-wish-app npm install -
Start the development server:
npm run dev
-
Open the app in your browser:
http://localhost:3000 -
Modify text to show card title, description and date.
-
Modify the sound to change the celebration sound effect.
- Open the app and select a sound from the dropdown menu.
- Click the "Celebrate!" button to start lighting the candles.
- Watch as candles light up and balloons pop.
- Enjoy the confetti and sound!
Check out the live version of the app deployed on Vercel:
This app is deployed using Vercel. To deploy your own version:
- Create a Vercel account and connect your GitHub repository.
- Push your project to GitHub and link the repository in your Vercel dashboard.
- Vercel will automatically deploy your project.
Enjoy the birthday celebrations! 🎂🎈🎁