ShopIt E-commerce Project

Full-stack e-commerce application built with the MERN stack (MongoDB, Express, React, Node.js).
It includes product browsing, search/filtering, authentication, cart and checkout flow, Stripe payments, order management, and an admin area for catalog/order/user operations.

What does this project do, and why did you build it?

This project delivers an end-to-end online store experience:

• Customers can browse products, view details, add items to cart, place orders, and pay online.
• Authenticated users can manage profile data, shipping details, and order history.
• Admin users can manage products, users, reviews, and order processing.

The project was built to implement a complete, production-style MERN architecture in one codebase and demonstrate how core e-commerce concerns (auth, inventory-facing APIs, media uploads, payments, and role-based access) work together.

What does the architecture look like?

The project follows a client-server architecture with React on the frontend and an Express API backend connected to MongoDB.

flowchart TD
    U[User Browser]
    FE[React Frontend\nfrontend/src]
    API[Express API\nbackend/routes + controllers]
    MW[Middleware Layer\nauth + error handling]
    DB[(MongoDB\nproducts/users/orders)]
    CLD[Cloudinary\nproduct images]
    ST[Stripe\npayment processing]
    SMTP[SMTP Service\nemail delivery]

    U --> FE
    FE -->|HTTP /api/v1| API
    API --> MW
    MW --> DB
    API --> CLD
    API --> ST
    API --> SMTP

Loading

Backend structure

• backend/server.js: process startup, env loading, DB connection, Cloudinary config.
• backend/app.js: express app setup, middleware, route mounting, frontend static serving in production.
• backend/routes: route declarations (products, userAuth, order, payment).
• backend/controllers: request handlers and business logic.
• backend/model: Mongoose models (product, user, order).
• backend/middlewares: auth guards, async wrapper, centralized error middleware.
• backend/utills: helpers like JWT cookies, API filtering/search/pagination, seeder, email utility.

Frontend structure

• frontend/src/App.js: route wiring and screen composition.
• frontend/src/Components: customer and admin UI components.
• frontend/src/actions, frontend/src/reducer, frontend/src/constants: Redux state layer.
• frontend/src/store.js: Redux store setup with thunk middleware.

How do I run this locally, and how do I deploy it?

Run locally

1. Install dependencies:

npm install
cd frontend && npm install

2. Create backend/config/config.env and add required variables:

PORT=4000
NODE_ENV=DEVELOPMENT
DB_URI=<your_mongodb_connection_string>
JWT_SECRET=<your_jwt_secret>
JWT_EXPIRES_TIME=<e.g. 7d>
COOKIE_EXPIRES_TIME=<hours>

CLOUDINARY_CLOUD_NAME=<value>
CLOUDINARY_API_KEY=<value>
CLOUDINARY_API_SECRET=<value>

STRIPE_SECRET_KEY=<value>
STRIPE_API_KEY=<value>

SMTP_HOST=<value>
SMTP_PORT=<value>
SMTP_USER=<value>
SMTP_PASSWORD=<value>
SMTP_FROM_NAME=<value>
SMTP_FROM_EMAIL=<value>

3. (Optional) Seed sample data:

npm run seeder

4. Start backend + frontend:

# terminal 1 (root)
npm run dev

# terminal 2 (frontend)
cd frontend
npm start

Frontend runs on the React dev server and proxies API requests to http://127.0.0.1:4000/.

Deploy

Current code is set up for a single-service deployment:

• Backend serves API and, in production mode, serves the React static build from frontend/build.
• Build frontend with:

cd frontend
npm run build

• Start backend in production mode with environment variables set:

npm start

For platforms like Render/Railway/Heroku-like environments:

• Provision MongoDB (MongoDB Atlas).
• Configure all environment variables in the platform dashboard.
• Ensure NODE_ENV=PRODUCTION.
• Run backend start command after frontend build step.

What decisions did you make, and why?

• Express + controller/route separation: keeps API endpoints easy to scale and maintain.
• Mongoose models for domain entities: simplifies schema constraints and query logic for products/users/orders.
• JWT-based authentication with cookies: balances stateless auth with browser-friendly sessions.
• Redux for client state: centralizes async flows for products, cart, user session, and orders.
• Cloudinary + Stripe integration: offloads media storage and payment security/compliance to specialized services.
• Error middleware + async wrapper: gives consistent API error responses and cleaner controller code.

What would you improve if you continued working on it?

• Add full automated test coverage (unit + integration + end-to-end checkout/admin flows).
• Add TypeScript gradually on backend and frontend for safer refactoring.
• Improve observability (structured logs, request IDs, health checks, metrics dashboards).
• Harden security defaults (rate limiting, stricter validation/sanitization, CSRF strategy review, helmet/cors tuning).
• Improve deployment scripts and CI/CD pipeline with separate build/test/release stages.
• Refine architecture with service boundaries (payments, notifications, media) if scaling beyond a single app.