Esencia Studio

Volver al portfolio
TFG · DAM · Full Stack + IA

Velaris

Plataforma de viajes inteligente con asistente de IA conversacional. Arquitectura full stack completa con React 19, Spring Boot, PostgreSQL y Docker — autenticación JWT, panel de administración, PWA instalable y más de 15 rutas funcionales.

3 Servicios Docker
15+ Rutas funcionales
LLaMA 3.3 70B · Groq API
PWA Instalable como app
Página de inicio de Velaris, plataforma de viajes inteligente con asistente de IA Vera

Más que filtrar fechas.
Entender al viajero.

Las plataformas de viajes existentes tratan al usuario como un buscador: introduce fechas, precio y destino, y elige entre una lista. Velaris parte de una premisa diferente — ¿y si la plataforma te entendiera a ti?

El reto era construir un sistema completo de extremo a extremo: desde el modelo de datos hasta la interfaz, pasando por la seguridad, la IA, los emails transaccionales y el despliegue en producción. Todo desarrollado en solitario como Trabajo de Fin de Grado.

"Una plataforma que no filtra viajes. Recomienda experiencias."

Página de inicio de Velaris mostrando destinos destacados y el buscador de viajes inteligente

Vera, la IA que
viaja contigo

Vera no es un chatbot de respuestas predefinidas. Es un asistente conversacional real impulsado por LLaMA 3.3 70B a través de la API de Groq, con historial persistente por usuario, contexto de toda la plataforma y personalidad propia.

Vera · Asistente IA

LLaMA 3.3 70B

Modelo de lenguaje de última generación vía Groq API. Historial de 6 mensajes anteriores para mantener el contexto de la conversación. Cada viaje del catálogo está disponible para Vera — conoce los destinos, precios y disponibilidad en tiempo real.

LLaMA 3.3 70B Versatile Max 1024 tokens Historial persistente Contexto 6 mensajes Fallback amigable
V
¡Hola! Soy Vera, tu asistente de viajes. ¿A dónde te gustaría escaparte? Cuéntame qué tipo de experiencia buscas.
Quiero algo tranquilo, con playa, menos de 1000€ y en septiembre.
V
Perfecto para septiembre. Te recomiendo Menorca o el Algarve — temporada baja, precios ajustados y playas de ensueño. ¿Prefieres vuelo incluido o solo hotel?

Monorepo de dos capas.
Tres servicios Docker.

Arquitectura de producción real: frontend, backend y base de datos orquestados con Docker Compose, comunicados en red bridge interna, con healthcheck antes de arrancar el backend y proxy Nginx entre capas.

Frontend

React 19 + Vite

Puerto 3000 · Nginx

React Router DOM v7 Axios + interceptores JWT Leaflet · mapas interactivos Recharts · gráficas admin PWA · Service Worker canvas-confetti al reservar
Backend

Spring Boot 3.2

Puerto 8080 · Java

Spring Security + JWT Spring Data JPA + Hibernate Flyway · migraciones V1→V10 Spring Cache · catálogo Spring Mail · Thymeleaf Swagger UI · /swagger-ui.html
Base de datos

PostgreSQL 16

Puerto 5436 · Alpine

5 tablas relacionales pg_trgm · búsqueda trigram Índices en price, date, status Volumen persistente Docker Healthcheck pre-backend Red bridge velaris-net

Cada tecnología,
elegida con criterio

No un tutorial con scaffolding. Cada decisión técnica tiene una razón: JWT sobre cookies por arquitectura stateless, Flyway para migraciones versionadas, Groq por latencia en inferencia, Docker para reproducibilidad total del entorno.

React 19 + Vite 8

Componentes funcionales, hooks modernos y routing con React Router v7. Build optimizado con Vite.

Spring Boot 3.2

API REST completa con Spring MVC, Spring Data JPA, Spring Security y documentación OpenAPI/Swagger.

PostgreSQL 16

Base de datos relacional con búsqueda trigram (pg_trgm), índices optimizados y migraciones Flyway V1→V10.

Docker Compose

3 servicios orquestados: frontend (Nginx), backend (Java) y PostgreSQL en red bridge interna velaris-net.

LLaMA 3.3 · Groq

Modelo 70B vía API OpenAI-compatible de Groq. Historial persistente en BD, contexto del catálogo y respuesta en milisegundos.

Leaflet + Recharts

Mapas interactivos de destinos con React Leaflet y gráficas del panel de administración con Recharts.

Producción desde
el primer día

La seguridad no fue un añadido al final. Está integrada en la arquitectura desde el diseño: sesión stateless, contraseñas hasheadas, rate limiting por IP y endpoints protegidos por rol.

JWT · 24h de expiración

Tokens firmados con secreto configurable por variable de entorno. Sesión 100% stateless, sin cookies de sesión. Interceptor Axios para renovación automática.

BCrypt · contraseñas

Hashing con BCrypt en todas las contraseñas. Nunca almacenadas en texto plano. Validación en backend, nunca en frontend.

Rate limiting por IP

LoginAttemptService bloquea por IP tras demasiados intentos fallidos. Mensaje personalizado con los segundos restantes hasta el desbloqueo.

Control de roles

Roles USER y ADMIN. /api/admin/** exclusivo para administradores. Endpoints públicos declarados explícitamente; todo lo demás requiere autenticación.

Tres niveles de
experiencia de usuario

Velaris distingue tres perfiles con acceso y capacidades diferentes. Cada capa está protegida, documentada y probada — desde el visitante anónimo hasta el administrador con acceso al dashboard completo.

Sin cuenta

Acceso público

Explorar viajes, vuelos y escapadas Ver detalle de cualquier producto Chatear con Vera sin autenticación Ver reseñas de otros usuarios Registro e inicio de sesión

Usuario registrado

Acceso autenticado

Reservar con checkout y confetti Gestionar y cancelar reservas Favoritos — guardar y eliminar Escribir reseñas con sentimiento Recomendaciones personalizadas IA Historial de conversación con Vera Editar perfil y cambiar contraseña

Administrador

Panel completo

CRUD completo de viajes y vuelos Dashboard con KPIs y gráficas Gestión de usuarios y roles Estadísticas de reservas Geocodificación de destinos Endpoint exclusivo /api/admin/**

Dashboard con
datos reales

El panel de admin no es una pantalla estática. Tiene gráficas en tiempo real con Recharts, gestión completa del catálogo, control de usuarios y geocodificación de destinos para el mapa interactivo.

Cada endpoint de administración está protegido por rol ADMIN a nivel de Spring Security — no solo en el frontend, también en el backend.

Panel de administración de Velaris con dashboard de KPIs, gráficas de reservas y gestión de viajes

Tres plantillas.
HTML con Thymeleaf.

Velaris envía emails reales via SMTP Gmail con STARTTLS. Cada acción relevante del usuario dispara una plantilla HTML diseñada con Thymeleaf — no texto plano, emails con estilo.

Instalable como
app nativa

Velaris no es solo una web. Es una PWA completa con Service Worker, manifest.json y shortcuts directos desde el icono de la app — sin pasar por el navegador.

PWA · Progressive Web App

Velaris en tu
pantalla de inicio

Manifest con nombre completo, iconos 192×512px, theme color #1C4E78, orientación portrait y categorías travel + lifestyle. Service Worker para funcionamiento offline parcial.

Destinos
Vuelos
Escapadas
Vera IA
React 19 Vite 8 Spring Boot 3.2 Java PostgreSQL 16 Docker Compose JWT + BCrypt LLaMA 3.3 70B Groq API Flyway Leaflet Recharts Thymeleaf PWA Nginx Swagger UI 2026

Agencia de lujo.
Estética premium.

Velaris no tiene el aspecto de un proyecto de estudiante. Tiene el aspecto de una agencia de viajes premium — fondos con fotografías a pantalla completa, overlays degradados oscuros, tipografía editorial y animaciones sutiles.

Playfair Display para títulos de impacto + Inter para UI limpia y legible. Grids responsivos con clamp() en tipografía, badges pill y mapa interactivo con Leaflet.

Marino #1C4E78
Paper #FAFAF8
Ink #18141F
Detalle del diseño visual de Velaris mostrando la estética premium con fotografías de destinos y tipografía editorial

Qué ve cada perfil

Empresa o cliente

Una plataforma funcional, bonita y completa que podría estar en producción hoy. No un prototipo — un producto.

Empresa tech o startup

Arquitectura full stack real: monorepo, Docker, JWT, migraciones versionadas, IA integrada y API REST documentada con Swagger.

Director creativo

Criterio tipográfico, paleta coherente, diseño responsivo con clamp(), animaciones con propósito y experiencia de usuario pensada al detalle.

Plataforma en producción

Pruébala
en vivo

Velaris desplegada en Vercel — navega, busca destinos, habla con Vera y explora el checkout completo.

velaris-app.vercel.app
Abrir en nueva pestaña