Introduction
Relevant source files
The following files were used as context for generating this wiki page:
The "Bazar del Venado" is a web-based marketplace application designed for university students to buy and sell products. Built using the React framework and integrated with a .NET-based backend, the platform facilitates local commerce through product listings, category-based filtering, user authentication, and a direct messaging system between buyers and sellers.
The project follows a modern client-server architecture. The frontend handles state management for products and user sessions, while the backend provides RESTful API endpoints for persistent storage and business logic. The system emphasizes ease of use with a responsive UI built on Bootstrap and smooth transitions powered by Framer Motion.
Sources: Front/src/pages/home.jsx:51-57, Front/package.json:7-24
Core System Architecture
The application is divided into a React-based frontend and a .NET backend API. The frontend uses a context-based state management approach to handle authentication, product data, and real-time messaging.
Frontend Component Structure
The frontend is organized into pages, components, and services. Key pages include Home for product discovery, PublishProduct for creating listings, and Messages for user interaction.
The diagram shows the hierarchical structure of the React application, highlighting how providers wrap the routing system to provide global state.
Sources: Front/src/App.js:10-20, Front/src/routes/appRoutes.jsx:39-65
Data Models and State Management
The system manages three primary entities: Users, Products, and Chats. Data is handled through React Contexts to ensure availability across the component tree.
Product Management
Products are defined by several key attributes and are categorized to facilitate discovery.
| Field | Type | Description |
|---|---|---|
id | Number/String | Unique identifier (often generated via Date.now()) |
name | String | Title of the product |
description | String | Detailed text about the item |
price | Number | Cost in CLP |
category | String | One of: Electrónica, Libros, Ropa, Deportes, Hogar, Videojuegos, Otros |
image | String (Base64/URL) | Visual representation of the product |
seller | Object | Contains id and name of the listing owner |
Sources: Front/src/pages/publishProduct.jsx:7-15, Front/src/routes/appRoutes.jsx:21-31
Messaging System Logic
Communication between users is established via a chat system that links a buyer and a seller to a specific product.
The ER diagram illustrates the relationships between users, products, and the hierarchical structure of the messaging system.
Sources: Front/src/context/ChatContext.jsx:13-33
Network and API Integration
The frontend communicates with the backend via a centralized service layer using the Fetch API or Axios. The backend is configured to run on specific local ports during development.
Backend Configuration
The .NET backend environment is configured to provide Swagger documentation for API exploration.
| Environment | URL | Command |
|---|---|---|
| HTTP | http://localhost:5230 | Project |
| HTTPS | https://localhost:7170 | Project |
| IIS Express | http://localhost:33744 | IISExpress |
Sources: Back/Alumnos/Api/Properties/launchSettings.json:13-39
Service Layer Implementation
The api.js file abstracts the HTTP communication, handling authentication tokens and standardized error responses.
// Example of the product service structure
export const productosService = {
obtenerProductos: async (nombre = '', disponible = true) => {
const response = await fetch(`${API_BASE_URL}/productos?nombre=${nombre}&disponible=${disponible}`, {
headers: getAuthHeader()
});
return handleResponse(response);
},
crearProducto: async (producto) => {
const response = await fetch(`${API_BASE_URL}/productos`, {
method: 'POST',
headers: { 'Content-Type': 'application/json', ...getAuthHeader() },
body: JSON.stringify(producto)
});
return handleResponse(response);
}
};
Sources: Front/src/services/api.js:77-101
User Authentication Flow
The application implements a secure routing system where certain actions (publishing, messaging) are restricted to authenticated users.
This sequence diagram shows the logic gate applied to protected routes to ensure session security.
Sources: Front/src/routes/appRoutes.jsx:45-64, Front/src/pages/login.jsx:30-41
Conclusion
The "Bazar del Venado" system provides a robust framework for peer-to-peer university commerce. By integrating React's component-based UI with a structured .NET API, the project manages the full lifecycle of a product—from publication and discovery to negotiation via an internal chat system. The use of modern libraries like Bootstrap and Framer Motion ensures a professional user experience, while the service-oriented architecture allows for scalable development.
Sources: Front/README.md:1-5, Front/src/pages/home.jsx:114-145