Technology Stack
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The project "Bazar del Venado" is a full-stack web application designed for students to buy and sell products within a university community. The architecture follows a decoupled client-server model, utilizing a React-based frontend and a .NET-based RESTful API.
The system integrates modern web technologies to handle authentication via JWT (JSON Web Tokens), real-time-like state management for product listings, and a structured backend service layer for data persistence and business logic.
Sources: Front/src/pages/home.jsx, Back/Alumnos/Api/Program.cs
Backend Architecture
The backend is built using .NET (ASP.NET Core), utilizing a service-oriented architecture with dependency injection. It handles data persistence through Entity Framework Core and secures endpoints using JWT-based authentication.
Core Backend Components
- Web API Framework: ASP.NET Core.
- Database ORM: Entity Framework Core with SQL Server.
- Security: JWT Bearer authentication and SHA-512 hashing for passwords.
- Documentation: Swagger (OpenAPI) for API testing and visualization.
The backend manages cross-origin resource sharing (CORS) through a "PoliticasCors" policy that allows any origin, header, and method, while exposing the Authorization header for token management.
Sources: Back/Alumnos/Api/Program.cs:11-60
Configuration and Environment
The backend configuration is managed through standard JSON profiles.
| Feature | Configuration Detail |
|---|---|
| Authentication Scheme | JwtBearerDefaults |
| Environment | Development / Production |
| API URL (HTTP) | http://localhost:5230 |
| API URL (HTTPS) | https://localhost:7170 |
| Persistence | UseSqlServer with DefaultConexion |
Sources: Back/Alumnos/Api/Properties/launchSettings.json:10-35, Back/Alumnos/Api/Program.cs:14-16
Frontend Architecture
The frontend is a Single Page Application (SPA) built with React. It utilizes a modular structure for pages, components, and services, using React Router for navigation and Context API for global state management (Auth and Chat).
Frontend Tech Stack
- UI Library: React 19.
- Styling: Bootstrap 5, React-Bootstrap, Emotion, and Framer Motion for animations.
- Routing: React Router Dom 7.
- Data Fetching: Axios and Fetch API.
- Icons: Bootstrap Icons and React Icons.
Communication and Data Flow
Communication between the frontend and backend is handled via asynchronous REST API calls. The frontend uses specialized service objects to abstract the logic for users, products, and authentication.
API Service Layers
The application uses two implementations for API communication: a standard JavaScript implementation using the fetch API and a TypeScript implementation using axios with interceptors for automatic token injection.
Authentication Workflow
Authentication is maintained via a JWT stored in the browser's localStorage. The server validates this token on every protected request.
| Component | Responsibility |
|---|---|
| AuthService (Frontend) | Handles login/logout and token storage. |
| TokenIdentidadServicio (Backend) | Manages JWT generation and claim validation. |
| IHasherServicio (Backend) | Provides SHA-512 hashing for user credentials. |
| ProtectedRoute (Frontend) | Guards routes requiring an active user session. |
Sources: Back/Alumnos/Api/Program.cs:17-19, Front/src/routes/appRoutes.jsx:45-75, Front/src/services/api.js:120-135
Summary
The "Bazar del Venado" technology stack leverages the strengths of .NET for a secure, type-safe backend and React for a dynamic, responsive user interface. By utilizing JWT for stateless authentication and Entity Framework for data management, the project establishes a scalable foundation for university-based e-commerce.
Sources: Front/README.md, Back/Alumnos/Api/Program.cs