Frontend Setup & Installation
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The frontend of the "Bazar del Venado" project is a React-based web application bootstrapped with Create React App. It serves as a marketplace interface for university students, enabling product listings, category filtering, user registration, and real-time communication through a chat system.
The application leverages modern web technologies including Bootstrap for styling, Axios and Fetch for API communication, and React Router for navigation. It is designed to interact with a backend service typically hosted on a local development server, providing a responsive and interactive user experience.
Sources: Front/README.md:3, Front/src/pages/home.jsx:54-61
Project Requirements and Dependencies
The project relies on several key libraries to manage UI components, animations, and API interactions. These dependencies must be installed via a package manager like npm or yarn.
Core Dependencies
| Dependency | Version | Purpose |
|---|---|---|
react | ^19.1.0 | Core UI library |
react-bootstrap | ^2.10.10 | UI component framework |
axios | ^1.9.0 | Promise-based HTTP client |
react-router-dom | ^7.6.1 | Declarative routing |
framer-motion | ^12.15.0 | Animation and motion library |
bootstrap | ^5.3.6 | CSS framework for styling |
Sources: Front/package.json:5-26
Installation and Execution
To set up the development environment, the following scripts are available within the project directory.
Environment Setup
- Clone the repository: Ensure you have the source code locally.
- Install dependencies: Run
npm installto download all required packages listed inpackage.json. - Start Development Server: Execute
npm start. This runs the app in development mode and opens http://localhost:3000 in the browser. The page reloads automatically upon code changes.
Build and Deployment
- Testing:
npm testlaunches the test runner in interactive watch mode. - Production Build:
npm run buildcreates an optimized production bundle in thebuild/folder. It minifies the code and includes hashes in filenames for caching.
Sources: Front/README.md:7-31, Front/package.json:28-33
Application Architecture
The application follows a standard React entry point structure. The root element is defined in index.html and populated by index.js.
Component Hierarchy
The following diagram illustrates the high-level component and provider structure of the frontend:
The application uses a nested provider pattern to ensure authentication and chat states are available throughout the component tree.
Sources: Front/src/index.js:9-14, Front/src/App.js:10-18, Front/src/routes/appRoutes.jsx:40-66
API Configuration
The frontend connects to a backend API, which is configured via service modules. Two primary implementations exist: a JavaScript version using fetch and a TypeScript/Axios version.
Connection Parameters
| Parameter | Default Value | Description |
|---|---|---|
API_BASE_URL | http://localhost:5230 | Base URL for standard JS fetch services |
baseURL (Axios) | http://localhost:3000/api | Base URL for TypeScript Axios services |
Authorization | Bearer {token} | Header used for authenticated requests |
Authentication Data Flow
The application manages authentication state by storing a JWT token in the browser's local storage.
Summary
Setting up the frontend involves installing dependencies via npm and utilizing the built-in React scripts for development and production builds. The architecture is centered around a provider-based state management system that handles authentication and real-time messaging, while the routing logic ensures secure access to features like product publishing and private messaging. For local development, the API base URL must match the running instance of the backend service (typically port 5230 or 3000).