reto-fullstack-buses

Descripción

API de buses para el reto técnico Fullstack. Este proyecto incluye un backend desarrollado en Java con Spring Boot y una base de datos PostgreSQL.

Estructura del proyecto

backend/
  ├── src/
  │   ├── main/
  │   │   ├── java/com/civa/backend/
  │   │   └── resources/
  │   └── test/
  │       └── java/com/civa/backend/
  ├── pom.xml
  └── ...

Backend

Tecnologías

• Java 17
• Spring Boot 3
• Spring Data JPA
• Spring Security
• PostgreSQL
• Maven

Configuración

La configuración principal se encuentra en src/main/resources/application.yml.
Ejemplo de configuración local en src/main/resources/application-local.yml.

Ejecución

1. Instala PostgreSQL y crea la base de datos buses_db.
2. Configura las credenciales en el archivo de configuración.
3. Añade datos de prueba:

-- Insertar marcas
INSERT INTO marca (nombre) VALUES
('Volvo'),
('Scania'),
('Mercedes'),
('Fiat'),
('Hyundai');

-- Insertar buses
INSERT INTO bus (numero_bus, placa, fecha_creacion, caracteristicas, marca_id, activo) VALUES
('BUS-101', 'ABC-123', '2025-10-02 10:15:00', '52 asientos, aire acondicionado, WiFi, baño', 1, true),
('BUS-102', 'DEF-456', '2025-10-02 10:20:00', '40 asientos, climatizado, USB en cada asiento', 2, true),
('BUS-103', 'GHI-789', '2025-10-02 10:25:00', '60 asientos, doble piso, baño, TV', 3, false),
('BUS-104', 'JKL-321', '2025-10-02 10:30:00', '48 asientos, WiFi, cargadores, baño', 4, true),
('BUS-105', 'MNO-654', '2025-10-02 10:35:00', '55 asientos, climatizado, baño, GPS', 5, false);

4. Ejecuta el backend con Maven:

cd backend
./mvnw spring-boot:run

Endpoints principales

• GET /bus: Obtiene una página de buses (paginado).
• GET /bus/{id}: Obtiene un bus por su identificador.

Seguridad

El backend utiliza autenticación básica. Las credenciales por defecto se configuran en el archivo de propiedades:

• Usuario: admin
• Contraseña: admin123

Pruebas

Las pruebas unitarias están en src/test/java/com/civa/backend/.

---

Frontend

Tecnologías

• React 18
• TypeScript
• Lucide React (iconos)
• React Router DOM

Estructura del proyecto

frontend/
  ├── public/
  ├── src/
  │   ├── components/
  │   ├── hooks/
  │   ├── services/
  │   ├── styles/
  │   ├── types/
  │   ├── utils/
  │   └── App.tsx
  ├── package.json
  └── ...

Configuración

1. Navega al directorio del frontend:

cd frontend

2. Instala las dependencias:

npm install

3. Configura la URL del backend en el archivo de configuración (si es necesario).

Ejecución

Para ejecutar el frontend en modo desarrollo:

cd frontend
npm run dev

El frontend estará disponible en http://localhost:3000.

Funcionalidades

• Lista de buses: Visualización paginada de todos los buses con filtros por estado (activo/inactivo).
• Detalles del bus: Página de detalles que muestra toda la información de un bus específico.
• Interfaz responsive: Diseño adaptable para diferentes dispositivos.

Vista previa

A continuación se muestran capturas de pantalla de la interfaz:

Listado paginado de buses con filtros.

Vista de detalles de un bus específico.

Autenticación

El frontend se conecta al backend usando autenticación básica. Las credenciales se configuran para conectarse con:

• Usuario: admin
• Contraseña: admin123

Ejecución completa del proyecto

Para ejecutar el proyecto completo (backend + frontend):

1. Ejecutar el backend:

cd backend
./mvnw spring-boot:run

2. Ejecutar el frontend (en otra terminal):

cd frontend
npm start

3. Acceder a la aplicación:
   • Backend API: http://localhost:8080
   • Frontend: http://localhost:3000

Verificación

Para verificar que todo funciona correctamente:

1. El backend debe estar corriendo en el puerto 8080
2. El frontend debe estar corriendo en el puerto 3000
3. La base de datos PostgreSQL debe estar activa con los datos de prueba