Smart Grocery List & Inventory Manager

A full-stack MERN application that helps households, students, and small businesses track grocery inventory, get low-stock and expiry alerts, and manage shopping lists — all from a clean, responsive dashboard.

---

Problem Statement

Households waste money on expired food and last-minute grocery runs. This app solves:

• Forgetting to buy items when stock runs out
• Wasting food due to untracked expiry dates
• Overspending from unplanned grocery trips
• No visibility into pantry inventory across all categories

---

Features

Feature	Description
JWT Auth	Secure register / login with token-based authentication
Inventory	Add, edit, delete grocery items with category, unit, and quantity
Low-stock Alerts	Instant alerts when quantity ≤ minimum stock level
Expiry Alerts	Warns when items expire within 3 days
Shopping List	Toggle items onto a shared shopping list
Search & Filter	Filter by category, search by name in real-time
Dashboard	Stats cards + category doughnut chart
Qty Controls	One-click increment/decrement quantity

---

Tech Stack

Frontend: React.js, React Router v6, Chart.js, Axios, react-hot-toast
Backend: Node.js, Express.js, JWT, bcryptjs, Morgan
Database: MongoDB, Mongoose
Dev Tools: Nodemon, dotenv

---

Folder Structure

Smart-Grocery-Inventory-Manager/
├── client/                    # React frontend
│   ├── public/
│   └── src/
│       ├── components/
│       │   └── layout/        # Navbar
│       ├── context/           # AuthContext (global auth state)
│       ├── pages/             # LoginPage, RegisterPage, DashboardPage...
│       └── services/          # api.js — all Axios API calls
│
├── server/                    # Node/Express backend
│   ├── config/                # db.js (MongoDB connection)
│   ├── controllers/           # authController, groceryController
│   ├── middleware/            # auth.js (JWT), errorHandler.js
│   ├── models/                # User.js, GroceryItem.js (Mongoose schemas)
│   ├── routes/                # authRoutes.js, groceryRoutes.js
│   └── index.js               # Express entry point
│
├── .env.example               # Template — copy to .env
├── .gitignore
└── README.md

---

Getting Started

Prerequisites

• Node.js v16+
• MongoDB (local or MongoDB Atlas)

1. Clone the repo

git clone https://github.com/YOUR_USERNAME/Smart-Grocery-Inventory-Manager.git
cd Smart-Grocery-Inventory-Manager

2. Backend setup

cd server
npm install

# Create .env file
cp ../.env.example .env
# Edit .env — set your MONGO_URI and JWT_SECRET

npm run dev   # Starts on http://localhost:5000

3. Frontend setup

cd client
npm install
npm start     # Starts on http://localhost:3000

4. Open the app

Visit http://localhost:3000 — create an account and start adding items!

---

API Endpoints

Auth

Method	Endpoint	Description
POST	/api/auth/register	Create new account
POST	/api/auth/login	Login and receive JWT
GET	/api/auth/me	Get current user (protected)

Grocery Items (all protected — requires Authorization: Bearer TOKEN)

Method	Endpoint	Description
GET	/api/grocery	Get all items (supports ?search=&category=)
POST	/api/grocery	Add new item
PUT	/api/grocery/:id	Update item
DELETE	/api/grocery/:id	Delete item
PATCH	/api/grocery/:id/quantity	Increment/decrement quantity
PATCH	/api/grocery/:id/shopping-list	Toggle on shopping list
GET	/api/grocery/dashboard	Dashboard summary + alerts

---

📸 Screenshots

Register Page

Login Page

Dashboard

Inventory List

Add Grocery Item

Shopping List

Low Stock and Expiry Alerts

MongoDB Compass — Users Collection

MongoDB Compass — Grocery Items Collection

---

🎓 Learning Outcomes

By building this project you learn:

• Full MERN stack development end-to-end
• JWT authentication and protected routes
• Mongoose schema design with virtual properties
• React Context API for global state
• Axios interceptors for token management
• MongoDB aggregation pipelines
• REST API design with proper status codes
• Component-based React architecture

---

🎬 Demo Video

Click the image above to watch the full demo

Author

Sonia Thakur GitHub: https://github.com/Sonia068 LinkedIn: https://www.linkedin.com/in/sonia-thakur-6ab93b349/

Built as a full stack development course project to demonstrate skills in React, Node.js, MongoDB, and Socket.IO.

⭐ If you found this project helpful, please give it a star!