Inspiration

Fragmented patient data across multiple healthcare providers can lead to misdiagnoses and medical errors, adversely affecting patient outcomes. A 2023 report highlighted that diagnostic errors in the U.S. result in approximately 795,000 serious harms annually. Singapore's NEHR system is a comprehensive solution to this situation but may be too complicated for all healthcare professionals to adopt. Hence, our project serves as a similar platform with simpler features and layout for ease of use by healthcare professionals.

What it does

HIPAAX is a centralized, secure platform that allows authorized healthcare professionals to view and update patient records in real-time. It simplifies access to critical medical data while enforcing robust 2FA (TOTP) security to protect sensitive information.

How we built it

  • Frontend: Next.js (App Router), React, Tailwind CSS
  • Backend: Next.js API routes, Supabase
  • Authentication: Supabase with TOTP-based 2FA (Google Authenticator, Authy, Microsoft Authenticator)
  • State Management: React Context and Server Actions

Challenges we ran into

  • Implementing 2FA with TOTP: Integrating and displaying the QR code securely and ensuring users enrolled properly was tricky.
  • Creating seamless API routes in the App Router structure required rethinking how to handle server logic.
  • Managing secure data access while balancing user experience and HIPAA-like compliance.

Accomplishments that we're proud of

  • Successfully implemented a working TOTP 2FA flow using Supabase and authenticator apps.
  • Created a clean, intuitive dashboard that allows searching and viewing patient data.
  • Maintained secure access control and modular design using Next.js best practices.

What we learned

  • Deepened our understanding of Next.js App Router and Server Actions.
  • Gained hands-on experience with Supabase MFA, especially the TOTP enrollment and verification process.
  • Learned to structure API logic cleanly inside the new Next.js 13+ paradigm.

What's next for HIPAAX

  • Add role-based access control (RBAC) for doctors, nurses, and admin staff.
  • Integrate audit logs for patient record views and updates.
  • Explore deploying on Vercel or Railway with secure environment variable management.
  • Work with synthetic or de-identified real datasets to simulate production use cases.

Built With

  • authy
  • google-authenticator
  • microsoft-authenticator
  • next.js
  • next.js-api-routes
  • react
  • react-context
  • server-actions
  • tailwind-css
  • totp
Share this project:

Updates