Frontend Implementation
Frontend Architecture
The UniFi Dashboard frontend is designed as a lightweight Single Page Application (SPA) built with Vanilla JavaScript, CSS3 Custom Properties, and Semantic HTML5. It follows a reactive pattern without the overhead of a heavy framework, ensuring fast load times and minimal resource consumption on the client side.
Core Technology Stack
- Language: JavaScript (ES6+)
- Styling: CSS3 with CSS Variables (for dynamic theming)
- Data Fetching: Fetch API using a Backend-for-Frontend (BFF) pattern
- State Management: Local JavaScript objects and Browser
localStorage
Key Frontend Systems
1. Backend-for-Frontend (BFF) Communication
To circumvent CORS (Cross-Origin Resource Sharing) restrictions and secure sensitive API keys, the frontend does not communicate with the UniFi API directly. Instead, it interfaces with a local Express-based proxy.
Endpoints consumed:
GET /api/sites: Retrieves all managed network locations.GET /api/sites/:siteId/devices: Fetches hardware status (APs, Switches, Gateways) for a specific site.GET /api/sites/:siteId/clients: Fetches active client counts and details.
2. State & Persistence
The dashboard maintains several internal states to provide a seamless user experience:
- Site Visibility: Users can toggle which sites appear in the grid. This selection is maintained in a
Setand applied during the render cycle. - UI Persistence: Site collapse/expand states and theme preferences are saved to
localStorage, ensuring the dashboard returns to its last known state upon browser refresh.
3. Real-Time Monitoring & Refresh Logic
The dashboard features an automated polling system to keep network data current:
- Polling Interval: Defaulted to 15 seconds.
- Visual Countdown: A live timer in the header indicates the next sync event.
- Delta Detection: On every refresh, the system compares the current client count against the previous count to determine if a notification should be triggered.
4. Theme & Accessibility Management
The application implements a robust theme engine using CSS Variables.
| Feature | Implementation |
| :--- | :--- |
| Dark Mode | Toggled via a .dark-theme class on the <body>. Uses true black (#000000) for OLED efficiency. |
| Sound Alerts | Optional audio pings for client events, controlled via a global mute toggle. |
| Animations | CSS transitions for layout shifts and "flash" animations on cards when data updates. |
Component Overview
Dashboard Statistics
The top-level summary cards provide an aggregate view of the entire network infrastructure, including:
- Total connected clients across all sites.
- Global device health status.
- Current site availability metrics.
Site Filter Panel
A collapsible control center that allows users to:
- Filter sites by status (Online Only).
- Perform bulk actions (Select All / None).
- Toggle individual site visibility to focus on specific infrastructure.
Notification System
Located in the top-right corner, the notification engine handles:
- Connection Events: Visual indicators when new clients join.
- Disconnection Events: Alerts when clients leave the network.
- Auto-Dismiss: Notifications persist for 5 seconds before clearing from the stack to prevent UI clutter.
Developer Usage: Customizing the UI
Developers looking to modify the look and feel can leverage the CSS Variables defined in style.css.
/* Example: Customizing the Primary Brand Color */
:root {
--bg-secondary: #ffffff;
--text-primary: #1d1d1f;
/* Modify these variables to change the dashboard appearance */
}
To adjust the auto-refresh frequency, modify the secondsUntilRefresh variable in app.js. Note that high-frequency polling may impact the performance of your UniFi Controller API.