Project Overview

• Name: shop-wave
• Description: Full-stack MERN e-commerce platform featuring a product catalog, advanced search, filters, sorting, cart management, checkout flow, PayPal payment integration, image uploads, and an admin dashboard for product/user/order management.

Highlights

• Full-stack MERN: React + Redux Toolkit frontend, Node.js + Express backend, MongoDB database.
• Production-ready features: Product catalog with pagination, search, filters and sorting, cart and checkout flow, PayPal payments, and image uploads.
• Admin dashboard: Role-based authentication/authorization with protected API routes for product, user, and order management.
• Performance: Modular React architecture, optimized data fetching/caching, and MongoDB indexing for faster queries.

Repository Structure (key files)

• Root: package.json — project scripts and metadata.
• Backend: backend/
  • server.js — Express server entrypoint and production serving of frontend (if configured).
  • seederScript.js — seeds sample users and products from backend/data/.
  • config/db.js — MongoDB connection helper.
  • controllers/ — userController.js, productController.js, orderController.js.
  • models/ — userModel.js, productModel.js, orderModel.js.
  • routes/ — userRoutes.js, productRoutes.js, orderRoutes.js, uploadRoutes.js.
  • middleware/ — authMiddleware.js, asyncHandler.js, errorMiddleware.js, checkObjectId.js.
  • utils/ — generateToken.js, calcPrices.js, paypal.js.
  • uploads/ — directory used by multer for image uploads.
• Frontend: frontend/
  • React app with src/ including components/, Pages/, and slices/ (Redux Toolkit + RTK Query).
  • frontend/package.json contains frontend scripts and dependencies.

Features

• Products: Catalog with pagination, product detail pages, search, filters, and sorting.
• Cart: Add/remove items, quantity updates, and localStorage persistence.
• Checkout: Shipping, payment selection, order summary, and order creation.
• Payments: PayPal integration (client ID/nginx/PayPal SDK handled via utils/paypal.js).
• Auth: JWT authentication, role-based admin access, protected API routes.
• Admin: Create/edit/delete products, manage users, and view orders.
• Uploads: Image upload endpoint using multer and uploadRoutes.js.
• Data seeding: backend/seederScript.js populates sample users and products from backend/data/.

API Endpoints (examples)

• POST /api/users/login — user login
• POST /api/users — register new user
• GET /api/users/profile — get logged-in user profile (auth required)
• GET /api/products — list products (supports keyword, pageNumber, filters, sort)
• GET /api/products/:id — product details
• POST /api/orders — create an order (auth required)
• GET /api/orders/:id — get order details (auth required)
• POST /api/upload — upload an image (admin or protected as configured)

Refer to the backend/routes/ folder for the full list of routes and controllers.

Environment Variables Create a .env file in backend/ or set environment variables in your host with the following values:

• MONGO_URI — MongoDB connection string
• JWT_SECRET — secret key for signing JWT tokens
• PAYPAL_CLIENT_ID — PayPal client id (sandbox or live)
• NODE_ENV — development or production
• PORT — backend port (default: 5000)
• PAYPAL_APP_SECRET - App secret key
• PAYPAL_API_URI - Paypal app url

Optional (if changing upload/storage):

• CLOUDINARY_URL or other storage credentials

For local development you can use an .env file like:

MONGO_URI=your_mongo_connection_string
JWT_SECRET=your_jwt_secret
PAYPAL_CLIENT_ID=your_paypal_client_id
NODE_ENV=development
PORT=5000
PAYPAL_APP_SECRET=
PAYPAL_API_URL=

Local Setup (Windows PowerShell)

• Install dependencies for backend and frontend:

# From repository root
cd backend; npm install
cd ..\frontend; npm install

• Run the backend (development):

cd backend
# set up your .env file first, then:
node server.js
# or with nodemon if installed:
npx nodemon server.js

• Run the frontend (development):

cd frontend
npm start

• Run both concurrently from repo root (if concurrently is installed):

npm run dev

• Seed sample data (development):

# From backend folder
node seederScript.js

Build & Production Deployment

• Build the frontend:

cd frontend
npm run build
# output will be in `frontend/build`

• Serve static frontend from backend in production: configure server.js to serve frontend/build and set environment variables on your host.
• Recommended hosts: Backend — Railway/Render/Azure/AWS container; Frontend — Vercel/Netlify or serve from backend host.

Testing & Troubleshooting

• Check MONGO_URI for DB connection issues.
• Verify PAYPAL_CLIENT_ID (sandbox vs live) when payments fail.
• Ensure uploads/ directory is writable for image uploads.
• Use Postman to test API endpoints in backend/routes/.

Security Notes

• Keep JWT_SECRET and MONGO_URI out of source control.
• Use HTTPS in production and set NODE_ENV=production.
• Limit upload sizes and validate/sanitize uploaded filenames if customizing upload logic.

Contribution

• Fork the repository, create a feature branch, open a pull request with focused changes, and update the README.md when adding new env vars or scripts.

License

• ISC (see package.json). Update as needed for your project.

Contact

• Repository: https://github.com/Crazyhaller/shop-wave
• Author as listed in package.json: Suvigya Mishra