The Kreg Market – FullStack Grocery E-commerce

The Kreg Market is a production-ready full-stack grocery e-commerce app with customer shopping flows and backend admin controls.
It supports product browsing, JWT authentication, cart management, order placement (COD and Stripe), and order tracking.

🚀 Live Demo

Frontend: https://the-kreg-market.vercel.app
Backend API: https://the-kreg-market-back.vercel.app/api

Fully functional: Users can shop groceries, manage carts, checkout online or COD, while admin manages products and orders.

🧠 Architecture

User
  ↓
Frontend (React CRA + Tailwind + ShopContext + Axios)
  ↓
Backend (Node.js + Express + MongoDB)
  ↓
Stripe Payment API

Frontend: React 19 (CRA), Tailwind, react-router-dom, Axios, React Toastify, Swiper, React Icons
Backend: Node.js, Express 5, MongoDB (Mongoose), JWT Auth, bcrypt, Multer, Cloudinary
Deployment: Vercel (Frontend + Backend), Stripe (Checkout), Cloudinary (images)

✨ Features (Fully Working)

🛒 Storefront

Product listing and detail pages
Category browsing, client-side search with debounce

🛍 Cart

Add/update/remove items, clear cart
Cart totals synced from backend
LocalStorage persistence

💳 Checkout & Orders

Place orders with Cash on Delivery or Stripe
View user order history

👨‍💻 Admin Dashboard

Add/update/remove products with image uploads
Update stock availability
View and manage all orders, update order status

🔐 Authentication & Security

JWT Bearer tokens, Authorization headers
Passwords hashed with bcrypt
Protected routes: user/cart/orders & admin endpoints
CORS allowlist via FRONTEND_URL
Image upload validations + Cloudinary storage

📡 API Documentation

User

Endpoint	Description
POST /user/register	Register a new user
POST /user/login	Login user
POST /user/admin	Admin login

Product

Endpoint	Description
GET /product/all	Get all products
GET /product/:id	Get single product
POST /product/add	Add product (admin)
DELETE /product/remove/:id	Remove product (admin)
PUT /product/stock/:id	Update stock status (admin)

Cart (auth required)

Endpoint	Description
POST /cart/add	Add product to cart
PUT /cart/update	Update cart item quantity
POST /cart/get	Get user cart with totals
DELETE /cart/remove/:id	Remove item
DELETE /cart/clear	Clear cart

Order

Endpoint	Description
POST /order/placeOrder	Place COD order
POST /order/stripe	Create Stripe checkout session
GET /order/userOrders	Get user orders
GET /order/adminOrders	Get all orders (admin)
PUT /order/status	Update order status (admin)

⚙️ Installation & Setup

1️⃣ Clone Repository

git clone https://github.com/KareemHossny/The-Kreg-Market

2️⃣ Backend Setup

cd back
npm install

.env

JWT_SECRET=
ADMIN_EMAIL=
ADMIN_PASSWORD=
MONGO_URI=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
STRIPE_SECRET_KEY=
PORT=7777
NODE_ENV=development
FRONTEND_URL=http://localhost:3000

npm start

3️⃣ Frontend Setup

cd ../front
npm install
npm start

4️⃣ Production Build

cd front
npm run build
cd ../back
npm start

📈 Performance Optimizations

Debounced search filtering
Cart persistence in localStorage
Cloudinary image compression/transformations
Product list sorting at query level

🧪 Future Improvements

Env-based API URLs for frontend
Automated tests (unit/integration/e2e)
Pagination, filtering, and sorting for large catalogs
Refresh-token/session strategy
Stripe webhook-based payment confirmation

👨‍💻 Author

Kareem Hossny – Full Stack MERN Developer
Open to freelance & junior full-stack opportunities

KareemHossny/The-Kreg-Market