Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/JuanSerna14/Final-lenguaje-Avanzado/llms.txt

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

This guide walks you through cloning the repository, spinning up a PostgreSQL database, launching the Express API, seeding it with sample data, and connecting the React dashboard — giving you a fully functional local environment with 20 sample courts and 20 sample bookings ready to explore.
Prerequisites before you begin:
  • Node.js 18+ and npm (or yarn) installed on your machine.
  • PostgreSQL available locally, or Docker (recommended) to run it in a container via the included docker-compose.yml.
  • A terminal with basic Git access to clone the repository.
1

Clone and navigate

Clone the repository and familiarise yourself with its two top-level directories.
git clone https://github.com/JuanSerna14/Final-lenguaje-Avanzado.git
cd Final-lenguaje-Avanzado
The repo contains two independent projects:
Final-lenguaje-Avanzado/
├── arquimarket/        ← Express + TypeScript backend (port 8000)
└── starter-vite-ts/    ← React + Vite + MUI frontend (port 5173)
Each project has its own package.json, dependencies, and .env file. Steps 2–4 configure the backend; step 5 configures the frontend.
2

Start PostgreSQL

The backend ships with a docker-compose.yml that starts a PostgreSQL 16 container with the correct credentials pre-configured.
cd arquimarket
docker compose up -d
The compose file creates a single postgres service with the following environment:
environment:
  POSTGRES_DB: arquimarket      # DB_NAME
  POSTGRES_USER: arquiuser      # DB_USER
  POSTGRES_PASSWORD: arquipass  # DB_PASSWORD
ports:
  - '5432:5432'
A named volume (pgdata) persists data across container restarts. The container includes a health check that polls pg_isready every 10 seconds.
If you prefer to use a local PostgreSQL installation instead of Docker, make sure a database and user matching the values above exist, or adjust the .env values in the next step accordingly.
3

Set up the backend

Install dependencies, create the environment file, and start the development server.
cd arquimarket
npm install
Create a .env file in the arquimarket/ directory with the following variables:
.env
PORT=8000
DB_HOST=localhost
DB_PORT=5432
DB_NAME=arquimarket
DB_USER=arquiuser
DB_PASSWORD=arquipass
NODE_ENV=development
JWT_SECRET=secret_key_123
JWT_REFRESH_SECRET=refresh_secret_key_456
Then start the server in watch mode:
npm run dev
On first boot, initDatabase() is called automatically — it runs CREATE TABLE IF NOT EXISTS for canchas, reservas, and users. You should see:
✅ Tablas "canchas", "reservas" y "users" verificadas/creadas.
🚀 Servidor corriendo en http://localhost:8000
📝 Documentación disponible en http://localhost:8000/docs
URLWhat you get
http://localhost:8000/healthJSON health check: { "status": "OK", "timestamp": "2025-01-15T10:30:00.000Z" }
http://localhost:8000/docsInteractive Swagger UI for all endpoints
4

Seed sample data

With the server running, open a new terminal tab and run the seed script to populate the database with sample courts and bookings:
cd arquimarket
npm run seed
The seed script (src/db/seed.ts) inserts:
  • 20 sample canchas — sport courts with realistic names, descriptions, and hourly prices.
  • 20 sample reservas — bookings distributed across those courts with varied dates, time slots, and statuses (pendiente, confirmada, cancelada).
After seeding, GET http://localhost:8000/api/canchas (with a valid token) returns the full list.
5

Set up the frontend

In a new terminal, navigate to the frontend directory, install its dependencies, and configure the API base URL.
cd starter-vite-ts
npm install
Create a .env file in the starter-vite-ts/ directory:
.env
VITE_HOST_API=http://localhost:8000
VITE_ASSETS_API=
VITE_HOST_API is picked up by the Axios instance as the base URL for every API call. VITE_ASSETS_API can be left blank for local development.Start the Vite dev server:
npm run dev
The dashboard is now live at http://localhost:5173. Navigate to /auth/jwt/login to sign in (or register a new account at /auth/jwt/register). After a successful login, the access token is stored in sessionStorage under the key accessToken and injected automatically into every subsequent Axios request as Authorization: Bearer <token>.
Testing protected endpoints directly from DevTools: After logging in from the frontend, you can also call protected endpoints using tools like Postman or the Swagger UI at http://localhost:8000/docs. To reuse your active session token from the browser console, run:
// Retrieve the token your frontend already stored
sessionStorage.getItem('accessToken');

// Or set one manually (e.g. copied from a login response)
sessionStorage.setItem('accessToken', 'YOUR_JWT_TOKEN_HERE');
The Axios interceptor will then include the header Authorization: Bearer YOUR_JWT_TOKEN_HERE on every request. If you receive a 401 Unauthorized, check that the backend is reachable at the URL in VITE_HOST_API and that the token has not expired (access tokens are valid for 15 minutes).

Backend Setup (detailed)

Full environment variable reference, database connection options, and production build instructions.

Frontend Setup (detailed)

Vite config, MUI theme customisation, and routing overview for the dashboard.

Authentication API

Register, login, token refresh, logout, and /me endpoint reference with request/response examples.

Docker Deployment

Containerise both services and run the full stack with a single docker compose up.

Build docs developers (and LLMs) love

Get started for freeTalk to us