Quickstart

Trippins is a full-stack hotel booking platform built with Spring Boot and Angular. This guide will help you set up and run the application on your local machine.

Prerequisites

Before you begin, ensure you have the following installed:

Java Development Kit

JDK 21 is required for the Spring Boot backend

MySQL Database

MySQL 8.0.33 for data persistence

Node.js & npm

For building and running the Angular frontend

Docker

Optional but recommended for easy database setup

Maven is used for backend dependency management and will be automatically handled by the Spring Boot Maven wrapper.

Clone the Repository

Start by cloning the Trippins repository:

git clone https://github.com/CodeURJC-DAW-2024-25/webapp09.git
cd webapp09/TrippinsApp

Database Setup

You have two options for setting up the MySQL database:

Docker (Recommended)
Local MySQL

The easiest way to set up MySQL is using Docker:

docker run --rm \
  -e MYSQL_ROOT_PASSWORD=1234 \
  -e MYSQL_DATABASE=Trippins \
  -p 3307:3306 \
  -d mysql:8.0.33

This command:

Creates a MySQL container with root password 1234
Creates a database named Trippins
Maps port 3307 on your host to port 3306 in the container
Uses MySQL version 8.0.33

If you have MySQL installed locally:

Start your MySQL service
Create the Trippins database:

CREATE DATABASE Trippins;

Update backend/src/main/resources/application.properties:

spring.datasource.url=jdbc:mysql://localhost:3306/Trippins
spring.datasource.username=root
spring.datasource.password=your_password

Backend Setup

The backend is built with Spring Boot and provides a RESTful API with JWT authentication.

Navigate to backend directory

cd backend

Install dependencies and build

Using Maven wrapper (no Maven installation required):

./mvnw clean install

On Windows, use mvnw.cmd instead of ./mvnw

Run the application

./mvnw spring-boot:run

The backend will start on HTTPS port 8443. You can access:

API endpoint: https://localhost:8443
API documentation: https://localhost:8443/swagger-ui.html

The application uses a self-signed SSL certificate. Your browser will show a security warning - this is expected for local development. Click “Advanced” and proceed to localhost.

Verify Backend

Once running, the backend will automatically:

Create database tables based on JPA entities
Initialize sample hotel data (15+ hotels)
Create default tags (Beach, City, River)
Set up JWT authentication

Test the API is working:

curl -k https://localhost:8443/v1/api/houses

Frontend Setup

The frontend is an Angular 17 single-page application with Bootstrap 5 styling.

Navigate to frontend directory

Open a new terminal window:

cd TrippinsApp/frontend

Install dependencies

npm install

This installs all required packages including:

Angular 17
Bootstrap 5.3.5
Font Awesome icons
JWT authentication library
SweetAlert2 for notifications

Start the development server

npm start

Or explicitly:

ng serve

The Angular development server will start on http://localhost:4200

Access the Application

Frontend

Open your browser to http://localhost:4200

API Docs

View API documentation at https://localhost:8443/swagger-ui.html

Test Users

The application initializes with sample data. You can create new users or use the admin panel to manage reservations.

Register a New User

Navigate to http://localhost:4200
Click “Register” or “Crear cuenta”
Fill in the registration form:
- DNI (Spanish ID): 9 characters
- Name: Your username (unique)
- Phone number: 9 digits
- Email: Must be unique
- Password: Your password

Admin Access

To test admin features, you’ll need to manually set a user’s admin field to true in the database, or register and modify via SQL:

UPDATE User SET is_admin = true WHERE email = '[email protected]';

Admin users can:

Approve or reject housing requests
View and manage all reservations
Access the admin panel at /admin

Docker Compose (Full Stack)

For production-like deployment, use Docker Compose:

Navigate to docker directory

cd TrippinsApp/docker

Build and start all services

docker-compose up

This starts:

MySQL database on port 3307
Spring Boot backend with Angular frontend on HTTPS port 443

Access the application

Open your browser to https://localhost

The Docker Compose setup includes both frontend and backend in a single container, exposed on port 443 for HTTPS access.

Next Steps

Architecture

Learn about the system architecture and how components interact

API Reference

Explore the complete REST API documentation

Authentication

Understand JWT authentication and authorization

Deployment

Deploy Trippins to production

Troubleshooting

Port Already in Use

If port 8443 or 4200 is already in use:

# Find process using port 8443
lsof -i :8443

# Kill the process
kill -9 <PID>

Database Connection Failed

Ensure MySQL is running and accessible:

# Check if Docker container is running
docker ps

# Check MySQL logs
docker logs <container_id>

Angular Build Errors

Clear npm cache and reinstall:

rm -rf node_modules package-lock.json
npm install

SSL Certificate Warnings

The application uses a self-signed certificate (keystore.jks). For local development, you can safely ignore browser warnings. For production, replace with a valid SSL certificate.

Getting Started

User Guides

Admin Features

Frontend

Prerequisites

Java Development Kit

MySQL Database

Node.js & npm

Docker

Clone the Repository

Database Setup

Backend Setup

Verify Backend

Frontend Setup

Access the Application

Frontend

API Docs

Test Users

Register a New User

Admin Access

Docker Compose (Full Stack)

Next Steps

Architecture

API Reference

Authentication

Deployment

Troubleshooting

Port Already in Use

Database Connection Failed

Angular Build Errors

SSL Certificate Warnings

Build docs developers (and LLMs) love

Getting Started

User Guides

Admin Features

Frontend

​Prerequisites

Java Development Kit

MySQL Database

Node.js & npm

Docker

​Clone the Repository

​Database Setup

​Backend Setup

​Verify Backend

​Frontend Setup

​Access the Application

Frontend

API Docs

​Test Users

​Register a New User

​Admin Access

​Docker Compose (Full Stack)

​Next Steps

Architecture

API Reference

Authentication

Deployment

​Troubleshooting

​Port Already in Use

​Database Connection Failed

​Angular Build Errors

​SSL Certificate Warnings

Build docs developers (and LLMs) love

Prerequisites

Clone the Repository

Database Setup

Backend Setup

Verify Backend

Frontend Setup

Access the Application

Test Users

Register a New User

Admin Access

Docker Compose (Full Stack)

Next Steps

Troubleshooting

Port Already in Use

Database Connection Failed

Angular Build Errors

SSL Certificate Warnings