Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Nelsoncg98/InnovaTech/llms.txt

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

The frontend-web application is the digital channel frontend for InnovaTech SOA. It is one of two independent React single-page applications in the platform — the other being frontend-pos for physical store terminals. This app delivers the customer-facing web storefront and communicates exclusively with backend microservices through the API Gateway running on port 8080.

​
Tech Stack

frontend-web is built with a modern, minimal toolchain sourced directly from package.json:
TechnologyVersionRole
React19.2.7UI component library
React DOM19.2.7DOM rendering
Vite8.1.0Dev server and build tool
@vitejs/plugin-react6.0.2Babel-based Fast Refresh
oxlint1.69.0Fast Rust-based linter
@types/react19.2.17TypeScript type definitions
@types/react-dom19.2.3TypeScript type definitions for DOM
The project uses ES Modules ("type": "module") and ships TypeScript type definitions in devDependencies, enabling editor intellisense without requiring a full TypeScript compilation step.

​
Getting Started

1

Navigate to the directory

From the repository root, move into the web frontend folder:
cd frontend-web
2

Install dependencies

Install all required packages using your preferred package manager:
npm install
3

Start the development server

Launch Vite’s dev server with Hot Module Replacement (HMR) enabled. Vite serves the app on its default port:
npm run dev
The application will be available at http://localhost:5173.
4

Build for production

Compile and bundle the application for deployment. The output is written to the dist/ directory:
npm run build
Backend microservices must be running before the frontend can display real data. At minimum, the API Gateway (port 8080) and servicio-catalogo (port 8084) must be up.

​
Project Structure

The application follows the standard Vite + React layout. Key files and their roles are:
PathDescription
index.htmlHTML entry point; mounts the #root div and loads src/main.jsx as an ES module
src/main.jsxApplication entry point; renders the root <App /> component into #root
src/App.jsxRoot React component; top-level layout and routing anchor for the storefront
src/App.cssComponent-scoped styles for App.jsx
src/index.cssGlobal baseline styles applied across the entire application
src/assets/Static assets imported directly into components (e.g. react.svg, vite.svg, hero.png)
public/favicon.svgBrowser tab icon, served at /favicon.svg
public/icons.svgSVG sprite sheet referenced by <use href="/icons.svg#..."> in components
vite.config.jsVite configuration; registers the @vitejs/plugin-react plugin

​
API Integration

All backend communication is routed through the API Gateway at http://localhost:8080. The gateway’s application.yml defines the available route prefixes:
Route PrefixUpstream ServicePort
/api/v1/catalogo/**servicio-catalogo8084
/api/v1/ventas-pos/**servicio-ventapos (POS orchestrator)8082
/api/v1/inventario/**servicio-inventario8081
For the web storefront, the primary integration point is the catalog service. The following example fetches all products: 
fetch('http://localhost:8080/api/v1/catalogo/products')
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.error('Gateway unreachable:', err))
During development, add a server.proxy entry to vite.config.js so requests to /api are forwarded to the API Gateway automatically. This avoids hardcoding the full gateway URL in your component code and eliminates browser CORS preflight issues:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
})
After this change you can call fetch('/api/v1/catalogo/products') directly in your components.

​
Available Scripts

The following scripts are defined in package.json:
ScriptCommandDescription
devviteStarts the Vite development server with HMR on http://localhost:5173
buildvite buildBundles the app for production into the dist/ directory
lintoxlintRuns the oxlint static analyser across the project source
previewvite previewServes the production dist/ build locally for pre-deploy verification

Build docs developers (and LLMs) love

Get started for freeTalk to us