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
- React 19
- TypeScript
- Vite
- TanStack Query
- TanStack Router
- TanStack Table
- Tailwind CSS
- Headless UI
- Yup
- Vitest
- Storybook
- 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).