Overall System Architecture

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• backend/app.js
• backend/package.json
• backend/server.js
• frontend/package.json
• frontend/src/components/Layout/Header.jsx
• socket/index.js

The E-Commerce platform is built on a decoupled, multi-service architecture. It consists of three primary, independently running services: a React-based frontend application, a Node.js/Express backend API server, and a dedicated Socket.io server for real-time communication. This separation of concerns allows for modular development, deployment, and scaling.

The system is designed to provide a full-featured e-commerce experience, including user management, product and order processing, payment integration, and real-time chat. A key feature is the integration of AI for sentiment analysis of product reviews, leveraging external services like OpenAI. The backend uses a dual-database strategy with MongoDB and MySQL to handle different data models.

Sources: README.md, backend/app.js, socket/index.js

Architectural Components

The system is composed of several distinct components that interact to deliver the platform's functionality.

This diagram illustrates the high-level interaction between the user, the core application services, data stores, and third-party APIs.

Sources: README.md, backend/app.js, socket/index.js

Frontend Application

The frontend is a single-page application (SPA) built with React. It is responsible for rendering the user interface and managing the client-side state. It communicates with the backend via REST API calls for data and with the socket server for real-time features.

• Framework: React 18.2.0
• State Management: Redux Toolkit
• Routing: React Router DOM
• UI: TailwindCSS, Material-UI (MUI)
• HTTP Client: Axios

Sources: frontend/package.json, README.md

Backend API Server

The backend is a Node.js server using the Express.js framework. It serves as the core of the application, handling business logic, data persistence, and communication with external services.

• Runtime: Node.js 18.10.0
• Framework: Express.js
• Database ORM/ODM: Mongoose (for MongoDB), Sequelize (for MySQL)
• Authentication: JSON Web Tokens (JWT)
• Key Responsibilities:
  • Serving REST API endpoints for users, products, orders, etc.
  • User authentication and authorization.
  • Processing payments via Stripe.
  • Managing file uploads to Cloudinary.
  • Performing sentiment analysis via OpenAI.

Sources: backend/package.json, backend/app.js, README.md

Socket Server

A dedicated Node.js server running Socket.io handles all real-time functionalities, primarily the live chat between users and sellers. This isolates the real-time traffic from the main API server, improving performance and scalability. The socket server listens on a separate port (defaulting to 4000).

Sources: socket/index.js, README.md

Databases

The project employs a polyglot persistence strategy, using two different types of databases:

1. MongoDB: The primary database, used with Mongoose for flexible, schema-less data like users, products, and orders.
2. MySQL: Used with Sequelize for other features, likely those requiring structured, relational data.

Sources: README.md, backend/package.json:25, 27

External Services

The backend integrates with several third-party services to offload complex tasks and provide enhanced functionality.

Service	Purpose	Library Used
Stripe	Credit card payment processing.	stripe
Cloudinary	Cloud-based image and video management.	cloudinary
OpenAI	AI-powered sentiment analysis.	openai
Google Translate	Text translation for analysis.	@google-cloud/translate
Nodemailer	Sending transactional emails.	nodemailer

Sources: backend/package.json:13, 18, 26, 28, 29, README.md

Backend API Structure

The backend Express application is structured with a clear separation of concerns, utilizing middleware for security, routing for endpoint management, and controllers for business logic.

Sources: backend/app.js

Middleware Stack

The application employs several middleware layers to handle requests securely and efficiently before they reach the route handlers.

This flow shows the sequence of middleware processing an incoming API request.

Sources: backend/app.js:13-40

• cors: Enables Cross-Origin Resource Sharing, allowing the frontend (on a different origin) to communicate with the API.
• express-rate-limit: Mitigates brute-force attacks by limiting the number of requests per IP.
• body-parser / express.json: Parses incoming request bodies (e.g., JSON).
• cookie-parser: Parses Cookie header and populates req.cookies.
• helmet: Sets various HTTP headers to secure the app from common vulnerabilities like XSS.
• express-mongo-sanitize: Sanitizes user-supplied data to prevent NoSQL query injection attacks.
• ErrorHandler: A custom middleware to catch and format errors.

Sources: backend/app.js:13-40, 110

API Routes

The API endpoints are organized by resource and prefixed with /api/v2/.

Route Prefix	Controller File	Description
/api/v2/user	controller/user.js	Handles user registration, login, and profiles.
/api/v2/shop	controller/shop.js	Manages seller accounts and shop information.
/api/v2/product	controller/product.js	CRUD operations for products and reviews.
/api/v2/event	controller/event.js	Manages promotional events.
/api/v2/coupon	controller/coupounCode.js	Manages discount coupon codes.
/api/v2/order	controller/order.js	Handles order creation and status updates.
/api/v2/payment	controller/payment.js	Processes payments with Stripe.
/api/v2/conversation	controller/conversation.js	Manages chat conversations.
/api/v2/message	controller/message.js	Handles sending and receiving chat messages.
/api/v2/withdraw	controller/withdraw.js	Manages seller withdrawal requests.

Sources: backend/app.js:69-79, README.md

Data and Communication Flow

The following sequence diagram illustrates a typical workflow: a user searching for a product.

This diagram shows how the frontend handles search locally using data from the Redux store and then fetches detailed data from the backend when a specific item is selected.

Sources: frontend/src/components/Layout/Header.jsx:32-39, README.md

Summary

The system architecture is robust and modern, leveraging a decoupled structure with a React frontend, a Node.js backend API, and a separate real-time chat server. This design promotes scalability and maintainability. The use of multiple databases (MongoDB, MySQL) and the integration of various external services (Stripe, Cloudinary, OpenAI) demonstrate a practical approach to building a complex e-commerce platform by composing specialized services. Security is addressed through a comprehensive middleware stack in the backend.

Sources: README.md, backend/app.js