Product Management Overview
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Product Management system within the Bazar del Venado project provides a comprehensive framework for users to list, view, and manage items for sale within a university environment. This system bridges a React-based frontend with a .NET-based backend API, allowing for real-time interactions such as product publication, category filtering, and seller contact.
The scope of this module covers the entire lifecycle of a product listing: from the initial creation and image upload by a seller, through public display and filtering in the marketplace, to the final retrieval of detailed information by potential buyers.
Architecture and Data Flow
The system follows a client-server architecture. The frontend utilizes React with Context API for state management, while the backend utilizes ASP.NET Core controllers to handle data persistence via Entity Framework.
Product Creation Flow
When a user publishes a product, the data is captured via a multipart form (including image processing) and dispatched to the backend.
Marketplace Discovery
Products are displayed on the home page with filtering capabilities based on categories defined in the system.
| Category | Description |
|---|---|
| Electrónica | Electronic devices and gadgets |
| Libros | Educational and leisure reading |
| Ropa | Apparel and accessories |
| Deportes | Sports equipment |
| Hogar | Home goods |
| Videojuegos | Gaming consoles and software |
| Otros | Miscellaneous items |
Sources: Front/src/pages/home.jsx:11-20, Front/src/pages/publishProduct.jsx:7-15
Backend Implementation
The backend handles product entities through a specialized controller that interacts with the IAplicacionBdContexto.
API Endpoints
The ProductosController exposes several RESTful endpoints for product manipulation:
| Method | Endpoint | Description |
|---|---|---|
| GET | /productos | Retrieves a list of products, filterable by name and availability. |
| GET | /productos/{id} | Retrieves details for a specific product. |
| POST | /productos | Creates a new product listing. |
| PUT | /productos/{id} | Updates an existing product. |
| DELETE | /productos/{id} | Removes a product from the system. |
Sources: Back/Alumnos/Api/Controllers/ProductoController.cs:17-105
Data Structures (DTOs)
Communication between the layers is facilitated by Data Transfer Objects (DTOs) to ensure strict typing and security.
// Example of the Create Product DTO
public class CrearProductoDto
{
public int ProductoID { get; set; }
public string Nombre { get; set; }
public string Descripcion { get; set; }
public decimal Precio { get; set; }
public bool Disponible { get; set; }
public string CategoriaSlug { get; set; }
public string UsuarioSlug { get; set; }
public DateTime FechaPublicacion { get; set; }
}
Sources: Back/Alumnos/Api/Comun/Modelos/Productos/CrearProductoDto.cs:3-14
Frontend Components
The frontend is built with modular React components that utilize the ProductContext for shared state.
Key Components
- publishProduct.jsx: Manages the multi-input form for new listings, including a
FileReaderimplementation for local image previews and size validation (max 5MB). - productDetail.jsx: Renders individual product views and facilitates the transition to the messaging system if a buyer wishes to contact a seller.
- home.jsx: Implements search and filter logic using
useEffecthooks to update the displayed list based on theselectedCategory. - appRoutes.jsx: Defines the
ProductContext.Providerand utility functions likegetProductByIdandgetUserProducts.
Sources: Front/src/pages/publishProduct.jsx:32-60, Front/src/pages/productDetail.jsx:15-30, Front/src/pages/home.jsx:34-45, Front/src/routes/appRoutes.jsx:17-40
State Management Sequence
The following diagram illustrates how product details are retrieved and displayed to a user.
Summary
The Product Management system integrates a robust .NET backend with a responsive React frontend to facilitate a peer-to-peer university marketplace. By utilizing standardized DTOs and a centralized Context-driven state management, the application ensures data consistency and a seamless user experience from publication to discovery.