🎂 The Birthday Wishbook

Your Birthday, Your Wishlist, One Link

The Birthday Wishbook is a premium, interactive web application designed with modern Claymorphic aesthetics. It provides users with a central dashboard to track their birthday countdown, group wishlist items under custom categories, dynamically adjust categories order, and share a single public URL with their friends and family that refreshes silently in the background.

---

✨ Features

🎨 Visual & Design

• Claymorphic Styling: Vibrant dual-tone blurred floating gradients, soft 3D shadows, organic border-radii, and micro-interactions.
• Custom Toast Alerts: Smooth sliding toast notifications replacing standard browser alert dialogs.
• Interactive Countdown: Real-time birthday countdown timers and zodiac badges on both the dashboard and public views.

🛠️ Wishlist Management

• Custom Categories: Organize your products across custom categories of your choice.
• Category Reordering Index: A drag-and-drop index widget inside the sidebar that reorders your category blocks dynamically in the main view and persists in the database.
• Interactive Card Overlays: Compact wishlist cards where the entire card is clickable, while edit/delete actions remain isolated.
• Custom Confirm Dialogs: A clean, styled popup modal for confirming item deletions.

🔗 Public Sharing & Syncing

• One-Link Sharing: Visitors can view your themed birthday countdown page and wishlist products.
• Zero-Flicker Background Sync: The shared public page runs a silent background worker that updates your wishlist changes every 10 seconds via DOM-diffing.

---

Screenshots

Tech Stack

Project Structure

the.birthday.wishbook/
├── api/
│   ├── add-item.php
│   ├── delete-item.php
│   ├── edit-item.php
│   └── update-category-order.php
├── assets/
│   ├── css/
│   │   └── style.css
│   ├── img/
│   │   ├── countdown.svg
│   │   ├── flaticon.png
│   │   ├── hero-cake.png
│   │   ├── linksvg.svg
│   │   └── wishes.svg
│   ├── js/
│   │   └── app.js
│   ├── SCRN_1.png
│   ├── SCRN_2.png
│   └── SCRN_3.png
├── includes/
│   ├── footer.php
│   ├── functions.php
│   └── header.php
├── .gitignore
├── .htaccess
├── change-password.php
├── config.php
├── db.php
├── env.example.php
├── index.php
├── schema.sql
├── signin.php
├── signout.php
├── signup.php
├── wishlist.php
└── README.md

---

Made with ❤️ by Alvin
⭐ If you found this project useful, consider giving it a star.