Skip to content

README.md

Latest commit

 

History

History
151 lines (109 loc) · 4.29 KB

README.md

File metadata and controls

151 lines (109 loc) · 4.29 KB

BloomBox 🌸

A beautiful and interactive web application for creating and sharing personalized digital flower bouquets. Send heartfelt messages with stunning virtual flower arrangements for any occasion.

BloomBox TypeScript TailwindCSS

✨ Features

  • 🌺 6 Beautiful Flowers: Choose from Purple Bloom, Plumeria, Sunflower, Orange Dahlia, Cosmos, and Zinnia
  • 🎨 Custom Arrangements: Drag and drop flowers to create your perfect bouquet
  • 💌 Personalized Messages: Add heartfelt notes with AI-powered suggestions for every occasion
  • 🎉 Multiple Occasions: Birthday, Love, Anniversary, Thank You, Get Well, and more
  • 🎭 Beautiful Backgrounds: Select from 5 elegant background themes
  • 🔗 Easy Sharing: Generate shareable links to send your bouquet to anyone
  • 📱 Responsive Design: Works perfectly on desktop, tablet, and mobile devices
  • ✨ Smooth Animations: Delightful animations including falling petals and bloom effects

🚀 Getting Started

Prerequisites

  • Node.js 18.0 or higher
  • npm or pnpm package manager

Installation

  1. Clone the repository:
git clone https://github.com/Rahmankarim/BloomBox.git
cd BloomBox
  1. Install dependencies:
npm install
# or
pnpm install
  1. Run the development server:
npm run dev
# or
pnpm dev
  1. Open http://localhost:3000 in your browser.

🛠️ Tech Stack

📁 Project Structure

BloomBox/
├── app/                    # Next.js app directory
│   ├── bouquet/[data]/    # Dynamic bouquet view page
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/
│   ├── bouquet/           # Bouquet-specific components
│   │   ├── builder.tsx    # Main bouquet builder
│   │   ├── bouquet-preview.tsx
│   │   ├── flower-picker.tsx
│   │   └── ...
│   └── ui/                # Reusable UI components
├── lib/
│   ├── bouquet-data.ts    # Flower data and configuration
│   └── utils.ts           # Utility functions
├── public/
│   └── flowers/           # Flower images (PNG format)
└── styles/                # Global styles

🎨 Customization

Adding New Flowers

  1. Add flower image (PNG with transparent background) to public/flowers/
  2. Update the FLOWERS array in lib/bouquet-data.ts:
{
  id: 'your-flower',
  name: 'Your Flower Name',
  emoji: '🌷',
  color: '#FF00FF',
  description: 'Flower description',
  image: '/flowers/your-flower.png',
}

Customizing Occasions

Edit the OCCASIONS array in lib/bouquet-data.ts to add or modify occasions.

Changing Backgrounds

Modify the BACKGROUNDS array in lib/bouquet-data.ts to customize background colors.

🌐 Deployment

Deploy on Vercel

The easiest way to deploy BloomBox is using Vercel:

Deploy with Vercel

Manual Deployment

  1. Build the project:
npm run build
  1. Start the production server:
npm start

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Rahman Karim

🙏 Acknowledgments

💖 Support

If you found this project helpful, please consider giving it a ⭐ on GitHub!

Crafted with love by Rahman Karim. Send flowers, spread joy. 🌸