A comprehensive demonstration of unified customer data platform capabilities for healthcare organizations, showcasing how Segment's Customer Data Platform transforms fragmented patient and HCP interactions into actionable customer intelligence.
BioLink Therapeutics is a fictional biotechnology company specializing in rare disease treatments. This application demonstrates a complete healthcare customer journey from anonymous visitor to treatment success, unified through Segment's CDP.
- BioLink-GTx: Gene therapy for lysosomal storage disorders
- BioLink-ENZ: Enzyme replacement therapy for metabolic disorders
This application showcases the complete healthcare customer journey across multiple touchpoints:
- Anonymous Discovery - Website browsing, content consumption
- Information Gathering - Resource downloads, specialist searches
- Account Creation - Patient portal registration
- Assessment & Testing - Treatment eligibility evaluation
- Treatment Approval - Insurance verification, care coordination
- Ongoing Care - Treatment monitoring, outcome tracking
- Patients - Treatment seekers and current patients
- Healthcare Professionals (HCPs) - Specialists and referring physicians
- Clinical Trial Participants - Research study volunteers
- Anonymous Visitors - Unidentified website users
- Executive Dashboard - High-level KPIs and business metrics
- Customer 360° - Unified customer profiles across all touchpoints
- Patient Analytics - Journey mapping and outcome tracking
- HCP Analytics - Professional engagement and education metrics
- Clinical Trials - Enrollment and compliance monitoring
- Sarah M. - Adult patient on BioLink-GTx therapy
- Emma L. - Pediatric patient (via parent) starting treatment
- Dr. Johnson - Pediatric geneticist with active referrals
- Dr. Martinez - Endocrinologist evaluating therapies
- Live User Profile Tab - Real-time customer data updates
- Event Generation - Simulate realistic user interactions
- Settings Dashboard - Demo configuration and data management
- React 18 with TypeScript
- Tailwind CSS for styling
- React Router for navigation
- Recharts for data visualization
- Lucide React for icons
- Segment Analytics.js - Customer data collection
- Real-time event tracking - Live user behavior monitoring
- Profile API integration - Dynamic customer profile updates
- Marketing attribution - UTM parameter tracking
- Vite build system
- Netlify hosting
- Environment variables for configuration
// Generate realistic 6-week browsing history
- 47 Page Views across disease information, symptoms, treatments
- 8 Content Downloads (guides, trackers, resources)
- 3 Specialist Searches in Boston area
- Realistic engagement metrics (time on page, scroll depth)// Mock patient emails for demo
sarah.m@email.com // Sarah M. - BioLink-GTx ongoing care
emma.l@email.com // Emma L. - Pediatric patient starting treatment
michael.r@email.com // Michael R. - BioLink-ENZ assessment
david.l@email.com // David L. - Genetic testing phase// Healthcare professional interactions
- Educational content consumption
- Medical information requests
- Patient referral submissions
- Webinar registrations// Research study engagement
- Trial screening and consent
- Digital biomarker collection
- Compliance monitoring
- Outcome reporting- Node.js 18+
- npm or yarn
- Modern web browser
# Clone the repository
git clone [repository-url]
cd biolink-therapeutics
# Install dependencies
npm install
# Start development server
npm run dev# Segment Analytics Configuration
VITE_SEGMENT_WRITE_KEY=your_segment_write_key
# Optional: Backend API for real profile data
VITE_BACKEND_URL=your_backend_api_url- Homepage - Hero section with therapy overview
- Disease Information - Educational content about rare diseases
- Specialist Locator - Find healthcare professionals
- Patient Support - Resources and assistance programs
- Clinical Trials - Research study information
- Registration/Login - Account creation and authentication
- Dashboard - Treatment progress and appointments
- Assessment - Eligibility evaluation forms
- Resource Library - Educational materials and guides
- Professional Login - Healthcare provider authentication
- Clinical Resources - Medical information and data
- Education Center - Training materials and webinars
- Patient Referrals - Treatment referral system
- Executive View - Business KPIs and performance metrics
- Customer 360° - Unified customer profiles
- Journey Analytics - Patient pathway analysis
- Real-time Activity - Live event monitoring
// Page views with rich context
analytics.page('Disease Information', {
page_name: 'biolink-gtx-overview',
therapy_focus: 'BioLink-GTx',
device_type: 'desktop'
});
// User actions with detailed properties
analytics.track('Specialist Appointment Requested', {
doctor_name: 'Dr. Sarah Chen',
specialty: 'Pediatric Genetics',
appointment_date: '2024-02-15',
therapy_interest: 'BioLink-GTx'
});
// User identification with comprehensive profiles
analytics.identify('patient_sarah_m_hashed', {
name: 'Sarah M.',
therapy_program: 'BioLink-GTx',
journey_stage: 'Ongoing Care',
age_range: '30-35'
});- UTM parameter capture - Campaign source tracking
- Cross-session persistence - Attribution across visits
- Profile enrichment - Marketing data in customer profiles
- Primary Teal - #2C7873 (BioLink brand)
- Secondary Orange - #E67E22 (BioLink accent)
- Success Green - #10B981
- Warning Orange - #F59E0B
- Error Red - #EF4444
- Font Family - Inter (system fallback)
- Headings - Bold weights with proper hierarchy
- Body Text - Regular weight with 150% line height
- Responsive design - Mobile-first approach
- Accessibility - WCAG compliant interactions
- Animations - Subtle micro-interactions
- Loading states - Skeleton screens and spinners
Page Viewed- Website navigation trackingSigned Up- Account registrationSigned In- User authenticationApplication Opened- Portal access
Treatment Eligibility Assessment Started/CompletedSpecialist Appointment Requested/ScheduledPatient Reported Outcome Survey CompletedClinical Trial Consent CompletedEducational Content ViewedMedical Information Request
therapy_program- Treatment interest/enrollmentjourney_stage- Current position in care pathwayuser_type- patient, hcp, adminspecialty- Medical specialty (for HCPs)age_range- Demographic segmentation
- HIPAA-compliant design - Healthcare data protection
- Anonymized user IDs - Privacy-preserving identification
- Consent management - Explicit user permissions
- Secure transmission - Encrypted data transfer
- Fictional patients - No real health information
- Mock scenarios - Realistic but simulated journeys
- Safe testing - No actual medical data exposure
- Start with anonymous journey - Show rich behavioral data
- Demonstrate identity resolution - Anonymous to identified transition
- Highlight unified profiles - Complete customer view
- Show real-time updates - Live data synchronization
- Open Profile Tab - Show live data updates
- Navigate different personas - Switch between user types
- Generate events - Use admin tools for live data
- Explore dashboards - Analytics and insights
- Focus on patient journey - Care pathway optimization
- HCP engagement - Professional education tracking
- Clinical trials - Research participant monitoring
- Compliance & outcomes - Treatment effectiveness
# Create production build
npm run build
# Preview production build
npm run preview- Automatic builds - Connected to Git repository
- Environment variables - Configured in Netlify dashboard
- Custom domain - Optional branded URL
- SSL certificate - Automatic HTTPS
- Feature branches - Create from main
- Code review - Pull request process
- Testing - Manual QA and user testing
- Documentation - Update README and comments
- TypeScript - Strict type checking
- ESLint - Code quality enforcement
- Prettier - Consistent formatting
- Component structure - Modular architecture
- Technical issues - Check browser console for errors
- Data questions - Review analytics implementation
- Feature requests - Submit enhancement ideas
- Event tracking - Verify analytics.js implementation
- Profile API - Check backend connectivity
- Data quality - Monitor event validation
This is a demonstration application created for showcasing Segment's Customer Data Platform capabilities in healthcare contexts. All patient data is fictional and created for demo purposes only.
Built with ❤️ for healthcare customer intelligence
Transforming fragmented healthcare interactions into unified customer journeys