← Volver a los casos
App interna · Web · Frontend

Gestión centralizada de presupuestos y proyectos

Un catálogo central de partidas, actividades y recursos que todos los proyectos reutilizan, con un flujo de aprobación para cambiarlo.

Período
2025–2026 · ~8 meses
Equipo
Mixto front/back
Mi rol
Frontend developer
Sector
Construcción e ingeniería

Proyectos bajo acuerdo de confidencialidad. Los nombres de clientes, el código y las capturas no se muestran; los títulos son descriptivos.

Contexto

Aplicación web interna que centraliza en un repositorio único los datos maestros con los que una empresa de construcción e ingeniería arma los presupuestos de sus proyectos: partidas, actividades y recursos, con precios de venta y de coste.

La usan las áreas técnicas y de presupuestos de la empresa cliente.

Problema

Los datos de presupuestos estaban dispersos en archivos de cada proyecto, en formatos estándar del sector. La plataforma los importa a un catálogo central que todos los proyectos reutilizan, y controla quién puede modificarlo mediante un flujo de solicitud y aprobación de cambios.

El mayor reto: permisos granulares por funcionalidad y por proyecto, y el flujo de aprobación sobre datos compartidos.

Qué hice

  • Módulo completo de permisos de edición: solicitudes sobre partidas, actividades y recursos; bandeja de pendientes y rechazadas; aprobar, rechazar, revocar y restaurar permisos; historial.
  • Control de acceso en la interfaz según los permisos del usuario, con rutas y acciones protegidas.
  • Tablas con ordenamiento, filtros y paginación conectadas a la API.
  • Formularios con validaciones y modales de confirmación ante cambios sin guardar.
  • Refactor de los hooks de datos agrupándolos por entidad, y mejoras en el cliente HTTP para la subida de archivos.

Decisiones

  • Propuse y apliqué la reorganización de los hooks de datos por entidad, para que el proyecto fuera más fácil de mantener.

Desafíos resueltos

  • Mantener la caché del frontend sincronizada después de aprobar o rechazar solicitudes, invalidando las queries correctas.
  • Reflejar con precisión en la interfaz los permisos de cada usuario.

Arquitectura

SPA desacoplada con rutas tipadas basadas en archivos, una capa de acceso a la API organizada por entidad, hooks de datos con TanStack Query y una librería de componentes documentada en Storybook. Login con JWT.

Stack

Frontend
  • React 19
  • TypeScript
  • Vite
  • TanStack Query
  • TanStack Router
  • TanStack Table
  • Tailwind CSS
  • Headless UI
  • Yup
Testing
  • Vitest
  • Storybook
Herramientas
  • Git
  • Docker
  • Nginx
  • ESLint
  • Prettier

Tests

El proyecto tenía Vitest y Storybook configurados para tests de componentes; mi aporte en tests fue puntual.

Aprendizajes

React moderno con el ecosistema TanStack (estado del servidor, caché, routing tipado), diseño de interfaces basadas en permisos y desarrollo asistido por IA (AI-DLC).