Overview
Brigada.hr is a comprehensive real-time tracking system designed for monitoring groups and individuals across large venues like museums, shopping malls, and public spaces. Built as a Progressive Web App and optimized specifically for tablet use, it provides facility managers with complete visibility into visitor movement and behavior.
Architecture
Frontend - Modern React Stack
The frontend leverages a modern, type-safe stack built with React and Vite. Combined with shadcn/ui components and Tailwind CSS, the interface is both performant and visually consistent. Zod handles runtime validation ensuring data integrity throughout the application.
TanStack Query powers all data fetching with carefully optimized caching strategies-critical when dealing with the massive amounts of real-time tracking data this system processes.
Real-time tracking dashboard displaying visitor movements across the facility.
Backend - Vanilla PHP
The backend runs on vanilla PHP, and it does a marvelous job. No heavy frameworks, no unnecessary abstractions-just clean, efficient PHP handling the real-time data pipeline. Sometimes the simplest solution is the most reliable one.
Key Features
Real-time Tracking with Canvas
All floor plans and tracking visualizations are rendered directly to HTML Canvas, giving users a “Monopoly board” experience when monitoring visitor movements. This approach enables smooth, performant rendering even with hundreds of tracked entities updating in real-time.
Interactive floor plan rendered on canvas with real-time position tracking.
Progressive Web App
One of the biggest challenges was achieving full PWA compliance. The application needed to work offline, cache floor plans and essential data, and provide a native-like experience on tablets. Every asset, every floor plan, every critical piece of data is carefully managed for offline availability.
Analytics Dashboard
The comprehensive dashboard completely eliminates the need for manual data compilation. Facility managers get:
- Real-time visitor counts and flow patterns
- Historical data with customizable date ranges
- Multiple chart types for different analytical needs
- Excel export functionality for sorted and filtered data
- Automated report generation
Analytics dashboard with charts and export capabilities.
Technical Challenges
Handling Massive Data Volumes
The system processes enormous amounts of tracking data continuously. Every caching decision, every query optimization, every render cycle had to be carefully considered. TanStack Query’s intelligent caching combined with strategic data pagination keeps the interface responsive regardless of data volume.
Tablet-First PWA
Building a PWA optimized for tablets required rethinking touch interactions, ensuring offline reliability, and maintaining performance with limited device resources. The Canvas-based floor plans had to remain fluid and responsive even on mid-range tablets.
Impact
Brigada.hr transforms facility management from reactive to proactive. What previously required manual counting, spreadsheet juggling, and guesswork is now automated, accurate, and instantly accessible. The system provides actionable insights that help optimize staffing, improve visitor flow, and enhance the overall facility experience.