Architecture Overview
Relevant source files
The following files were used as context for generating this wiki page:
This project follows a decoupled client-server architecture consisting of a React-based frontend and a .NET-based REST API backend. The system facilitates a peer-to-peer marketplace where users can register, list products across various categories, and communicate through an internal messaging system.
The backend is structured as a Web API utilizing Entity Framework Core for data persistence and JWT for secure authentication. The frontend is a Single Page Application (SPA) built with React, leveraging Context API for state management and Axios/Fetch for API communication.
Sources: Back/Alumnos/Api/Program.cs, Front/src/App.js
Backend Architecture
The backend is built on .NET and follows a standard Controller-Service-Repository pattern (implied by dependency injection). It exposes a RESTful interface for managing users, products, and categories.
Core Components and Dependency Injection
The application's entry point configures essential services, including database context, authentication, and custom utility services.
| Service Category | Implementation / Type | Description |
|---|---|---|
| Persistence | AplicacionBdContexto | SQL Server context for database operations. |
| Security | Sha512HasherServicio | Handles password hashing using SHA512. |
| Authentication | JwtTokenServicio | Manages JWT creation and validation. |
| Documentation | Swagger/OpenAPI | Provides interactive API documentation at /swagger. |
Sources: Back/Alumnos/Api/Program.cs:13-25
Request Lifecycle and Middleware
The backend processes requests through a pipeline that includes CORS policies, authentication, and authorization.
The authentication middleware validates the Authorization header, extracting claims through ITokenIdentidadServicio.
Sources: Back/Alumnos/Api/Program.cs:46-95
Frontend Architecture
The frontend is a React application that manages state via Context Providers and handles navigation through react-router-dom.
System Data Flow
The frontend interacts with the backend through service modules that encapsulate API logic.
State Management and Contexts
The application uses specialized contexts to share data across the component tree:
- AuthContext: Manages user session state and persistence.
- ChatContext: Handles real-time communication logic and message history.
- ProductContext: Manages product listings and filtering logic.
Sources: Front/src/routes/appRoutes.jsx:15-20, Front/src/App.js:10-20
API Interface
The system defines clear contracts for data exchange between the frontend and backend.
Key API Endpoints
| Endpoint | Method | Description | Source File |
|---|---|---|---|
/usuarios | GET/POST | List or register users | UsuariosController.cs:25-50 |
/usuarios/{slug} | PUT/PATCH | Update user profile or status | UsuariosController.cs:68-100 |
/productos | GET/POST | List or create products | api.js:68-85 |
/categorias | GET/POST | Manage product categories | CategoriasController.cs:22-45 |
/login | POST | Authenticate user and receive token | api.js:116-125 |
Data Models
DTOs (Data Transfer Objects) are used to shape the data returned by the API, ensuring internal entities are not directly exposed. The MapeoDtos utility performs these conversions.
Sources: Back/Alumnos/Api/Comun/Utilidades/MapeoDtos.cs:10-35
Security Implementation
Security is implemented at both the transport and application layers.
- Transport: The API is configured to use HTTPS redirection. Sources: Back/Alumnos/Api/Program.cs:103
- Authentication: Uses
JwtBearerwith custom validation logic. The system checks for token expiration and validates claims against the identity service. Sources: Back/Alumnos/Api/Program.cs:72-85 - Password Security: Passwords are never stored in plain text; the
RegistrarUsuarioaction hashes them before persistence. Sources: Back/Alumnos/Api/Controllers/UsuariosController.cs:55-60 - Client-Side: The frontend stores the JWT in
localStorageand automatically includes it in theAuthorization: Bearer <token>header for subsequent requests. Sources: Front/src/services/api.ts:35-41
Conclusion
The architecture demonstrates a clear separation of concerns, with a robust .NET backend providing security and data integrity, and a dynamic React frontend providing a responsive user experience. The use of dependency injection in the backend and context-based state management in the frontend allows for a scalable and maintainable codebase.