Valentine Bouquet 🌸

I created this app to facillitate community building (and for fun). This was my fist ever web app :) completed through pure grit and determination. More adventures to come!

Valentine Bouquet is a fun and interactive web app that allows users to send personalized messages, memes, songs, and photos to someone special. Users can create a virtual bouquet by sending multimedia messages to their loved ones, and these bouquets will be collated and sent to the recipient on Valentine's Day. This app uses React for the frontend, Firebase for backend services like storage, database, authentication, and hosting, and TailwindUI for styling.

How it looks !

✨ Try it out !!!

Check out the demo homepage through this link and create a bouquet for someone!
Access a template of the Receiver Bouquet through this link

🎯 Features

• Create a Bouquet: Send a "flower" to someone by adding your name to their bouquet.
• Personalize Messages: Write a custom message, send a meme, share a song, or upload a photo to make the bouquet extra special.
• Valentine's Day Delivery: All flowers are collected and sent to the recipient on Valentine's Day via email.
• Spotify Playlist: Automatically creates a Spotify playlist with all the songs recommended by users for the bouquet.
• Realtime Updates: As more users add to a bouquet, the recipient's bouquet is updated in real-time.
• Responsiveness: The UI adapts to different screen sizes, ensuring a smooth experience on mobile and desktop.
• User Authentication: Firebase Authentication is used for secure login and profile management.

🛠 Technologies

• React: Frontend framework for building the user interface.
• Firebase: Backend services for authentication, storage, and database management.
• TailwindUI: Utility-first CSS framework for fast and responsive styling.
• Framer Motion: A library for adding smooth and interactive animations to React components.

🚀 Getting Started

1. Clone the Repository

Clone the repository to your local machine using the following command:

git clone https://github.com/your-username/valentine-bouquet.git](https://github.com/heyitssakinah/valentinesproject2025.git

2. Install dependecies

Navigate to the project directory and install the required dependencies:

cd valentine-bouquet
npm install

3. Firebase Setup

Create a Firebase project by following the Firebase Console.
Set up Firebase Authentication and Firebase Storage/Realtime Database in your Firebase Console.
Update your Firebase configuration in the src/configuration.jsx file with your Firebase project credentials.

4. Running the App Locally

npm start

This will start the React development server, and the app will be accessible at

http://localhost:3000.