• 

  Workflow of adding procedure, viewing progress, exporting results, and customizing settings

About CardioVault

Inspiration

As a cardiac electrophysiology fellow at the Texas Heart Institute in Houston, TX, I experienced firsthand the frustration of tracking procedures during my general cardiology training. Like many residents and fellows, I found myself juggling scattered Excel spreadsheets, handwritten notes, and various digital documents trying to keep track of the hundreds of procedures required for graduation.

The breaking point came during my final year when I realized I had procedure logs spread across multiple files, some dating back years, with inconsistent formatting and missing critical information. What should have been a simple graduation requirement verification turned into weeks of reconstructing my clinical experience from memory and incomplete records. I knew there had to be a better way, and that's when the idea for CardioVault was born.

What it does

CardioVault is a comprehensive procedure logging application designed specifically for cardiology trainees. The app allows users to easily log procedures with essential information including date, patient demographics, supervisor, and detailed procedure components. Each entry can contain multiple procedures performed during a single case, reflecting real-world clinical scenarios.

The main dashboard displays all logged procedures in a sortable, searchable list that can be filtered by date, procedure type, or supervisor. Users can quickly add new entries through an intuitive multi-step form that guides them through required information. The summary screen provides analytics showing total procedure counts and progress toward graduation requirements with visual charts and progress tracking.

The settings section allows customization based on specialty focus, whether general cardiology, interventional, or electrophysiology. Users can modify available procedure lists to match their specific training requirements. Most importantly, the app generates professional PDF exports for official submission to program directors, eliminating the need to manually compile scattered logs.

How we built it

I chose React with TypeScript as the frontend framework to ensure type safety and maintainable code. Tailwind CSS provides the styling foundation with a custom design system inspired by modern fintech applications, creating a professional yet approachable interface. The design features blue gradient backgrounds, card-based layouts, and glassmorphism effects that make procedure logging feel less like a chore.

Data persistence relies entirely on local storage to ensure privacy and enable offline functionality. This approach eliminates concerns about sensitive medical information being transmitted or stored externally. For analytics and visualizations, I integrated Recharts to create interactive charts showing procedure progress and trends. React-PDF handles the generation of professional reports that meet the formatting standards expected by medical programs.

Search and filtering capabilities use Fuse.js for intelligent, fuzzy searching across procedures and supervisors. The entire application follows mobile-first design principles since medical trainees often need to log procedures quickly between cases using their phones.

Challenges we ran into

One of the biggest technical challenges was designing a flexible data structure that could accommodate different cardiology subspecialties while maintaining data integrity. Each specialty has unique procedure requirements, and the system needed to adapt without requiring separate applications. I solved this through a configurable procedure taxonomy that adjusts based on user settings.

Ensuring mobile responsiveness across various devices required extensive testing and refinement. Medical professionals need to access the app quickly in clinical settings, so performance and usability on mobile devices was critical. Creating professional PDF reports that program directors would accept proved more complex than expected, requiring careful attention to formatting and layout consistency.

From a user experience perspective, balancing comprehensive procedure information with a clean interface was challenging. Medical data can be complex, but the interface needed to remain intuitive for users who are often logging procedures under time pressure. I addressed this through progressive disclosure and careful visual hierarchy.

Accomplishments that we're proud of

I'm particularly proud of creating an application that solves a real problem I experienced personally during my medical training. The clean, professional design demonstrates that medical applications don't need to sacrifice user experience for functionality. The comprehensive analytics provide insights that weren't possible with traditional logging methods, helping trainees understand their progress and identify areas needing more experience.

The PDF export functionality creates properly formatted reports that meet institutional requirements, eliminating hours of manual compilation work. The flexible specialty configuration means the app can serve trainees across different cardiology subspecialties without requiring separate tools. Most importantly, the app works entirely offline with local storage, addressing privacy concerns while ensuring reliability in hospital environments with unreliable internet connectivity.

What we learned

This project taught me valuable lessons about state management when handling complex medical data without external dependencies. I gained deeper understanding of performance optimization techniques like virtual scrolling and debounced search for handling large datasets efficiently. The experience reinforced the importance of accessibility in medical applications and progressive enhancement for robust offline functionality.

From a product development perspective, I learned how user-centered design drives meaningful innovation. The iterative process of gathering feedback from fellow medical trainees fundamentally shaped the final product. I also gained appreciation for the complexity of creating software that meets the specific needs of medical education while maintaining the high standards expected in healthcare.

Working on CardioVault reinforced my belief that technology should serve healthcare providers rather than burden them. The best medical tools integrate seamlessly into existing workflows while dramatically improving efficiency and outcomes.

What's next for CardioVault

The immediate focus is on expanding the procedure databases to cover additional cardiology subspecialties and incorporating feedback from early users to refine the interface and workflow. I'm exploring integration possibilities with hospital systems and electronic health records to streamline data entry and reduce duplication of effort.

Future enhancements could include collaborative features allowing supervisors to verify and sign off on logged procedures digitally. Analytics could be expanded to provide insights into learning patterns and suggest areas for focused training based on procedure volume and complexity. There's also potential for creating a broader platform that extends beyond cardiology to serve other medical specialties facing similar procedure tracking challenges.

Long-term, I envision CardioVault contributing to a more comprehensive digital transformation of medical education, where administrative burdens are minimized and trainees can focus more on patient care and learning.

Built With

• bolt
• css
• lucide
• react
• tailwind
• typescript
• vite