Product Management
Relevant source files
The following files were used as context for generating this wiki page:
Product Management is a core feature of the e-commerce platform, enabling sellers to create, list, update, and delete their products. It encompasses the backend logic for data persistence and API endpoints, as well as the frontend user interface for sellers to manage their product inventory. The system also handles displaying product information to customers, including details, images, pricing, and reviews.
This module integrates with other key parts of the system, such as Shop Management for associating products with sellers and Order Management for tracking sales. Product images are handled via multer for uploads and are stored on the server, with filenames saved in the database.
Backend Architecture
The backend for product management is built with Node.js and Express, utilizing a Sequelize ORM for database interactions.
Data Model
The Product model defines the structure for storing product information in the database. It has a direct relationship with the Shop model.
Sources: backend/model/product.js
The diagram below illustrates the relationship between the Product and Shop entities.
The Product model's fields are defined in backend/model/product.js. Key fields are summarized in the table below.
| Field | Type | Description |
|---|---|---|
name | DataTypes.STRING | The name of the product. |
description | DataTypes.TEXT | A detailed description of the product. |
category | DataTypes.STRING | The category the product belongs to. |
tags | DataTypes.STRING | Comma-separated tags for searchability. |
images | DataTypes.TEXT | A JSON string array of image filenames. |
shopId | DataTypes.INTEGER | Foreign key linking to the Shop's ID. |
originalPrice | DataTypes.DECIMAL | The original price of the product. |
discountPrice | DataTypes.DECIMAL | The discounted price. |
stock | DataTypes.INTEGER | The number of items in stock. |
sold_out | DataTypes.INTEGER | The number of items sold. Initialized to 0. |
reviews | DataTypes.TEXT | A JSON string array of review objects. |
ratings | DataTypes.FLOAT | The average rating of the product. |
shop | DataTypes.JSON | A JSON object containing details of the associated shop. |
Sources: backend/model/product.js
API Endpoints
The product-related API endpoints are defined in backend/controller/product.js and registered in backend/app.js under the /api/v2/product route.
| Method | Endpoint | Authentication | Description |
|---|---|---|---|
POST | /create-product | Seller | Creates a new product. Handles image uploads. |
PUT | /update-product | Seller | Updates an existing product's details. |
GET | /get-all-products-shop/:id | Public | Retrieves all products belonging to a specific shop. |
DELETE | /delete-shop-product/:id | Seller | Deletes a product from a shop. |
GET | /get-all-products | Public | Retrieves all products from all shops. |
PUT | /create-new-review | Authenticated User | Adds or updates a review for a product. |
GET | /admin-all-products | Admin | Retrieves all products for the admin dashboard. |
Sources: backend/controller/product.js, backend/middleware/auth.js
Product Creation Flow
When a seller creates a product, the frontend sends a multipart/form-data request to the backend. The upload middleware processes the images, and the controller logic saves the product data to the database.
The following sequence diagram shows the product creation process.
Product Reviews and Sentiment Analysis
Authenticated users can submit reviews for products they have purchased. The create-new-review endpoint handles this logic. It finds the product, checks if the user has already reviewed it, and either adds a new review or updates the existing one.
When products are fetched for a shop (/get-all-products-shop/:id), the backend performs sentiment analysis on each review comment using an external AI service. The dominant sentiment (e.g., positive, negative) is then added to the review object before being sent to the client.
Sources: backend/controller/product.js:101-137, backend/controller/product.js:235-274
Frontend Implementation
The frontend, built with React and Redux, provides the user interface for sellers to manage products and for customers to view them.
Product Creation Form
The CreateProduct component provides a form for sellers to add new products. It uses React state to manage form inputs and FormData to handle the submission, including images.
Sources: frontend/src/components/Shop/CreateProduct.jsx
The form submission logic is as follows:
The form includes fields for all necessary product attributes, such as name, description, category, prices, stock, and images.
// frontend/src/components/Shop/CreateProduct.jsx:65-78
const newForm = new FormData();
images.forEach((image) => {
newForm.append('images', image);
});
newForm.append('name', name);
newForm.append('description', description);
newForm.append('category', category);
newForm.append('tags', tags);
newForm.append('originalPrice', originalPrice);
newForm.append('discountPrice', discountPrice);
newForm.append('stock', stock);
newForm.append('shopId', seller.id);
dispatch(createProduct(newForm));
Sources: frontend/src/components/Shop/CreateProduct.jsx:65-78
Seller's Product List
The AllProducts component in the seller's dashboard displays a list of all products associated with their shop. It uses the Material-UI DataGrid component for a tabular view.
Key features of this component include:
- Fetching products via the
getAllProductsShopRedux action. - Displaying columns for Product ID, Name, Price, Stock, and Sold count.
- Providing action buttons for each product to View, Edit, and Delete.
- An edit modal that allows sellers to update product information, which triggers a
PUTrequest to the/update-productendpoint.
Sources: frontend/src/components/Shop/AllProducts.jsx
Customer-Facing Product Views
Product Details Page
The ProductDetails component is responsible for rendering the full details of a single product for a customer. It displays:
- A main image with selectable thumbnails.
- Product name, tags, category, and sold count.
- Original and discounted prices.
- A quantity selector.
- "Add to cart" and wishlist buttons.
- Information about the seller's shop.
- A tabbed section for product description, reviews, and more shop info.
Sources: frontend/src/components/Products/ProductDetails.jsx
Product Card
The ProductCard is a smaller, summary component used in product listing pages (e.g., home page, category pages). It provides a quick overview of the product, including its image, name, price, and ratings, with quick-action icons for "Quick view", "Add to wishlist", and "Add to cart".
Sources: frontend/src/components/Route/ProductCard/ProductCard.jsx
Summary
The Product Management module is a comprehensive system that handles the entire lifecycle of a product within the application. It provides a robust backend API for CRUD operations and a user-friendly frontend interface for both sellers and customers. The separation of concerns between the backend (data logic) and frontend (presentation) allows for a scalable and maintainable architecture. The integration of features like image handling, reviews, and sentiment analysis makes it a central and powerful component of the e-commerce platform.