🌿 Botanica - Plant Collection App

Static web application for plant enthusiasts to collect, organize, and track their plant journey.
No backend — everything runs in your browser!

---

📚 Table of Contents

• ✨ Features
• 🚀 Quick Start
• 📁 Project Structure
• 🛠️ Technology Stack
• 🌟 Usage
• 🎯 How to Use
• 🤝 Contributing
• 👥 Contributors

---

✨ Features

• 🌱 Plant Collection Management: Add, view, and organize your plants
• 📸 Image Upload: Drag & drop or click to upload plant photos
• 🔍 Smart Filtering: Filter by plant type and search by name/species
• 💚 Wishlist: Save plants you wish to collect later
• 📊 Dashboard: Overview of your plant collection stats
• 🗓️ Care Calendar: Set watering and maintenance reminders
• 🌓 Dark Mode: Switch between light and dark themes
• 💾 Local Storage: Your data stays on your device
• 📱 Responsive Design: Works on desktop, tablet, and mobile
• 🎨 Beautiful UI: Modern, plant-themed design

---

🚀 Quick Start

1. Download all the files to a folder
2. Open index.html in your web browser
3. Start adding your plants!

No installation or server required!

---

📁 Project Structure

Botanica/
├── .github/
│   └── workflows/
│       ├── azure-static-web-apps-jolly-moss-04bffa100.yml
│       └── azure-static-web-apps-orange-moss-066dd6b00.yml
├── assets/
│   ├── icon/
│       └── placeholder-plant.jpg
│   └── images/
│       ├── lucky bamboo plant.jpg
│       ├── pothos.jpg
│       └── snake plant.jpg
├── scripts/
│   ├── app.js
│   ├── image-handler.js
│   └── plant-manager.js
├── styles/
│   ├── components.css
│   ├── main.css
│   └── responsive.css
├── index.html
└── README.md

---

🛠️ Technology Stack

• Frontend: Pure HTML5, CSS3, JavaScript (ES6+)
• Storage: Browser LocalStorage
• Icons: Font Awesome 6
• Hosting: GitHub Pages
• No Frameworks: Zero dependencies — pure front-end project!

---

🌟 Usage

➕ Adding a Plant

1. Click “Add Plant” in the navigation bar
2. Upload a plant image (drag & drop supported)
3. Enter details such as name, species, type, and light requirements
4. Add care notes if desired
5. Click “Add to Collection”

---

🧭 Managing Your Collection

• View All Plants → Go to “My Plants” to see your entries
• Edit or Delete → Update or remove any plant details
• Filter & Search → Quickly find plants by name or type
• Wishlist → Save plants you want to collect later
• Dashboard View → Track your total plants, upcoming tasks, and stats
• Dark Mode → Switch between light and dark themes for better visibility
• Care Calendar → Stay organized with watering and maintenance reminders

---

🎯 How to Use

1. Create a folder called botanical-app
2. Save all files in their respective structure as shown above
3. Open index.html in your web browser
4. Add your plants, manage your collection, and enjoy!

This app runs completely offline — all your data is stored securely in your browser’s local storage.
Enjoy a clean, modern, and responsive plant management experience 🌱

---

🤝 Contributing

We welcome contributions to Botanica!
You can help by improving the UI, fixing bugs, or enhancing documentation.

Before contributing, please check our Contributing Guide to learn about:

• Setting up your environment
• Coding standards and best practices
• Submitting pull requests
• Reporting bugs and suggesting new features

Thank you for helping to make Botanica even better for all plant lovers 💚

---

👥 Contributors

Sandali3000 📖 💻 🎨

kaifansariw 💻 🐛

Legend:
📖 Documentation | 💻 Code | 🎨 Design | 🐛 Bug Fixes | ✅ Tests

---

🔝 Back to Top