© 2026 A K M Fahim Kabir. All rights reserved.
© 2026 A K M Fahim Kabir. All rights reserved.
Praava Health Bangladesh Limited
A medical-grade DICOM Viewer for Praava Health, rebuilt from an open-source foundation by converting legacy class-based components into modern React function components. The project improves diagnostic workflows by delivering distortion-free, high-performance medical image rendering optimized for clinical use.
The DICOM Viewer began as an open-source imaging tool, but the legacy codebase used outdated class components, contained scattered logic, and struggled with rendering consistency—especially when dealing with high-resolution DICOM files.
Your task was to rebuild the entire viewer architecture using modern React patterns, ensuring:
All legacy features and behaviors were retained
Rendering issues (distorted images, incorrect scaling, pixel stretching) were fixed
Performance was optimized for real medical workflows
The viewer remained compliant with medical imaging standards
Implementing powerful medical annotation tools
The final system delivers smooth, distortion-free viewing across desktops, tablets, and clinical environments—used by 50+ healthcare professionals daily.
Successfully migrated a large, logic-heavy viewer from class components → function components.
Preserved all original functionalities while improving maintainability and performance.
Fixed image distortion issues, ensuring accurate pixel density, scaling, and aspect ratio.
Improved UX responsiveness by 40%, especially during zoom/pan interactions.
Enabled seamless traversal through 500+ DICOM files used for diagnostics.
Achieved full compliance with medical imaging rendering standards.
Original code had deep nested logic, lifecycle methods, and imperative patterns.
You refactored everything using:
React Hooks (useState, useEffect, useRef, useCallback)
Cleaner separation of concerns
Reusable rendering + interaction hooks
Learned advanced migration strategies for modernizing legacy React code.
Images were:
Stretched
Incorrectly scaled
Losing aspect ratio
You debugged the rendering pipeline and resolved issues by:
Rebuilding canvas rendering logic
Maintaining exact DICOM metadata (pixel spacing, frame size, zoom ratio)
Properly recalculating viewport transforms
Final viewer shows accurate, medical-grade imaging with zero distortion.
Used progressive loading + requestAnimationFrame for smooth interactions.
Clean state management prevented re-renders even with large images.
Canvas operations were tuned for speed and reliability.
Rebuilt the entire viewer UI using modern React function components.
Implemented all interaction tools (zoom, pan, rotate, brightness).
Rewrote complex rendering logic while retaining every legacy workflow.
Fixed major distortion issue by reconstructing the rendering pipeline.
Added responsive design for doctors using tablets and different monitors.
Collaborated with backend engineers to integrate secure medical image access.
React-based modular architecture with fully refactored function components.
Canvas-based rendering engine rebuilt for accuracy and performance.
Custom hooks:
useImageRenderer
useViewport
useMouseTools
Debounced interactions for ultra-smooth zoom/pan controls.
Error handling for corrupted or non-standard DICOM frames.
Laravel APIs handle DICOM file retrieval, caching, and access control.
Secure endpoints preserve patient data privacy and HIPAA-like compliance.
Preprocessing pipelines to reduce load on the client.
High-accuracy DICOM rendering
Annotation tools:
Marking points
Linear measurements
Angle measurement
Brightness/contrast controls
Zoom, pan, rotate functionality
Multi-frame navigation
Tablet & multi-device support
Medical-grade pixel accuracy
Frontend
React.js
Backend
Express.js
Database
PostgreSQL
Others
Docker
Add region/area measurement tools
Enable collaborative annotations for radiologists
Introduce AI-assisted anomaly detection
Add 3D visualization support for advanced imaging