Aplicación web Full-Stack para la gestión de servicios de una barbería, construida con Angular y Spring Boot. Este proyecto fue desarrollado como parte del Laboratorio 5 de Ingeniería de Software III en la Universidad del Cauca.
Barbería JD es una aplicación web SPA (Single Page Application) que simula la plataforma de una tienda de servicios. El proyecto implementa dos vistas principales: una para el cliente (Comprador), donde puede visualizar y filtrar los servicios por categoría, y otra para el Administrador, que cuenta con un CRUD completo para la gestión de estos servicios.
El objetivo principal fue aplicar los conceptos de desarrollo de software moderno, incluyendo:
- Frontend modular y reactivo con Angular.
- Backend robusto y organizado por capas con Spring Boot.
- Arquitectura de software desacoplada utilizando el patrón Facade para la gestión del estado en el frontend.
- Diseño completamente adaptable (Responsive) a diferentes dispositivos.
✅ Gestión de Productos (Rol Administrador):
- Registrar: Crear nuevos servicios a través de un formulario con validaciones robustas.
- Listar: Ver todos los servicios existentes en una tabla con opciones de gestión.
- Actualizar: Modificar los datos de un servicio precargando la información en un formulario.
- Eliminar: Borrar un servicio con un diálogo de confirmación para prevenir acciones accidentales.
✅ Vista de Catálogo (Rol Cliente):
- Ver Productos por Categoría: Navegar y filtrar el catálogo de servicios a través de una barra lateral interactiva.
- Interfaz Dinámica: Las tarjetas de producto presentan un efecto de volteo para mostrar más detalles del servicio.
✅ Arquitectura Frontend Avanzada:
- Uso de Modelos para tipar los datos.
- Uso de DTOs (Data Transfer Objects) para la comunicación con el backend.
- Implementación del Patrón Facade para centralizar la lógica de negocio y la gestión del estado.
- Programación Reactiva con RxJS (
Observable,BehaviorSubject) para un flujo de datos eficiente.
✅ Diseño 100% Adaptable (Responsive Design):
- Dispositivos Grandes (
>=992px): 6 productos por fila. - Dispositivos Medianos (
>=768px): Barra lateral de 4/12 columnas y 4 productos por fila. - Dispositivos Pequeños (
>=576px): Barra lateral de 2/12 columnas y 3 productos por fila, con contenido optimizado. - Dispositivos Muy Pequeños (
<576px): Layout apilado de una sola columna para máxima legibilidad.
| Área | Tecnología | Descripción |
|---|---|---|
| Frontend |  |
Framework principal para construir la SPA. |
 |
Lenguaje de programación principal del frontend. | |
 |
Para la programación reactiva y gestión de flujos de datos asíncronos. | |
 |
Framework CSS para estilos y diseño responsive. | |
| Backend |  |
Framework para la creación de la API REST. |
 |
Lenguaje de programación principal del backend. | |
| Base de Datos |  |
Base de datos en memoria para un desarrollo y pruebas ágiles. |
Para ejecutar este proyecto de forma local, sigue estos pasos:
- Node.js y npm (Descargar)
- Angular CLI (
npm install -g @angular/cli) - Java JDK (Versión 17 o superior)
- Apache Maven
-
Clona el repositorio:
git clone https://github.com/juanvec06/API_barberia.git cd API_barberia -
Ejecuta el Backend (Spring Boot):
# Navega a la carpeta del backend cd api_rest_barberia # Ejecuta la aplicación mvn spring-boot:run
El servidor se iniciará en
http://localhost:5000. -
Ejecuta el Frontend (Angular):
# En una nueva terminal, navega a la carpeta del frontend cd "proyecto angular" # Instala las dependencias npm install # Inicia el servidor de desarrollo ng serve -o
La aplicación se abrirá automáticamente en
http://localhost:4200.