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.

The SmartStock360 frontend is a single-page React application that serves as the visual interface for inventory management and AI-powered demand forecasting. It displays a product card with demo values, lets users trigger predictions against the Spring Boot backend, renders AI results (prediction label and recommendations), and shows a live inventory table sourced from MySQL through the REST API.

​
Tech Stack

React 19.2.7

Latest React with concurrent features and the new JSX transform.

Vite 8 + TypeScript 6

Lightning-fast dev server and HMR backed by strict TypeScript compilation.

Axios 1.18

Promise-based HTTP client used for all backend communication.

oxlint

Rust-based linter for fast, zero-config linting of the TypeScript source.

​
Prerequisites

Before running the frontend you need:
  • Node.js 18 or later — the Vite 8 build pipeline requires it
  • npm — bundled with Node.js; no separate install needed
  • A running instance of the SmartStock360 Spring Boot backend (or the deployed URL) reachable at the configured API_URL

​
Setup

1

Navigate to the frontend directory

From the repository root, change into the Vite project folder:
cd frontend/frontend-smartstock
2

Install dependencies

Install all production and development dependencies declared in package.json:
npm install
This pulls in React, ReactDOM, Axios, Vite, the React plugin, TypeScript, type definitions, and oxlint.
3

Start the development server

Launch the Vite dev server with hot module replacement:
npm run dev
The application will be available at http://localhost:5173. Vite proxies nothing by default — API calls go directly to the API_URL configured in src/services/api.ts.
4

Build for production

Compile TypeScript and bundle the app for deployment:
npm run build
The optimised output lands in the dist/ directory, ready to be served from any static host or web server. The Vite config sets base: '/universidad/', so all asset paths will be rooted at that sub-path.

​
Available npm Scripts

ScriptCommandPurpose
devviteStart local dev server at localhost:5173
buildtsc -b && vite buildType-check then bundle to dist/
lintoxlintRun the Rust-based linter across all source files
previewvite previewLocally preview the production dist/ build

​
Configuring the API Base URL

The API base URL is hardcoded in src/services/api.ts. By default it points to the deployed production endpoint: 
const API_URL = 'https://swifttask.tech/universidad/api/productos';
For local development against a locally running Spring Boot instance, update that constant to: 
const API_URL = 'http://localhost:8080/api/productos';
Save the file — Vite’s HMR will pick up the change immediately without restarting the dev server.
Do not commit the local URL to version control. Consider using a .env file with VITE_API_URL and referencing import.meta.env.VITE_API_URL instead so the URL stays out of source code.

​
Vite Configuration

The project’s vite.config.ts is minimal and intentional: 
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/universidad/',
})
The base: '/universidad/' setting means the production build expects to be served from the /universidad/ sub-path — matching the deployed URL at https://swifttask.tech/universidad/.
The repository includes a pre-built production bundle in the update/dist/ directory. If you just want to inspect the compiled output or deploy without a local Node.js build step, that directory can be served directly by any static file server or dropped into a web root without running npm run build.

Build docs developers (and LLMs) love

Get started for freeTalk to us