LifeVault

Secure Health Data, Real Value

Comment

LifeVault: Health Data Ownership & Monetization Platform

Inspiration

The inspiration for LifeVault came from recognizing a fundamental imbalance in the healthcare data economy: individuals generate valuable health data every day—from fitness trackers and lab results to genetic testing—but they have little control over how it's used and rarely benefit from its value. Meanwhile, pharmaceutical companies and research institutions spend billions acquiring health data for drug development and research. We envisioned a platform that would empower individuals to take ownership of their health data, secure it with encryption, and monetize it on their own terms. LifeVault transforms personal health data from a passive asset into a controlled, income-generating resource.

What it does

LifeVault is a Web3-powered health data management and monetization platform that enables users to:

  • Securely Store & Encrypt: Upload diverse health data (medical reports in PDF, lab results as images, genetic data in VCF/FASTQ formats) through an intuitive drag-and-drop interface with visualized end-to-end encryption

  • Track Health Profile: Visualize comprehensive health metrics through an interactive radar chart covering five dimensions—Cardiovascular, Metabolism, Immunity, Genetic Risk, and Anti-aging—along with a Health Credit Score (300-900 scale)

  • Monetize Data: Browse a marketplace of research institutions (pharmaceutical companies, universities, research labs) seeking specific types of health data, with one-click consent authorization and real-time earnings tracking

  • Maintain Control: Access detailed logs of all data usage, manage private encryption keys, and toggle data consent on/off at any time

  • Security-First: Monitor security scores, view access history, and manage vault settings through a comprehensive Security Center

The platform features a stunning glass-morphism UI with smooth animations, responsive design, and an intuitive navigation experience.

How we built it

Tech Stack

Frontend:

  • Next.js 16.1.6 with App Router and React 19.2.3
  • TypeScript for type safety and developer experience

Styling:

  • Tailwind CSS v4 with @tailwindcss/postcss
  • Glass-morphism design system via CSS custom properties
  • Space Grotesk and JetBrains Mono (variable fonts)

Animations & Charts:

  • Framer Motion 12.29.2 for animations and micro-interactions
  • Recharts 3.7.0 for health visualizations (radar, earnings)
  • Custom CSS (pulse-glow, animate-float, gradient-shift) and gradient/noise backgrounds

Backend & Data:

  • Next.js API routes (App Router)
  • Drizzle ORM 0.45.x with Drizzle Kit for migrations and Studio
  • Neon serverless Postgres (@neondatabase/serverless)

Auth & Email:

  • NextAuth.js 5.0.0-beta.30 (credentials, sessions)
  • bcryptjs for password hashing
  • Nodemailer for transactional email

UI & Utilities:

  • Lucide React 0.563.0 for icons
  • clsx 2.1.1 + tailwind-merge 3.4.0 for class composition

Architecture

Component Organization:

  • Modular structure with dedicated directories for features (dashboard/, upload/, marketplace/)
  • Reusable UI primitives (GlassCard, CustomCursor, Particles)
  • Layout components (MainLayout, Sidebar) for consistent page structure

Design Patterns:

  • Centralized glass-morphism system with GlassCard component providing consistent styling
  • Client-side navigation with Next.js Link and active state detection
  • Stagger animations for smooth, sequential element reveals
  • Dark theme with CSS custom properties for colors (--accent-primary, --accent-gold, etc.)

Key Implementations:

  • Multi-stage upload process with encryption animation (scanning → encryption → valuation → vaulted)
  • Interactive radar chart for health dimension tracking
  • Real-time earnings dashboard with filtering and search
  • Comprehensive security center with access logs and key management
  • Responsive design with collapsible sidebar

Challenges we ran into

  1. Glass Morphism Performance: Implementing glass-morphism effects with backdrop blur and transparency initially caused performance issues, especially with multiple cards. We optimized by using CSS custom properties instead of inline styles and ensuring hardware-accelerated animations.

  2. Animation Complexity: Creating smooth, staggered animations across multiple components without jank required careful use of Framer Motion's layout prop and proper animation variants. We had to balance visual appeal with performance.

  3. State Management: Managing complex state for health metrics, upload progress, and marketplace consent across multiple components led to prop drilling. We structured components to minimize state depth and used React hooks effectively.

  4. Responsive Design: Making the glass-morphism UI work seamlessly across different screen sizes, especially the sidebar and card layouts, required careful Tailwind configuration and breakpoint planning.

  5. Mock Data Realism: Creating realistic mock data for health profiles, research opportunities, and earnings that demonstrated the platform's potential without overwhelming users.

Accomplishments that we're proud of

  1. Polished UI/UX: Achieved a stunning, cohesive glass-morphism design system that feels modern, premium, and trustworthy—critical for a health data platform.

  2. Smooth Animations: Implemented complex, multi-stage animations (encryption process, number counters, stagger reveals) that enhance user experience without sacrificing performance.

  3. Comprehensive Feature Set: Built five fully functional pages (Dashboard, Upload, Marketplace, Security, Settings) each with rich, interactive components.

  4. Type Safety: Maintained full TypeScript coverage across the codebase, catching potential issues early and improving maintainability.

  5. Modular Architecture: Created a scalable component structure with reusable UI primitives that make adding new features straightforward.

  6. Data Visualization: Successfully integrated Recharts for health metrics with custom styling to match the glass-morphism theme.

  7. Security-Focused Design: Even as an MVP, we baked in security considerations—private key management UI, access logs, consent toggles—preparing for future encryption implementation.

What we learned

  1. Next.js App Router: Gained deep experience with Next.js 16's App Router, understanding client/server component boundaries, file-based routing, and layout composition.

  2. Framer Motion Mastery: Learned advanced animation patterns including stagger variants, layout animations, and custom spring configurations for natural motion.

  3. Tailwind CSS v4: Explored the latest Tailwind CSS v4 features, including @import syntax and inline theme configuration with CSS custom properties.

  4. Design System Thinking: Discovered the power of creating a centralized design system (GlassCard) early and how it accelerates development while ensuring consistency.

  5. TypeScript Best Practices: Improved at leveraging TypeScript for type safety, interface design, and catching errors at compile time.

  6. Glass Morphism Techniques: Learned effective glass-morphism implementation—balancing transparency, blur, borders, and shadows for readability and aesthetics.

  7. Component Composition: Better understood when to extract components vs. keep things together, finding the right balance between abstraction and simplicity.

What's next for LifeVault

Phase 2: Core Functionality (In Progress)

  • Implement client-side encryption using Web Crypto API
  • Integrate IPFS/Arweave for decentralized data storage
  • Add Wallet Connect (MetaMask, Coinbase Wallet) for Web3 authentication
  • Build private key generation and secure management system

Phase 3: Data Processing

  • OCR integration for extracting data from medical documents
  • Genetic data parser (VCF/FASTQ) for health insights
  • Health score calculation algorithm based on uploaded data
  • Automated data valuation engine based on market demand

Phase 4: Marketplace Integration

  • Smart contract development for consent management and payments
  • Research institution onboarding and verification
  • Crypto + fiat payment processing
  • Real-time data access logging with blockchain verification

Phase 5: Compliance & Launch

  • HIPAA/GDPR compliance implementation
  • Third-party security audit
  • Zero-knowledge proof implementation for privacy-preserving data sharing
  • Beta launch with pilot research partners
  • Public launch and community building

Future Enhancements

  • Mobile app (React Native)
  • API for integration with wearables and health platforms (Apple Health, Google Fit)
  • AI-powered health insights and recommendations
  • DAO governance for platform decisions
  • Advanced analytics dashboard for researchers

Built With

Share this project:

Updates