Quick Start Guide

Get Sistema de Productos running on your local machine in just a few minutes. This guide walks you through the essential steps from cloning to running the application.

This quickstart assumes you have Node.js (v18 or higher) and PostgreSQL installed. If not, see the Installation Guide for prerequisites.

Step-by-Step Setup

Clone the Repository

Clone the project to your local machine:

git clone <repository-url>
cd proyectico-vue-express

Install Dependencies

Install all required npm packages:

npm install

This will install:

Vue.js and related frontend dependencies
Express and backend packages
PostgreSQL driver (pg)
Authentication libraries (jsonwebtoken, bcrypt)
Development tools (Vite, Nodemon, Concurrently)

Set Up PostgreSQL Database

Create the PostgreSQL database:

# Connect to PostgreSQL (adjust command based on your setup)
psql -U postgres

-- Create the database
CREATE DATABASE ejercicio_productos;

-- Exit psql
\q

Run the database schema script:

psql -U postgres -d ejercicio_productos -f server/config/bd.sql

This will create:

Tables: Categorias, Productos, Usuarios
Views: ProductosView, CategoriasView, UsuariosView
Sample data: 4 categories, 19 products, and 1 admin user
Extensions: pgcrypto for password encryption

View Database Schema

The schema includes three main tables:Categorias Table:

CREATE TABLE Categorias (
  id SERIAL PRIMARY KEY,
  nombre VARCHAR(50) NOT NULL UNIQUE,
  icono VARCHAR(50) NOT NULL,
  color VARCHAR(50) NOT NULL,
  descripcion TEXT,
  creado TIMESTAMP NOT NULL,
  actualizado TIMESTAMP 
);

Productos Table:

CREATE TABLE Productos (
  id SERIAL PRIMARY KEY,
  nombre VARCHAR(100) NOT NULL UNIQUE,
  precio DECIMAL(10, 2) NOT NULL,
  stock INT NOT NULL DEFAULT(0),
  descripcion TEXT,
  creado TIMESTAMP NOT NULL,
  actualizado TIMESTAMP,
  idCategoria INT REFERENCES Categorias(id) NOT NULL
);

Usuarios Table:

CREATE TABLE Usuarios (
  id SERIAL PRIMARY KEY,
  nombre VARCHAR(20) NOT NULL UNIQUE,
  contrasena TEXT NOT NULL,
  correo VARCHAR(50) NOT NULL,
  rol VARCHAR(20) NOT NULL,
  creado TIMESTAMP NOT NULL,
  actualizado TIMESTAMP
);

Configure Environment Variables

Create a .env file in the project root:

touch .env

Add the following configuration (adjust values for your setup):

# Server Configuration
PORT=3000

# PostgreSQL Database
PG_USER=postgres
PG_HOST=localhost
PG_DATABASE=ejercicio_productos
PG_PASSWORD=your_postgres_password
PG_PORT=5432

# JWT Secret (use a strong, random string in production)
JWT_SECRET=your_jwt_secret_key_here

# Email Configuration (optional, for nodemailer)
EMAIL_USER=[email protected]
EMAIL_PASSWORD=your_email_password

Never commit the .env file to version control. It’s already included in .gitignore for safety.

Generate a Secure JWT Secret

You can generate a secure random string for JWT_SECRET using Node.js:

node -e "console.log(require('crypto').randomBytes(64).toString('hex'))"

Copy the output and use it as your JWT_SECRET value.

Start the Development Servers

Run both frontend and backend servers concurrently:

npm run dev

This command uses concurrently to run:

Frontend (Vite dev server): http://localhost:5173
Backend (Express API): http://localhost:3000

You should see output similar to:

[0] 
[0]   VITE v7.1.0  ready in XXX ms
[0] 
[0]   ➜  Local:   http://localhost:5173/
[1] API funcionando en el puerto 3000.
[1] Base de datos conectada.

Access the Application

Open your browser and navigate to:

http://localhost:5173

You can log in with the default administrator account:

Username: admin01
Password: Admin01*

Change the default administrator password immediately after first login, especially in production environments.

Available NPM Scripts

The package.json includes several useful scripts:

{
  "scripts": {
    "dev:frontend": "vite --host",
    "dev:backend": "nodemon server/index.js",
    "dev": "concurrently 'npm:dev:frontend' 'npm:dev:backend'",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Script Descriptions

Script	Command	Description
`dev`	`npm run dev`	Runs both frontend and backend in development mode
`dev:frontend`	`npm run dev:frontend`	Runs only the Vite frontend server
`dev:backend`	`npm run dev:backend`	Runs only the Express backend server with Nodemon
`build`	`npm run build`	Builds the frontend for production
`preview`	`npm run preview`	Preview the production build locally

Verify Installation

Test that everything is working correctly:

1. Check API Health

Visit the API health endpoint:

curl http://localhost:3000/api-productos

Expected response:

API funcionando correctamente.

2. Test Database Connection

The backend console should display:

Base de datos conectada.

3. Verify Frontend Access

Navigate to http://localhost:5173 in your browser. You should see the application’s login page.

API Endpoints Overview

Once running, the following API endpoints are available:

Base URL

http://localhost:3000/api-productos

Available Routes

Categories: /api-productos/categorias
- GET - List all categories
- POST - Create new category
- PUT - Update category
- DELETE - Delete category
Products: /api-productos/productos
- GET - List all products
- POST - Create new product
- PUT - Update product
- DELETE - Delete product
Users: /api-productos/usuarios
- GET - List all users (admin only)
- POST - Create new user
- PUT - Update user
- DELETE - Delete user

Most endpoints require authentication. Include the JWT token in cookies or headers when making requests.

Common Issues

Database Connection Failed

If you see “Database connection failed” or similar errors:

Verify PostgreSQL is running:

# On Linux/Mac
pg_isready

# On Windows
pg_ctl status

Check your .env file has correct database credentials
Ensure the database ejercicio_productos exists
Verify your PostgreSQL user has permissions to access the database

Port Already in Use

If port 3000 or 5173 is already in use:

Change the PORT in .env for the backend
For frontend, Vite will automatically try the next available port

Or, stop the process using the port:

# Find process using port 3000
lsof -i :3000

# Kill the process
kill -9 <PID>

Module Not Found Errors

If you encounter module import errors:

Delete node_modules and package-lock.json:
```
rm -rf node_modules package-lock.json
```
Reinstall dependencies:
```
npm install
```
Verify you’re using Node.js v18 or higher:
```
node --version
```

Next Steps

Now that you have Sistema de Productos running:

Explore the product management features
Create and organize categories
Test the API endpoints using tools like Postman or curl
Review the Installation Guide for production deployment tips
Examine the source code to understand the architecture

For detailed installation instructions, troubleshooting, and production deployment guidance, see the Installation Guide.

Get Started

Core Concepts

Frontend Guide

Guides

Quickstart

Quick Start Guide

Step-by-Step Setup

Available NPM Scripts

Script Descriptions

Verify Installation

1. Check API Health

2. Test Database Connection

3. Verify Frontend Access

API Endpoints Overview

Base URL

Available Routes

Common Issues

Next Steps

Build docs developers (and LLMs) love

Get Started

Core Concepts

Frontend Guide

Guides

​Quick Start Guide

​Step-by-Step Setup

​Available NPM Scripts

​Script Descriptions

​Verify Installation

​1. Check API Health

​2. Test Database Connection

​3. Verify Frontend Access

​API Endpoints Overview

​Base URL

​Available Routes

​Common Issues

​Next Steps

Build docs developers (and LLMs) love

Quick Start Guide

Step-by-Step Setup

Available NPM Scripts

Script Descriptions

Verify Installation

1. Check API Health

2. Test Database Connection

3. Verify Frontend Access

API Endpoints Overview

Base URL

Available Routes

Common Issues

Next Steps