Attention Metrics - Frontend on Vue

About the project

Attention Metrics is a service for analyzing user attention, building heat maps and collecting behavioral metrics on websites and applications. A modern, adaptive frontend on Vue.js has been developed for data visualization, building interactive reports and managing monitoring settings.

Business problem

• Create a convenient, fast and visually rich SPA interface for the analytical platform.
• Provide integration with the API for collecting metrics and managing user sessions.
• Implement interactive visualizations (graphs, heat maps, reports on audience segments).
• Make the platform accessible on all devices with a modern UX.
• Support multi-user mode and flexible role configuration.

Technical solution

• SPA on Vue.js: fast transitions, dynamic charts and reports.
• Interactive heat maps, charts, filters and data export.
• Integration with analytics API: receiving and aggregating metrics in real time.
• Managing monitoring settings, segmenting and drilling down by audience.
• Support for different user roles and differentiation of access rights.
• Adaptive layout, performance optimization for large volumes of data.

Technologies

• Vue.js
• Vuex / Pinia
• Chart.js / D3.js (data visualization)
• REST API / WebSockets
• HTML5, SCSS, JavaScript (ES6+)

Results

• Significant acceleration of access to analytics and reporting.
• Ease of use for analysts and managers.
• Ability to flexibly customize data views for different teams.
• Positive user feedback on metrics visualization.

Customer review

“The new Vue frontend makes analytics accessible and visual, helping to quickly find insights on user behavior.”