Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/DevOpsDuoc/Evaluacion02_Devop_Innovatech/llms.txt

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

The frontend is a React 18 single-page application built with Vite that provides the admin interface for Tienda de Perritos. It communicates with both the Ventas API and the Despachos API over HTTP, and is served as compiled static assets by NGINX inside Docker on port 80.

Ventas API

Sales microservice the frontend reads and writes via Axios

Despachos API

Dispatch microservice the frontend reads and writes via Axios

​
Overview

Port

80 (NGINX in Docker)

Framework

React 18 + Vite 5

Styling

Tailwind CSS 3

Routing

React Router v6

​
Technology stack

The application is assembled from the following packages, as declared in package.json:
PackageVersionPurpose
react^18.2.0UI component framework
react-dom^18.2.0DOM renderer
react-router-dom^6.24.1Client-side routing
axios^1.6.8HTTP client for API requests
react-hook-form^7.52.1Form state management and validation
sweetalert2^11.11.0Modal dialogs and confirmation prompts
react-icons^5.1.0Icon library
tailwindcss^3.4.3Utility-first CSS framework
vite^5.2.0Build tool and dev server

​
Component structure

The application organises its UI into two groups under src/componentes/: 
src/componentes/
├── CrudAdmin/
│   ├── CardComponent.jsx       # Summary stat cards
│   ├── FormCierreDespacho.jsx  # Form to close/complete a dispatch
│   ├── FormDespacho.jsx        # Form to create a new dispatch
│   ├── Modal.jsx               # Reusable modal wrapper
│   ├── PruebaCards.jsx         # Card layout test/demo
│   ├── SearchBar.jsx           # Search input component
│   ├── TableCompras.jsx        # Sales data table
│   └── TableDespachos.jsx      # Dispatches data table
├── CrudAdmin.jsx               # Main admin view
└── Layouts/
    ├── Carrusel.jsx            # Image carousel
    ├── Footer.jsx              # Page footer
    ├── Navbar.jsx              # Navigation bar
    └── Reviews.jsx             # Reviews section

​
Environment variables

Two environment variables configure the API base URLs. Vite exposes only variables prefixed with VITE_ to the browser bundle.
VariableExample valueDescription
VITE_API_BASE_URLhttp://backend:3001Base URL for the Ventas API
VITE_API_DESPACHOS_URLhttp://backend-despachos:3002Base URL for the Despachos API
In Docker Compose, the values use the service hostnames (backend, backend-despachos). For local development outside Docker, point these variables to http://localhost:3001 and http://localhost:3002 in a .env.local file.
docker-compose.yml (frontend service)
frontend:
  build:
    context: ./front_despacho
  ports:
    - "80:80"
  environment:
    VITE_API_BASE_URL: http://backend:3001
    VITE_API_DESPACHOS_URL: http://backend-despachos:3002
  depends_on:
    - backend
    - backend-despachos

​
Docker build

The frontend uses a two-stage build: Node compiles the assets, then NGINX serves the resulting dist/ folder.
Dockerfile
# Stage 1 — build
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Stage 2 — serve
FROM nginx:stable-alpine AS runtime
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
1

Builder stage

node:20-alpine installs exact dependency versions with npm ci, then runs vite build to compile TypeScript/JSX and bundle assets into dist/.
2

Runtime stage

nginx:stable-alpine copies the compiled dist/ folder into NGINX’s default web root at /usr/share/nginx/html and serves it on port 80.

​
Local development

To run the frontend outside Docker with hot-module replacement:
1

Install dependencies

cd proyect/front_despacho
npm install
2

Set API URLs

Create a .env.local file to point at locally running API instances:
.env.local
VITE_API_BASE_URL=http://localhost:3001
VITE_API_DESPACHOS_URL=http://localhost:3002
3

Start the dev server

npm run dev
Vite starts a dev server with HMR at http://localhost:5173 by default.
Run the two Spring Boot APIs first (or start them with docker compose up backend backend-despachos db -d) so the frontend has live data to work with during development.

Build docs developers (and LLMs) love

Get started for freeTalk to us