A beautifully themed, full-stack, mobile-responsive web application designed to help plant lovers easily monitor and manage the care of their indoor and outdoor plants. Built with love for green thumbs, this app tracks everything from watering to plant health — all in one place.
- React.js (Frontend UI)
- Node.js & Express (Backend API)
- MongoDB (Database) – if applicable
- Axios (HTTP client)
- date-fns (Real-time date and time display)
- Firebase Authentication / JWT (User authentication)
- Tailwind CSS (Styling)
- Context API (State management)
- Real-time date and time display in the navigation bar.
- Fully responsive, clean navigation with light/dark theme toggling.
- Attractive sliding banner showcasing plant care visuals and tips.
- Plant cards with detailed view options for plant care instructions.
- Secure user authentication (register, login, logout).
- Personal user dashboard with:
- User's own plant list
- Personal information section
- Editable and deletable plant records
- Detailed plant page showing care logs and health status.
- Theming that changes based on plant categories (e.g., succulents, bonsai).
- Clean footer with modal for contact/help and useful links.
- react, react-dom
- axios
- firebase / jsonwebtoken
- date-fns
- react-router-dom
- express
- mongoose
- dotenv
- tailwindcss
-
Clone the repository:
git clone https://github.com/Ik-Riyad/mango_client.git cd plant-care-tracker 2. **Install frontend dependencies:**
- cd client
- npm install
- Install backend dependencies:
- cd ../server
- npm install
- Setup environment variables:
-
Create .env files in both client and server directories.
-
Add your MongoDB URI, Stripe keys, Firebase config, and other sensitive data.
- Start backend server:
- npm run dev
- Start frontend app:
- cd ../client
- npm start
- Open in browser:
- Visit http://localhost:3000
- Reach me at: ik.riyad123@gmail.com