ElectroShop

ElectroShop is a MERN stack electrical and hardware shop. It has a customer storefront, shopping cart, checkout with Cambodia delivery locations, and an admin panel for product, stock, sales, delivery price, and delivery status management.

Tech Stack

• Frontend: React 18, Vite, Bootstrap, React Bootstrap
• Backend: Node.js, Express.js
• Database: MongoDB Atlas with Mongoose
• Auth: JWT admin login
• Uploads: Multer local image upload

Main Features

Customer:

• Browse products by category
• Search products
• View product details
• Add products to cart
• Choose delivery place
• Enter name, phone number, and address at checkout
• Place order

Admin:

• Login with JWT
• Separate admin dashboard layout
• Add, edit, and delete products
• Upload product images from local computer
• View total products, total stock, low stock, and out of stock
• View sales report and recent orders
• Update delivery status
• Set delivery price for Phnom Penh and Cambodia provinces

Requirements

Install these first:

• Node.js v16 or newer
• npm
• MongoDB Atlas account or local MongoDB connection string

Environment Files

Backend

Copy backend/.env.example to backend/.env, then edit the values:

PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key
ADMIN_EMAIL=admin@electroshop.com
ADMIN_PASSWORD=admin123

Frontend

Copy frontend/.env.example to frontend/.env, then edit the value if needed:

VITE_API_URL=http://localhost:5000/api

Install

From the project root:

npm run install-all

This installs dependencies for:

• root project
• backend
• frontend

If you want to install manually:

npm install
cd backend
npm install
cd ../frontend
npm install

Seed Database

Seed products and delivery zones:

npm run seed

Warning: this clears and recreates sample products.

Seed only Cambodia delivery prices:

cd backend
npm run seed:delivery

This adds or updates Phnom Penh plus 24 provinces without deleting products.

Run Project

From the project root:

npm run dev

This starts both servers:

• Frontend: http://localhost:3000
• Backend: http://localhost:5000

Run separately if needed:

cd backend
npm run dev

cd frontend
npm run dev

Admin Login

Open:

http://localhost:3000/admin/login

Demo login:

Email: admin@electroshop.com
Password: admin123

After admin login, the app redirects public pages back to the admin dashboard. Logout returns to the customer home page.

Important Pages

Customer pages:

• /
• /products
• /products/:id
• /cart
• /about
• /contact

Admin pages:

• /admin/login
• /admin/dashboard
• /admin/add
• /admin/edit/:id
• /admin/delivery-prices

Shop Info Config

Shop name, phone, email, address, about text, and social links are in:

frontend/src/config/shopConfig.js

Edit this file to update header, footer, About page, Contact page, and home page text.

Image Uploads

Admin can upload product images from local computer.

Uploaded files are saved in:

backend/uploads/

The backend serves them from:

http://localhost:5000/uploads/filename.jpg

Uploaded image file contents are ignored by git. The folder stays in the repo because of:

backend/uploads/.gitkeep

API Routes

Products:

Method	Route	Description
GET	/api/products	Get products
GET	/api/products/:id	Get one product
GET	/api/products/search/:name	Search product by name
POST	/api/products	Create product
PUT	/api/products/:id	Update product
DELETE	/api/products/:id	Delete product

Cart:

Method	Route	Description
GET	/api/cart	Get cart
POST	/api/cart	Add item
PUT	/api/cart/:id	Update quantity
DELETE	/api/cart/:id	Remove item

Orders:

Method	Route	Description
POST	/api/orders	Checkout and create order
GET	/api/orders/report	Admin sales report
PUT	/api/orders/:id/delivery-status	Update delivery status

Delivery prices:

Method	Route	Description
GET	/api/delivery-zones	Public delivery places
GET	/api/delivery-zones/admin/all	Admin delivery places
PUT	/api/delivery-zones/:id	Update delivery price/status

Admin:

Method	Route	Description
POST	/api/admin/login	Admin login
GET	/api/admin/verify	Verify token

Upload:

Method	Route	Description
POST	/api/upload	Upload product image

Build Frontend

npm run build

Common Problems

If checkout says Cart session is required, add an item to cart again and retry checkout.

If uploaded images do not show, restart backend and check that this route exists:

app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

If delivery places are empty, run:

cd backend
npm run seed:delivery

If admin login fails, check backend/.env:

ADMIN_EMAIL=admin@electroshop.com
ADMIN_PASSWORD=admin123
JWT_SECRET=your_secret_key