The Gardening Planner is an interactive web app designed for gardeners to manage plant health, schedule tasks, design layouts, track pests and diseases, and document their gardening journey.
This project demonstrates full-stack development using React, TypeScript, Tailwind CSS, and Firebase, emphasizing real-time updates, responsive UI/UX, and personalized gardening assistance.
- 🌿 Personalized plant care reminders (watering, fertilizing, pruning, repotting)
- 📚 Comprehensive plant library with care instructions and troubleshooting tips
- 🏡 Interactive garden layout planner with drag-and-drop interface
- 🐛 Pest and disease tracker for early detection and management
- 📅 Seasonal task planner and harvest tracking
- ☀️ Real-time weather integration via OpenWeatherMap API
- 📔 Gardening journal to log observations, growth, and milestones
- 🤝 Community sharing and support for tips and experiences
- ⚛️ React 18 + TypeScript – Modern type-safe UI architecture
- 🎨 Tailwind CSS – Utility-first responsive styling
- 🧭 React Router – Client-side navigation
- 🔥 Firebase Firestore – Realtime NoSQL database
- 🔐 Firebase Authentication – Secure user login
- 🗂️ Firebase Storage – File uploads and media management
- 🌤️ OpenWeatherMap API – Real-time weather data
- 🌍 Netlify – Frontend hosting and CI/CD
gardening-planner/
├── src/
│ ├── components/ # Reusable UI components (Navbar, PlantCard, etc.)
│ ├── features/ # Context/Redux slices for state management
│ ├── pages/ # Main app pages (Dashboard, PlantLibrary, GardenPlanner)
│ ├── utils/ # Helper functions & API handlers
│ ├── firebase.ts # Firebase configuration
│ ├── App.tsx # Root component
│ └── main.tsx # Entry point
├── public/ # Static assets (images, icons)
├── package.json
└── README.md
Optimizations
Performance: Optimized images, lazy-loaded components, and minimized CSS/JS bundles
Responsive Design: Mobile-first layout for tablets and smartphones
Code Quality: Modular components, reusable utilities, and clean folder structure
UI/UX: Interactive drag-and-drop garden planner, smooth transitions, and responsive feedback
Error Handling: Clean error states with alerts and notifications
🌐 Deployment
Push your repo to GitHub
Connect it with Netlify
Add Firebase config as environment variables in Netlify
Deploy and share your live app! 🚀
Contributions are welcome! Fork the repo, make improvements, and open a pull request.
This project is licensed under the MIT License.
Built with ❤️ by Ashutosh Kumar Jaiswal
Currently pursuing Full-Stack Web Development @ Masai School
#dailylearning #masaiverse
- Email: jashutosh528@gmail.com
- Portfolio: ashutosh-portfolio-049.netlify.app
- Linkedin: Ashutosh Jaiswal
React · TypeScript · Tailwind CSS · Firebase · OpenWeatherMap API · Responsive Web App · Portfolio Project