Dynamic views for the medical system
Automation of task boards using Material Data Grid and Firebase.
- Client: medtech company developing a medical data management application
- Problem: the need to create views (grid and kanban) that react dynamically to events in the system
- Solution: implementation of dynamic grid with drag & drop configuration and integration of notifications via Firebase Cloud Messaging
- Stage: grid view implemented and ready for integration; kanban planned for the next stage
- The role of Team Connect: Frontend Engineer responsible for technology selection and component implementation in the early phase of the project
Context
Frontend Engineer from Team Connect joined the customer team as an expert responsible for the development of interfaces based on dynamic system events. The client develops tools to support the management of medical care and patient data in real time.
The demand was related to the construction of two views: grid and kanban. Each of them was supposed to work in live mode — automatically refreshing itself in response to specific system events, such as marking a given observation as important by the doctor.
The Challenge
Due to the high dynamics of the project and the need to quickly deliver functionality, it was necessary to efficiently select ready-made components and solutions that will ensure the expected level of usability while maintaining cost optimization.
Key requirements included:
- full configurability of the view (columns, sorting, filtering, order of elements),
- Real-time operation (live view)
- moving tasks between statuses (for kanban)
- efficient use of budget and resources.
Recognition and technological decisions
Frontend Engineer analyzed available open source libraries and commercial solutions, looking for tools that would meet customer requirements without the need to build components from scratch.
Finally, it was decided to:
- Material Data Grid Pro — a paid library meeting the configuration requirements (drag & drop, filtering, reordering),
- Firebase Cloud Messaging — to support system notifications in real time (free solution, easy to integrate with Angular and React).
Solution
Realized the first view (grid) with full configuration of the interface. The data is filterable, sortable, and the order of columns and rows can be set by drag & drop.
We are currently working on an integration with Firebase that will allow automatic data refresh in the background. The events are already prepared.
At the next stage, the development of the kanban view is envisaged. It will build on an existing widget support component, with additional logic for migrating tasks between statuses and related background actions.
Progress
The project is in progress. The team has already implemented a grid view with full UI configuration and is currently working on integration with the Firebase-based notification system. In parallel, preparations are underway to build a kanban view, which will be based on an existing component and extended with the logic of changing statuses.
Stage of work — summary
- Grid view: configured, ready to integrate with the notification system
- Live updates: events prepared, integration with Firebase in progress
- Kanban: a component in the plan, based on an earlier solution for widgets
- Ongoing cooperation: the next sprints will include the development of live functionality and status logic
Are you wondering how to improve your product?
Creating dynamic interfaces is not just a matter of technology — it's a way to better user experience, more efficient processes, and more control over data in real time.
See how we connect frontend, integrations and system architecture, supporting customers in the development of web applications.
Learn about our approach to applications and web portals.
