Inventario de Vehículos – Prueba técnica

Proyecto full stack para gestionar un inventario de vehículos de una flota, con autenticación y CRUD completo.fileciteturn3file0

1. Tecnologías principales

• Backend: Node.js, Express, MS SQL Server, JWT
• Frontend: React, Vite, React Router, Axios
• Base de datos: Microsoft SQL Server
• DevOps: Azure DevOps (CI/CD), Azure App Service, Azure SQL Database

---

2. Estructura del proyecto

backend/
  src/
    server.js
    app.js
    config/
      db.js
    utils/
      jwt.js
    middleware/
      auth.middleware.js
      error.middleware.js
    repositories/
      user.repository.js
      vehicle.repository.js
    services/
      auth.service.js
      vehicle.service.js
    controllers/
      auth.controller.js
      vehicle.controller.js
    routes/
      index.js
      auth.routes.js
      vehicle.routes.js
  sql/
    schema.sql
    seed.sql
  package.json
  .env.example

frontend/
  src/
    main.jsx
    App.jsx
    api/
      axiosClient.js
      authApi.js
      vehicleApi.js
    auth/
      AuthContext.jsx
      ProtectedRoute.jsx
    components/
      layout/Navbar.jsx
      vehicles/VehicleForm.jsx
      vehicles/VehicleTable.jsx
    pages/
      LoginPage.jsx
      VehicleListPage.jsx
      VehicleCreatePage.jsx
      VehicleEditPage.jsx
      VehicleDetailPage.jsx
  package.json
  vite.config.js
  index.html

azure-pipelines.yml
README.md
.gitignore

---

3. Configuración de base de datos (SQL Server)

1. Abrir SQL Server Management Studio (SSMS).

2. Ejecutar el script backend/sql/schema.sql para crear:

   • Base de datos VehiclesDB
   • Tablas Users y Vehicles

3. Ejecutar backend/sql/seed.sql para insertar el usuario inicial:

   • Usuario: admin
   • Contraseña: admin123 (almacenada como hash con bcrypt)

---

4. Backend – Instalación y ejecución

4.1 Variables de entorno

Crear un archivo .env en la carpeta backend basado en .env.example, por ejemplo:

PORT=4000
DB_HOST=localhost
DB_USER=sa
DB_PASS=StrongPass_2025!
DB_NAME=VehiclesDB
JWT_SECRET=ProdKey_InvVehiculos_2025_XYZ

4.2 Instalación y arranque

cd backend
npm install
npm run dev

La API quedará disponible en:

http://localhost:4000/api

4.3 Endpoints principales

• POST /api/auth/login

  • Body: { "username": "admin", "password": "admin123" }
  • Respuesta: token JWT + datos básicos del usuario

• GET /api/vehicles

• GET /api/vehicles/:id

• POST /api/vehicles

• PUT /api/vehicles/:id

• DELETE /api/vehicles/:id

Todas las rutas de vehículos requieren encabezado:

Authorization: Bearer <token>

---

5. Frontend – Instalación y ejecución

cd frontend
npm install
npm run dev

La aplicación se levanta por defecto en:

http://localhost:5173

5.1 Flujo funcional

1. Iniciar sesión con:
   • Usuario: admin
   • Contraseña: admin123
2. Ver listado de vehículos.
3. Crear, editar, consultar y eliminar vehículos.
4. Cerrar sesión desde la barra de navegación.

---

6. Configuración de Axios y llamadas a la API

El cliente Axios se encuentra en:

frontend/src/api/axiosClient.js

Por defecto:

baseURL: "http://localhost:4000/api";

Si el backend se despliega en Azure App Service, se debe actualizar esta baseURL para apuntar a la URL pública de la API.

---

7. Ejecución completa en entorno local

1. Levantar SQL Server y ejecutar schema.sql + seed.sql.

2. Configurar .env en backend.

3. Ejecutar backend:

   cd backend
   npm install
   npm run dev

4. Ejecutar frontend:

   cd frontend
   npm install
   npm run dev

5. Navegar a http://localhost:5173 e iniciar sesión con admin / admin123.

---

8. DevOps – CI/CD y despliegue en Azure

Esta sección describe cómo implementar un pipeline de CI/CD en Azure DevOps y desplegar la solución en Azure App Service y Azure SQL Database, tal como se solicita en el examen.fileciteturn3file0

8.1 Archivo de pipeline (azure-pipelines.yml)

En la raíz del repositorio se incluye un archivo azure-pipelines.yml con una configuración base de integración continua que:

• Ejecuta npm install del backend.
• Ejecuta npm install del frontend.
• Construye el frontend con npm run build.
• Publica los artefactos del frontend (carpeta dist).

Flujo general del pipeline:

1. Disparador en la rama main.
2. Job de build para backend (validar que instala correctamente).
3. Job de build para frontend (validar que instala y compila).
4. Publicación de artefactos de frontend para despliegue.

8.2 Configuración en Azure DevOps

Pasos recomendados:

1. Crear un proyecto en Azure DevOps.
2. Conectar el repositorio donde está este código (GitHub o Azure Repos).
3. En Pipelines → New pipeline, seleccionar:
   • Fuente: repositorio con este proyecto.
   • Opción: “Existing Azure Pipelines YAML file”.
   • Archivo: /azure-pipelines.yml.
4. Guardar y ejecutar el pipeline para validar que el build de backend y frontend se completa correctamente.

8.3 Despliegue del backend en Azure App Service

1. Crear un recurso Azure SQL Database.

   • Conectarse desde SSMS.
   • Ejecutar los scripts backend/sql/schema.sql y backend/sql/seed.sql.

2. Crear un recurso Azure App Service con runtime de Node.js (por ejemplo, Node 18 LTS).

3. Configurar en el App Service las variables de entorno de producción:

   • DB_HOST (servidor o cadena de conexión de Azure SQL)
   • DB_USER
   • DB_PASS
   • DB_NAME (por ejemplo, VehiclesDB)
   • JWT_SECRET
   • NODE_ENV=production

4. Agregar al pipeline una tarea de despliegue de App Service (por ejemplo, AzureWebApp@1) apuntando al código del backend.

5. Una vez desplegado, la API quedará expuesta en una URL del tipo:

   https://<nombre-app-service>.azurewebsites.net/api
   

8.4 Despliegue del frontend

Opciones:

Azure Static Web Apps

1. Crear un recurso Azure Static Web App.
2. Conectar el mismo repositorio.
3. Configurar:
   • Comando de build: npm run build
   • Carpeta de salida: dist
4. Actualizar frontend/src/api/axiosClient.js para apuntar a la URL del backend en Azure App Service.

Azure App Service (contenido estático)

1. Utilizar el artefacto del pipeline con la carpeta frontend/dist.
2. Crear un App Service configurado para servir contenido estático.
3. Publicar el contenido de dist en el App Service.
4. Asegurarse de que axiosClient.js usa la URL pública del backend en Azure.

---

9. Entrega del código fuente

Para cumplir con el requisito de:

Código Fuente: Subir todo el código a un repositorio público o privado y proporcionar acceso.fileciteturn3file0

Pasos sugeridos:

git init
git add .
git commit -m "Prueba técnica - Inventario de vehículos"
git branch -M main
git remote add origin <URL_DEL_REPOSITORIO>
git push -u origin main

Posteriormente, compartir la URL del repositorio al evaluador.

---

10. Credenciales de prueba

• Usuario: admin
• Contraseña: admin123

Estas credenciales deben utilizarse únicamente en entornos de prueba o desarrollo.