https://github.com/touhidtamim/greenish
Greenish – Subscription plant care boxes & personalized plant styling platform built with React and Firebase.
https://github.com/touhidtamim/greenish
daisyui firebase plant-care-styling react subscription tailwindcss
Last synced: 2 months ago
JSON representation
Greenish – Subscription plant care boxes & personalized plant styling platform built with React and Firebase.
- Host: GitHub
- URL: https://github.com/touhidtamim/greenish
- Owner: touhidtamim
- Created: 2025-06-25T04:31:46.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-25T12:15:20.000Z (about 1 year ago)
- Last Synced: 2025-06-25T13:25:44.136Z (about 1 year ago)
- Topics: daisyui, firebase, plant-care-styling, react, subscription, tailwindcss
- Language: JavaScript
- Homepage: https://test-greenish.netlify.app/
- Size: 1.14 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌿 Greenish – Personalized Plant Styling & Monthly Care Box
**Live Site:** [https://test-greenish.netlify.app/](https://test-greenish.netlify.app/)
---
## 📦 Project Purpose
Greenish is a modern subscription box service platform that allows users to explore, subscribe to, and manage monthly **plant care boxes**. It also offers an optional one-time **plant styling setup service**, where users can get their indoor or outdoor space styled with beautiful plants by professionals.
This platform is built to make plant care easy, exciting, and consistent for busy plant lovers.
---
## 🎯 Target Audience
- Busy homeowners
- Office managers
- Café/restaurant owners
- Plant beginners who want easy guidance
---
## 🚀 Key Features
- 🔐 **Authentication System:** Login, Register, Logout using Firebase
- 🪴 **Subscription Service:** Browse and subscribe to curated monthly care boxes
- 🧾 **Subscription Details Page:** Protected route with full box information, reviews, and rating system
- 🧑🌾 **One-Time Setup Service:** Book professional indoor/outdoor plant styling setup
- 📱 **Responsive Design:** Fully mobile-friendly layout
- 🗂️ **Route Management:** React Router DOM with Private Routes
- 🌟 **User Dashboard/Profile:** View and manage personal info and subscriptions
- ✨ **Dynamic Page Titles:** Titles change based on route using `react-helmet-async`
- 📝 **Review Submission:** Rate and review subscription boxes (not persisted)
- 📦 **Service Cards:** At least 6 meaningful cards displayed from structured JSON
---
## 📸 UI & UX Highlights
- 🎞️ **Engaging Sliders with Demos:** Implemented attractive sliders using `swiper` to visually present Greenish’s features and service demos. This hooks users emotionally and gives them a clearer idea of the service impact.
- 🧾 **Detail-Rich Subscription Cards:** Each subscription card includes complete box information—plant type, care frequency, ideal conditions, and styling features—helping users make confident choices.
- 🍬 **Interactive Buttons with SweetAlert:** Key user actions like subscribing or booking are handled with elegant SweetAlert popups for clear, delightful feedback.
- 🔐 **Private Route Protection:** Sensitive routes such as subscription details and user profiles are protected, enhancing both UX and security by ensuring only logged-in users can access them.
- 🪄 **Tooltip Support:** Subtle tooltips on icons and buttons improve clarity without cluttering the interface, guiding users through the platform intuitively.
- 🖱️ **Hover Animations:** Carefully designed hover effects on cards and buttons provide a polished, modern feel, making the UI more responsive and engaging.
- 📱 **Mobile Gesture Optimization:** The site is fully responsive with slider gestures enabled on mobile for a smooth and interactive experience on all devices.
---
## 🧠 Unique Value Proposition
Unlike traditional plant delivery services, **Greenish** focuses on **ongoing care** and **personalized styling**, ensuring your plants not only arrive healthy but stay thriving with minimal effort from you.
---
## 📈 Future Improvements
- 📝 **Persist Reviews:** Store and retrieve reviews via a backend database
- 📦 **Order History Page:** Track current and past subscriptions
- 🌱 **AI Plant Advisor (Idea):** Get personalized suggestions based on your environment
- 🛒 **Cart and Checkout Flow:** Add full eCommerce functionality for one-time purchases
- 🌍 **Multi-language Support:** Add Bangla and other languages for localization
---
## 🛠️ NPM Packages Used
- `react` – Frontend library
- `react-dom` – React DOM rendering
- `react-router-dom` – Routing and navigation
- `firebase` – Authentication and hosting
- `tailwindcss` – Utility-first CSS framework
- `@tailwindcss/vite` – Tailwind plugin for Vite
- `daisyui` – Prebuilt UI components on top of Tailwind
- `framer-motion` – Animation library for React
- `swiper` – Slider/carousel functionality
- `sweetalert2` – Beautiful, responsive alert boxes
- `react-icons` – Icon library (Font Awesome, etc.)
- `react-feather` – Feather-style icons
- `react-helmet-async` – Dynamic page titles and meta tags
---
## 🖥️ Tech Stack
- React JS
- Firebase Authentication & Hosting
- React Router DOM
- Tailwind CSS / DaisyUI
- Deployed on **Firebase Hosting**
---
## 🧪 How to Run Locally
Want to test or explore this project on your own machine? Follow these simple steps:
- Clone the repository using Git.
- Open the folder in your preferred code editor (like VS Code).
- Run `npm install` to install all dependencies.
- Run `npm run dev` to start the development server.
- Open your browser and go to `http://localhost:5173` (or as shown in your terminal).
---
## 👤 Developed By
**Touhid Tamim**
WEB11-3318 | Programming Hero Web Dev Course (Batch 11)
---
## 📝 License
This project is for educational purposes only.