Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Edwin950821/BodegaX/llms.txt

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

This guide walks you through every step required to run BodegaX locally — from installing system prerequisites to making your first authenticated API call. By the end, you will have both the Angular frontend and the Spring Boot backend running simultaneously, and you will be able to log in as an administrator through the browser.
BodegaX is a two-process application. The Angular dev server and the Spring Boot backend must both be running at the same time for the application to function. The frontend at http://localhost:4200 makes live HTTP calls to the backend at http://localhost:8080 — if either process is stopped, the other will be unable to complete most operations.

​
Prerequisites

Ensure the following tools are installed and available on your PATH before proceeding.
PrerequisiteMinimum VersionPurpose
Node.js18+Angular build toolchain and package manager
Angular CLI17+ng serve, ng build, and scaffolding commands
Java Development Kit17+Compiling and running the Spring Boot backend
Maven or GradleLatest stableBuilding and running the Spring Boot project
PostgreSQL14+Relational database for all application data
Use nvm (Node Version Manager) to manage Node.js versions if you work across multiple projects. Running nvm use 18 before starting ensures you are always on a compatible Node version without altering your system default.

​
Setup Steps

1

Clone both repositories

BodegaX consists of a separate Angular frontend and a Spring Boot backend. Clone both to your local machine.
# Angular frontend
git clone https://github.com/Edwin950821/BodegaX.git
cd BodegaX

# Spring Boot backend — open a second terminal
git clone https://github.com/Edwin950821/BodegaX-Backend.git
cd BodegaX-Backend
Keep both directories open in separate terminal windows throughout this guide.
2

Configure the PostgreSQL database

Create a new PostgreSQL database for BodegaX and update the backend’s data source settings to match your local environment.
-- Run these commands in psql or your preferred PostgreSQL client
CREATE DATABASE bodegax;
CREATE USER bodegax_user WITH PASSWORD 'yourpassword';
GRANT ALL PRIVILEGES ON DATABASE bodegax TO bodegax_user;
Then open the backend’s application.properties (or application.yml) and update the connection values:
spring.datasource.url=jdbc:postgresql://localhost:5432/bodegax
spring.datasource.username=bodegax_user
spring.datasource.password=yourpassword
spring.jpa.hibernate.ddl-auto=update
spring.jpa.database-platform=org.hibernate.dialect.PostgreSQLDialect
Set spring.jpa.hibernate.ddl-auto=update for development. For a production deployment, use validate or a dedicated migration tool such as Flyway to avoid unintended schema changes.
3

Start the Spring Boot backend

From inside the BodegaX-Backend directory, build and start the backend server using Maven.
mvn spring-boot:run
Spring Boot’s embedded Tomcat server will start on port 8080. Wait until you see a log line similar to the following before moving to the next step:
Started BodegaXApplication in 3.452 seconds (process running for 3.9)
If you prefer Gradle, use:
./gradlew bootRun
4

Install Angular dependencies

Switch to the BodegaX (frontend) directory and install all npm packages declared in package.json.
cd BodegaX
npm install
This installs Angular 17, Angular Material, RxJS, jsPDF, jsPDF-AutoTable, and all dev dependencies. The install typically takes 30–60 seconds on a standard connection.
5

Start the Angular development server

Launch the Angular dev server from within the BodegaX directory.
ng serve
The CLI compiles the application and starts a live-reload dev server on port 4200. You will see output similar to:
✔ Browser application bundle generation complete.
Initial chunk files | Names    | Raw size
main.js             | main     | 1.23 MB

Build at: 2024-01-15T10:00:00.000Z - Hash: abc123def456 - Time: 8500ms

** Angular Live Development Server is listening on localhost:4200,
   open your browser on http://localhost:4200/ **

✔ Compiled successfully.
The Angular dev server watches your source files and automatically recompiles and reloads the browser whenever you save a change. You do not need to restart ng serve during active development — changes to TypeScript, HTML, and CSS files are reflected in the browser within seconds.
6

Open the application in your browser

Navigate to the following URL in any modern browser (Chrome, Firefox, Edge, or Safari):
http://localhost:4200
The CheckNotLoginGuard on the /login route will detect that no session exists in sessionStorage and render the login screen automatically. If you are already logged in from a previous session in the same browser tab, the same CheckNotLoginGuard will redirect you away from /login straight to the home dashboard.
7

Log in with administrator credentials

The login form submits a POST request to the Spring Boot backend’s /admin/login endpoint. You can test this directly with curl before using the UI:
curl -X POST http://localhost:8080/admin/login \
  -H "Content-Type: application/json" \
  -d '{"username": "admin", "password": "yourpassword"}'
A successful response returns a JSON object that the Angular AppService writes to sessionStorage under the key bodegax:
{
  "uuid": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "nombre": "Admin User",
  "role": "admin",
  "id": 1,
  "direccion": "Calle Principal 123"
}
FieldTypeDescription
uuidstringUnique session identifier for the authenticated user
nombrestringDisplay name shown in the sidebar and profile header
rolestringEither "admin" or "user" — controls UI visibility
idnumberInternal database ID of the user record
direccionstringRegistered address associated with the user account
After the AppService.logIn() method receives the response, it stores this object in sessionStorage['bodegax'], sets the isLogged$ observable to true, updates role$ to "admin", and navigates to the / (root) route, where CheckLoginGuard permits access and the Sales Dispatch dashboard is displayed.
If you receive a 401 Unauthorized or an "Credenciales invalidas" dialog in the browser, verify that the backend is running, the database is seeded with at least one admin account, and that the username and password match the record in your PostgreSQL bodegax database.

​
What’s Next

With BodegaX running locally, explore the rest of the documentation to understand how each module works and how the frontend and backend communicate.

Architecture

Deep-dive into the three-tier data flow, route guards, and reactive auth state.

Sales Dispatch

Learn how the Despachar Caja workflow moves crates from inventory to client.

Build docs developers (and LLMs) love

Get started for freeTalk to us