Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/JoseOlivares19/Proyecto-PC3-JavaScript-Avanzado/llms.txt

Use this file to discover all available pages before exploring further.

All HTTP communication between the SmartStock360 React frontend and the Spring Boot backend is handled by a single thin service module located at src/services/api.ts. The file exports two async functions — one for fetching the product list and one for submitting a prediction payload — keeping the transport logic cleanly separated from the UI component in App.tsx.

The Complete Service File

The entire src/services/api.ts module is shown below exactly as it appears in the repository:
import axios from 'axios';

const API_URL = 'https://swifttask.tech/universidad/api/productos';

export const predecirDemanda = async (datosProducto: any) => {
    const response = await axios.post(`${API_URL}/predict`, datosProducto);
    return response.data;
};

export const obtenerProductos = async () => {
    const response = await axios.get(API_URL);
    return response.data;
};

obtenerProductos()

Performs a GET request to the base API_URL and returns the response body directly.
export const obtenerProductos = async () => {
    const response = await axios.get(API_URL);
    return response.data;
};
  • Endpoint: GET /api/productos
  • Returns: An array of product objects from the MySQL database, each containing at minimum id, nombre, precio, and stockActual fields
  • Called by: cargarProductos() inside App.tsx, triggered automatically on component mount via useEffect

predecirDemanda(datosProducto)

Posts a structured prediction payload to the /predict sub-resource and returns the AI model’s response.
export const predecirDemanda = async (datosProducto: any) => {
    const response = await axios.post(`${API_URL}/predict`, datosProducto);
    return response.data;
};
  • Endpoint: POST /api/productos/predict
  • Accepts: A datosProducto object (see payload shape below)
  • Returns: The AI prediction response object (see response shape below)
  • Called by: manejarPrediccion() inside App.tsx, triggered when the user clicks “Ejecutar Predicción IA”

Changing the Base URL for Local Development

By default the service targets the deployed production backend. To run against a local Spring Boot instance, open src/services/api.ts and replace the API_URL constant:
// Change this:
const API_URL = 'https://swifttask.tech/universidad/api/productos';

// To this for local development:
const API_URL = 'http://localhost:8080/api/productos';
Vite’s dev server will pick up the change via HMR without a full restart.
If your browser blocks the request due to CORS, ensure the Spring Boot backend has CORS configured to allow http://localhost:5173. Do not commit the local URL to version control — use a .env file (VITE_API_URL) for environment-specific values.

Prediction Request Payload Shape

The datosProducto object passed to predecirDemanda() must match the fields expected by the backend PredictDto.java and the Python StockRequest model:
{
  precio: number,               // Unit price of the product
  stock_actual: number,         // Current units in stock
  ventas_7d: number,            // Units sold in the last 7 days
  descuento_pct: number,        // Active discount percentage (0–100)
  temporada: number,            // Season flag: 0 = normal, 1 = campaign, 2 = holiday/high demand
  dias_sin_reabastecer: number, // Days elapsed since last restock
  rating_producto: number       // Product rating (e.g. 1.0–5.0)
}
The hardcoded demo payload defined in App.tsx provides a concrete example:
const formulario = {
  precio: 129.90,
  stock_actual: 80,
  ventas_7d: 420,
  descuento_pct: 20,
  temporada: 2,
  dias_sin_reabastecer: 18,
  rating_producto: 4.6
};

Prediction Response Shape

A successful call to predecirDemanda() returns a JSON object with the following structure:
{
  "caso": "SmartStock360",
  "prediccion": "DEMANDA_ALTA_REABASTECER",
  "confianza": 0.87,
  "ranking": [],
  "recomendaciones": [
    "Reabastecer en las próximas 48 horas."
  ],
  "entrada": {}
}
FieldTypeDescription
casostringIdentifies the project — always "SmartStock360"
prediccionstringThe raw ML class label (DEMANDA_ALTA_REABASTECER, DEMANDA_MEDIA_MONITOREAR, or similar)
confianzanumberModel confidence score between 0 and 1
rankingarrayClass probability ranking from the model
recomendacionesstring[]Human-readable action recommendations to display in the UI
entradaobjectEcho of the input payload as received by the backend
The prediccion and recomendaciones fields are the ones actively consumed and displayed by App.tsx. The confianza field is returned in the response and available on the resultado object in state if you wish to surface it in the UI.
Neither predecirDemanda nor obtenerProductos perform internal error handling — both are bare async/await functions that let exceptions propagate to the caller. Error handling lives in App.tsx: both manejarPrediccion() and cargarProductos() wrap their calls in try/catch blocks that log failures to the browser console via console.error(). No error state is surfaced in the UI beyond the empty inventory table shown when productos remains an empty array.

Build docs developers (and LLMs) love