A cutting-edge React web application prototype featuring dual-sided patient and caregiver ecosystems with advanced UI animations and real-time health monitoring.

• Magic Bento Dashboard with spotlight effects on cards
• Safe Ping Tile with heartbeat pulse animation
• Vitals Sparkline with animated SVG drawing
• Medication Management with full CRUD operations
• Adherence Ring showing medication compliance percentage
• Symptom Logger with accessible numeric stepper (0-10)
• Medical Records Timeline with severity color coding
• Privacy Controls for caregiver data sharing

• Aurora Background with dynamic color mapping to patient severity
• Traffic Light Hero status indicator with ripple animation
• Live Sync Indicator showing real-time updates
• Event Timeline with privacy-masked routine events
• Emergency Action Row with moving gradient border animation
• Two-Tier Privacy System for sensitive data protection

• Magnetic Buttons that pull toward cursor/touch
• Magic Cards with radial spotlight effects
• Blur Fade Animations for smooth transitions
• Moving Gradient Borders for emergency alerts
• Shiny Text animations for status updates
• Framer Motion micro-interactions throughout

• React 18 - UI framework
• Framer Motion - Advanced animations
• Tailwind CSS - Styling
• Lucide React - Icons
• Vite - Build tool

1. Clone the repository:

git clone <repo-url>
cd cura-medical-app

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser to http://localhost:5173

src/
├── App.jsx                          # Main app with state management
├── views/
│   ├── PatientView.jsx             # Patient ecosystem
│   └── CaregiverView.jsx           # Caregiver ecosystem
├── components/
│   ├── ui/
│   │   ├── MagneticButton.jsx      # Magnetic button effect
│   │   ├── MagicCard.jsx           # Spotlight card effect
│   │   ├── AuroraBackground.jsx    # Aurora animation
│   │   └── BlurFade.jsx            # Blur fade transition
│   ├── patient/
│   │   ├── HomeTab.jsx             # Home dashboard
│   │   ├── MedicationsTab.jsx      # Medication management
│   │   ├── RecordsTab.jsx          # Medical records
│   │   ├── ProfileTab.jsx          # Profile & privacy
│   │   ├── SafePingTile.jsx        # Safe status button
│   │   ├── VitalsSparkline.jsx     # Heart rate chart
│   │   ├── NextMedicationCard.jsx  # Next med actions
│   │   ├── AddMedicationDialog.jsx # Add med form
│   │   └── SymptomLogger.jsx       # Symptom logging
│   └── caregiver/
│       ├── TrafficLightHero.jsx    # Status indicator
│       ├── EventTimeline.jsx       # Activity timeline
│       └── EmergencyActionRow.jsx  # Emergency button
└── index.css                        # Global styles

The app uses React useState for:

• medications - Array of medication objects with CRUD operations
• eventLogs - Chronological activity timeline
• shareEssentialOnly - Privacy toggle for caregiver view
• viewMode - Toggle between Patient and Caregiver views

• Mild (0-2) → Emerald (emerald-500)
• Moderate (3-5) → Amber (amber-500)
• Severe (6-8) → Orange (orange-500)
• Critical (9-10) → Red (red-600)

When "Share Essential Data Only" is enabled:

• Events with severity ≤ 2 are masked
• "Safe Ping" events are hidden
• Details are blurred with lock icon
• Caregiver sees only critical information

• Create - Add new medications via dialog
• Read - Display all medications with status
• Update - Change medication status (taken/missed/refused)
• Delete - Remove medications from list

• Heartbeat Pulse - Safe Ping tile
• Stroke Drawing - Vitals sparkline
• Spotlight Follow - Magic cards
• Magnetic Pull - Navigation buttons
• Aurora Waves - Caregiver background
• Ripple Effect - Traffic light hero
• Moving Border - Emergency button

1. Click the toggle button to switch to Patient view
2. Use the bottom navigation to explore tabs
3. Click the + FAB to log symptoms
4. Manage medications in the Medications tab
5. Toggle privacy settings in Profile tab

1. Click the toggle button to switch to Caregiver view
2. Monitor patient status via the traffic light indicator
3. Review activity timeline with privacy masking
4. If critical, emergency action row appears at bottom

• Numeric stepper for symptom severity (no range sliders)
• High contrast text (text-slate-900 on white)
• Semantic HTML structure
• Keyboard navigation support
• ARIA labels on interactive elements

• No actual patient data is stored
• Privacy controls demonstrate data masking
• Encryption indicators for sensitive events
• Audit trail via event logs
• Role-based access (Patient vs Caregiver)

npm run build

Output will be in the dist/ directory.

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

MIT

For issues or questions, please open an issue in the repository.