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

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

• 🌱 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
• 🤖 AI Plant Care Assistant: Chat with Botanica Bot for instant expert advice
• 🌓 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

1. Download all the files to a folder
2. Open index.html in your web browser
3. [Optional] Set up the AI Chatbot - See CHATBOT_SETUP.md for instructions
4. Start adding your plants!

No installation or server required!

Botanica now includes an AI-powered chatbot that provides expert plant care advice!

1. Get a free Gemini API key: https://aistudio.google.com/app/apikey
2. Paste it in index.html (in the BOTANICA_CONFIG section)
3. Click the 🌱 chat button and start asking!

• "How often should I water my monstera?"
• "Why are my plant's leaves turning yellow?"
• "How do I propagate a pothos?"
• "What plants are good for beginners?"

For detailed setup, see CHATBOT_SETUP.md

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

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

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”

• 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

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 🌱

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 💚

🔝 Back to Top