feat: initial MERN inventory app (backend + frontend)

.gitignore

@@ -1,7 +1,41 @@
-node_modules
-dist
-.vercel
-# envs
+# Node
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Builds
+dist/
+build/
+frontend/dist/
+backend/dist/
+
+# Logs
+logs/
+*.log
+*.log.*
+pids/
+*.pid
+*.seed
+*.pid.lock
+
+# Env (keep examples only)
 .env
+.env.*
+!.env.example
 backend/.env
 frontend/.env
+
+# CSV scratch
+products.csv
+exported.csv
+
+# OS/editor
+.DS_Store
+Thumbs.db
+.vscode/
+.idea/
+
+# Coverage
+coverage/

README.md

@@ -1 +1,330 @@
-"# Inventory Pro" 
+Here you go — a complete **`README.md`** you can copy-paste as-is.
+
+---
+
+# Inventory Pro — MERN (Assignment)
+
+A full-stack inventory app that hits the assignment spec end-to-end:
+
+* 🔎 Search & filter, 📥 Import / 📤 Export CSV, ✏️ inline row editing, 🧾 inventory history
+* 💎 Clean, responsive UI (table on desktop, cards on mobile)
+* 🧰 Robust CSV parser (BOM, comma/semicolon/tab), optimistic updates
+* 🔐 Production-friendly CORS, Express **v5** compatible preflight
+* ☁️ Ready to deploy: Backend → Render, Frontend → Netlify
+
+---
+
+## Tech Stack
+
+* **Backend:** Node.js, Express **v5**, Mongoose, Multer, csv-parse, json2csv, express-validator, Helmet, Morgan, CORS
+* **Frontend:** React + TypeScript + Vite, Tailwind CSS, @tanstack/react-query v5, axios, lucide-react
+* **Database:** MongoDB (Atlas or local)
+
+---
+
+## Project Structure
+
+```
+inventory-pro/
+  backend/
+    src/
+      config/
+      controllers/
+      middleware/
+      models/
+      routes/
+      utils/
+      server.js
+    .env
+    package.json
+  frontend/
+    src/
+      components/
+      lib/
+      App.tsx
+      main.tsx
+      index.css
+    .env
+    index.html
+    netlify.toml        # (optional, for Netlify)
+    package.json
+  README.md
+```
+
+---
+
+## Prerequisites
+
+* Node.js 18+ (recommended 20+)
+* MongoDB: **Atlas** connection string OR local `mongod`
+
+---
+
+## 1) Run Locally
+
+### A) Backend
+
+1. Create `backend/.env`:
+
+```env
+PORT=4000
+# Choose ONE:
+# MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.no4gl81.mongodb.net/inventorydb?retryWrites=true&w=majority&appName=Cluster0
+MONGODB_URI=mongodb://127.0.0.1:27017/inventorydb
+
+# Allow both common dev origins
+CORS_ORIGIN=http://localhost:5173,http://127.0.0.1:5173
+```
+
+> If your password has special characters (`@`, `#`, `!`, etc.), URL-encode them (`@` → `%40`).
+
+2. Install & run:
+
+```bash
+cd backend
+npm i
+npm run dev
+```
+
+Expected log:
+
+```
+✅ MongoDB connected
+🚀 API running on http://localhost:4000
+```
+
+Health checks in browser:
+
+* [http://localhost:4000/health](http://localhost:4000/health) → `{"ok":true,"db":"connected"}`
+* [http://localhost:4000/api/products](http://localhost:4000/api/products) → JSON list
+
+> **Express v5 note:** Preflight is handled safely (no wildcard `*` route needed).
+
+---
+
+### B) Frontend
+
+1. Create `frontend/.env`:
+
+```env
+VITE_API_BASE=http://localhost:4000
+```
+
+2. Install & run:
+
+```bash
+cd frontend
+npm i
+npm run dev
+```
+
+Open the app (Vite prints the URL, usually [http://localhost:5173](http://localhost:5173)).
+
+* Top-right **API / DB** pills should be green ✅ when backend is running.
+* Hover them to see the API base URL in use.
+
+---
+
+## 2) CSV Format (Import/Export)
+
+**Headers (required):**
+`name,unit,category,brand,stock,status,image`
+
+* `status` is optional; if omitted, it’s derived from `stock` (0 → OUT\_OF\_STOCK, >0 → IN\_STOCK)
+* Parser accepts **comma**, **semicolon**, or **tab** delimited CSV
+* BOM/Excel CSVs are handled
+
+**Example:**
+
+```csv
+name,unit,category,brand,stock,status,image
+Coffee Beans,kg,Beverages,Acme,50,IN_STOCK,https://picsum.photos/seed/coffee/200
+Tea Bags,box,Beverages,Acme,0,OUT_OF_STOCK,https://picsum.photos/seed/tea/200
+```
+
+---
+
+## 3) Quick Tests (curl / PowerShell)
+
+**Create a CSV quickly (PowerShell):**
+
+```powershell
+@'
+name,unit,category,brand,stock,status,image
+Coffee Beans,kg,Beverages,Acme,50,IN_STOCK,https://picsum.photos/seed/coffee/200
+Tea Bags,box,Beverages,Acme,0,OUT_OF_STOCK,https://picsum.photos/seed/tea/200
+Sugar,kg,Grocery,SweetCo,100,IN_STOCK,https://picsum.photos/seed/sugar/200
+Milk,litre,Dairy,DairyBest,20,IN_STOCK,https://picsum.photos/seed/milk/200
+'@ | Set-Content -Encoding UTF8 ".\products.csv"
+```
+
+**Import:**
+
+```bash
+curl.exe -s -X POST "http://localhost:4000/api/products/import" -F "file=@products.csv"
+# → {"addedCount":4,"skipped":[...if duplicates...]}
+```
+
+**List:**
+
+```bash
+curl.exe -s "http://localhost:4000/api/products?page=1&limit=10"
+```
+
+**Search (assignment alias):**
+
+```bash
+curl.exe -s "http://localhost:4000/api/products/search?name=Tea"
+```
+
+**Update stock (PUT):**
+
+```powershell
+# get first id
+$resp = Invoke-RestMethod -Uri "http://localhost:4000/api/products?limit=1" -Method GET
+$id = $resp.data[0]._id
+Invoke-RestMethod -Uri "http://localhost:4000/api/products/$id" -Method PUT -ContentType "application/json" -Body '{"stock":75}'
+```
+
+**History:**
+
+```bash
+curl.exe -s "http://localhost:4000/api/products/<id>/history"
+```
+
+**Export:**
+
+```bash
+curl.exe -L "http://localhost:4000/api/products/export" -o exported.csv
+```
+
+---
+
+## 4) API Reference
+
+Base URL (dev): `http://localhost:4000/api`
+
+| Method | Path                    | Description                                            |
+| -----: | ----------------------- | ------------------------------------------------------ |
+|    GET | `/products`             | List (pagination, sorting; filters `name`, `category`) |
+|    GET | `/products/search`      | Alias of list supporting `?name=`                      |
+|   POST | `/products/import`      | Import CSV (multipart: `file`)                         |
+|    GET | `/products/export`      | Export all products as CSV                             |
+|    PUT | `/products/:id`         | Update editable fields (validates)                     |
+|    GET | `/products/:id/history` | Inventory change logs (sorted desc)                    |
+
+---
+
+## 5) Assignment Mapping (Scoring)
+
+**Frontend (50 pts)**
+
+* Search bar (`/api/products/search?name=` alias) + category filter ✅
+* “Add New Product” button (CSV one-row import) ✅
+* Import/Export buttons aligned right (Export downloads; Import uploads & refreshes) ✅
+* Products table columns: Image, Name, Unit, Category, Brand, Stock, Status, Actions ✅
+* Stock labels: green “In Stock” when `>0`, red “Out of Stock” when `0` ✅
+* Actions: Edit/Delete; inline editing with Save → PUT `/api/products/:id` ✅
+* Table updates without full page refresh (optimistic) ✅
+* Inventory history sidebar (fetch logs desc by date) ✅
+* Responsive/mobile layout ✅
+
+**Backend (50 pts)**
+
+* Import CSV: accept file, parse columns, insert only new, return `addedCount` + `skipped` (duplicate info for editing) ✅
+* Export CSV: returns all products ✅
+* Products list: JSON with pagination & sorting ✅
+* Update product: validation (unique name, numeric stock, status enum), updates only editable fields ✅
+* Inventory history: logs stock changes; fetch API returns desc ✅
+
+---
+
+## 6) Deployment
+
+### A) Backend → Render
+
+1. Push repo to GitHub.
+2. Render: **New → Web Service** → connect `backend/`
+3. **Build Command:** `npm install`
+   **Start Command:** `node src/server.js`
+4. **Environment variables:**
+
+   * `MONGODB_URI` → your Atlas URI (e.g., `mongodb+srv://.../inventorydb?...`)
+   * `CORS_ORIGIN` → `https://<your-netlify>.netlify.app`
+
+     * (Optionally add dev: `http://localhost:5173,http://127.0.0.1:5173`)
+5. Deploy. Verify: `https://<render-app>.onrender.com/health` → `{ "ok": true, "db": "connected" }`.
+
+> Express reads `process.env.PORT` automatically on Render.
+
+### B) Frontend → Netlify
+
+1. In `frontend/.env` set:
+
+```env
+VITE_API_BASE=https://<render-app>.onrender.com
+```
+
+2. (Optional) Add `frontend/netlify.toml`:
+
+```toml
+[build]
+  command = "npm run build"
+  publish = "dist"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+```
+
+3. Netlify → **New site from Git**
+
+   * Base directory: `frontend`
+   * Build command: `npm run build`
+   * Publish directory: `dist`
+   * Env var: `VITE_API_BASE=https://<render-app>.onrender.com`
+
+---
+
+## 7) Troubleshooting
+
+* **Frontend “failed to fetch” / red API pill**
+
+  * Backend not running or URL mismatch. Check `frontend/.env` and restart `npm run dev`.
+  * CORS: ensure your frontend origin is in `CORS_ORIGIN`.
+
+* **Import says “No valid rows found in CSV”**
+
+  * Headers must match exactly: `name,unit,category,brand,stock,status,image`.
+  * At least `name`, `unit`, `category` must be non-empty for a row to import.
+  * Excel CSVs with semicolons are supported.
+
+* **History not updating**
+
+  * Only changes to `stock` create history entries.
+
+---
+
+## 8) Scripts
+
+**Backend**
+
+```bash
+npm run dev     # nodemon dev server
+npm start       # node src/server.js
+```
+
+**Frontend**
+
+```bash
+npm run dev     # Vite dev server
+npm run build   # production build
+npm run preview # serve built app locally
+```
+
+---
+
+## License
+
+MIT

backend/.env.example

@@ -0,0 +1,5 @@
+PORT=4000
+# Use ONE of the following:
+# MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.no4gl81.mongodb.net/inventorydb?retryWrites=true&w=majority&appName=Cluster0
+MONGODB_URI=mongodb://127.0.0.1:27017/inventorydb
+CORS_ORIGIN=http://localhost:5173,http://127.0.0.1:5173

backend/src/app.js

@@ -1,61 +0,0 @@
-import express from "express";
-import cors from "cors";
-import helmet from "helmet";
-import morgan from "morgan";
-import mongoose from "mongoose";
-import productsRouter from "./routes/products.routes.js";
-import { connectDB } from "./db.js";
-
-const app = express();
-
-/* ---------- CORS ---------- */
-const allowed = (process.env.CORS_ORIGIN || "http://localhost:5173,http://127.0.0.1:5173")
-  .split(",")
-  .map((s) => s.trim())
-  .filter(Boolean);
-
-const corsMiddleware = cors({
-  origin: allowed.includes("*")
-    ? true
-    : (origin, cb) => {
-        // allow server-to-server/curl (no Origin header)
-        const ok = !origin || allowed.includes(origin);
-        cb(null, ok);
-      },
-  methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
-  allowedHeaders: ["Content-Type", "Authorization"],
-  credentials: false,
-});
-
-app.use(corsMiddleware);
-
-/* ✅ Express 5-safe generic preflight */
-app.use((req, res, next) => {
-  if (req.method === "OPTIONS") return res.sendStatus(204);
-  next();
-});
-
-/* ---------- Security & parsing ---------- */
-app.use(helmet());
-app.use(morgan("dev"));
-app.use(express.json({ limit: "1mb" }));
-
-/* ---------- Ensure DB connection on first request (serverless-safe) ---------- */
-app.use(async (_req, _res, next) => {
-  if (mongoose.connection.readyState !== 1) {
-    await connectDB();
-  }
-  next();
-});
-
-/* ---------- Health ---------- */
-app.get("/health", (_req, res) => {
-  const states = ["disconnected", "connected", "connecting", "disconnecting"];
-  const db = states[mongoose.connection.readyState] || "unknown";
-  res.json({ ok: true, db });
-});
-
-/* ---------- API routes ---------- */
-app.use("/api/products", productsRouter);
-
-export default app;

backend/src/db.js

@@ -1,17 +0,0 @@
-import mongoose from "mongoose";
-
-const MONGODB_URI = process.env.MONGODB_URI;
-if (!MONGODB_URI) {
-  console.error("❌ Missing MONGODB_URI env");
-}
-
-let cached = global.__mongoose_conn;
-
-/** Serverless-safe shared connection */
-export async function connectDB() {
-  if (!cached) {
-    cached = mongoose.connect(MONGODB_URI);
-    global.__mongoose_conn = cached;
-  }
-  return cached;
-}

frontend/.env.example

@@ -0,0 +1,2 @@
+# Backend base URL
+VITE_API_BASE=http://localhost:4000