Configuración de dependencias - AntoniaFuenzalida/GPS-Pasivo GitHub Wiki

⚙️ Configuración y Dependencias

📂 Archivos Relevantes

Este documento describe los archivos de configuración, dependencias y el sistema de construcción del sistema MascotasID.
Explica cómo está estructurado el proyecto, qué librerías externas utiliza y cómo se configura el proceso de compilación.

Para más información sobre la arquitectura del sistema, revisa System Architecture.
Para detalles sobre la estructura del frontend, revisa Frontend Application.
Para configuración del backend, revisa Backend API.

🎯 Propósito y Alcance

Este documento cubre los aspectos técnicos de configuración del sistema MascotasID, incluyendo:

  • Dependencias y versiones
  • Configuración del sistema de build
  • Entorno de desarrollo
  • Configuración de estilos
  • Pruebas automáticas
  • Gestión de recursos

🗂️ Estructura General del Proyecto

El sistema MascotasID está dividido en aplicaciones frontend y backend separadas, cada una con sus propias configuraciones.

🔧 Configuración del Proyecto

  • Frontend Configuration
  • Shared Configuration
  • Environment Files
  • API Endpoints
  • Database Connections
  • External Services
  • Backend Configuration

📄 Archivos

  • frontend/package.json
  • frontend/package-lock.json
  • frontend/src/index.css
  • tailwind.config.js
  • postcss.config.js

📦 Dependencias del Frontend

🔹 Frameworks Principales

Paquete Versión Propósito
react ^19.1.0 Framework principal React
react-dom ^19.1.0 Renderizado en el DOM
react-router-dom ^7.5.3 Enrutamiento del lado cliente
react-scripts ^5.0.1 Herramientas de build

🔹 Comunicación y Autenticación

Paquete Versión Propósito
axios ^1.9.0 Cliente HTTP para la API
jwt-decode ^4.0.0 Decodificación de tokens JWT

🔹 Mapas y Geolocalización

Paquete Versión Propósito
leaflet ^1.9.4 Librería de mapas principal
react-leaflet ^5.0.0 Componentes de React para Leaflet
mapbox-gl ^3.12.0 MapBox
maplibre-gl ^2.4.0 Alternativa libre a MapBox
react-map-gl ^8.0.4 Wrapper de React para MapBox GL
@maplibre/maplibre-gl-style-spec ^23.3.0 Estilos de MapLibre

🔹 Códigos QR

Paquete Versión Propósito
qrcode.react ^4.2.0 Generador QR en React
react-qr-code ^2.0.15 Alternativa para códigos QR

🔹 Tiempo Real

Paquete Versión Propósito
mqtt ^5.12.1 Cliente MQTT para actualizaciones

🔧 Configuración de Build y Desarrollo

Usa react-scripts de Create React App, que incluye Webpack, Babel y ESLint preconfigurados.

🛠️ Scripts

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

🌐 Soporte de Navegador

Producción:

  • Navegadores > 0.2% de uso
  • Excluye navegadores muertos y Opera Mini

Desarrollo:

  • Última versión de Chrome, Firefox, Safari

📏 ESLint

{
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }
}

🎨 Estilos y Recursos

Tailwind CSS

  • tailwindcss ^3.4.17
  • postcss ^8.5.3
  • autoprefixer ^10.4.21
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "leaflet/dist/leaflet.css";

body {
  font-family: 'Inter', sans-serif;
}

🧪 Pruebas Automáticas

Se utiliza React Testing Library y Jest:

Paquete Versión Propósito
@testing-library/react ^16.3.0 Pruebas de componentes
@testing-library/jest-dom ^6.6.3 Matchers de Jest para el DOM
@testing-library/dom ^10.4.0 Herramientas de pruebas DOM
@testing-library/user-event ^13.5.0 Simulación de eventos de usuario

🧩 Librerías Especializadas

📷 Imágenes

  • html-to-image ^1.11.13 – Conversión DOM a imagen (para QR descargable)

📊 Web Vitals

  • web-vitals ^2.1.4 – Métricas de rendimiento

🛠️ Utilidades

  • tablero2.0 – Referencia local para desarrollo