A comprehensive healthcare management system designed for charity clinics, built with React, Material-UI, and Supabase.
- Multi-role Authentication: Secure login with Admin, Doctor, and Patient roles
- Patient Management: Complete patient records with medical history and demographics
- Visit Logging: Comprehensive visit documentation for dental and general healthcare
- Appointment Scheduling: Full calendar integration for therapy and consultation scheduling
- Medical Records: Secure document management with file upload capabilities
- Analytics Dashboard: Real-time clinic statistics and performance metrics
- Full system access and user management
- Clinic statistics and analytics dashboard
- Patient and doctor data oversight
- System configuration and settings
- Patient visit logging and documentation
- Medical record access and updates
- Appointment management
- Treatment planning and follow-up scheduling
- Personal medical history access
- Appointment viewing and management
- Therapy schedule tracking
- Secure communication with healthcare providers
- Frontend: React 18 + TypeScript
- UI Framework: Material-UI (MUI) v5
- Database: Supabase (PostgreSQL)
- Authentication: Supabase Auth with RLS
- State Management: React Context + Hooks
- Build Tool: Vite
- Styling: Material-UI Components + Custom Theme
- Node.js 18+ and npm
- Supabase account and project
- Modern web browser (Chrome, Firefox, Safari, Edge)
-
Copy the environment template:
cp .env.example .env
-
Update
.env
with your Supabase credentials:VITE_SUPABASE_URL=your_supabase_project_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
- Connect to Supabase: Click the "Connect to Supabase" button in the top right
- Run Migrations: The database schema will be automatically created
- Demo Data: Sample data is included for testing (optional)
npm install
npm run dev
The application will be available at http://localhost:5173
For testing purposes, create these accounts in Supabase Auth:
- Admin: [email protected] / admin123
- Doctor: [email protected] / doctor123
- Patient: [email protected] / patient123
users
- User profiles and role managementpatients
- Patient demographics and medical informationvisits
- Visit records with diagnoses and treatmentstreatments
- Detailed treatment information and medicationsmedical_records
- Document storage and file managementappointments
- Scheduling and calendar management
- Row Level Security (RLS) enabled on all tables
- Role-based access control policies
- Encrypted data storage with Supabase
- Audit trails with created/updated timestamps
- All patient data encrypted at rest and in transit
- Role-based access controls with principle of least privilege
- Secure authentication with Supabase Auth
- Regular security audits and access logging
- Patient data access restricted by role
- Audit trails for all data access and modifications
- Secure file upload and storage for medical documents
- Data retention policies and backup procedures
- Business Associate Agreement (BAA) with Supabase
- Staff HIPAA training and access controls
- Incident response and breach notification procedures
- Regular security risk assessments
- Physical safeguards for clinic devices
-
Deploy to Vercel:
# Install Vercel CLI npm install -g vercel # Navigate to frontend directory cd frontend # Deploy vercel --prod
-
Or use the deployment script:
# Windows deploy-vercel.bat # Linux/Mac ./deploy-vercel.sh
-
Set Environment Variables in Vercel Dashboard:
VITE_APP_NAME=Healthcare Management System VITE_APP_VERSION=1.0.0 VITE_APP_ENV=production VITE_DEMO_MODE=true VITE_SHOW_DEMO_DATA=true VITE_ENABLE_MOCK_DATA=true
- Frontend: Netlify, Vercel, or GitHub Pages
- Database: Supabase Pro for production workloads
- CDN: Cloudflare for global content delivery
- Monitoring: Sentry for error tracking and performance
cd frontend
npm run build
The application is fully responsive and optimized for:
- Tablets (iPad, Android tablets) - Primary clinic use case
- Mobile phones - Emergency access and patient portal
- Desktop - Administrative tasks and detailed documentation
src/
βββ components/ # Reusable UI components
β βββ Auth/ # Authentication components
β βββ Dashboard/ # Dashboard widgets and charts
β βββ Layout/ # Layout components (Sidebar, AppLayout)
β βββ Patients/ # Patient management components
β βββ Visits/ # Visit logging components
βββ context/ # React Context providers
βββ lib/ # Utility libraries and configurations
βββ pages/ # Main page components
βββ types/ # TypeScript type definitions
βββ main.tsx # Application entry point
npm run dev
- Start development servernpm run build
- Build for productionnpm run preview
- Preview production buildnpm run lint
- Run ESLint
If you need more comprehensive features, consider these established solutions:
-
OpenMRS - Complete medical record system
- Pros: Mature, feature-rich, international support
- Cons: Complex setup, requires significant customization
-
GNU Health - Hospital management system
- Pros: Comprehensive, includes pharmacy and lab modules
- Cons: Python-based, requires medical knowledge for setup
-
OpenEMR - Electronic medical records
- Pros: HIPAA compliant, extensive features
- Cons: PHP-based, traditional architecture
For larger implementations:
- Backend: Node.js + Express + PostgreSQL
- Frontend: Next.js + Chakra UI or React + Ant Design
- Database: PostgreSQL with TimescaleDB for analytics
- Authentication: Auth0 or AWS Cognito
- File Storage: AWS S3 with encryption
- Deployment: AWS or Google Cloud with container orchestration
For production deployment and HIPAA compliance assistance, consider consulting with:
- Healthcare IT specialists
- HIPAA compliance attorneys
- Cloud security experts
- Medical informatics professionals
- Medical Compliance: This system requires proper HIPAA compliance setup for production use
- Security Audit: Conduct thorough security audits before handling real patient data
- Legal Review: Consult healthcare attorneys for regulatory compliance
- Backup Strategy: Implement robust backup and disaster recovery procedures
- Staff Training: Ensure all users receive proper training on system use and data handling
Built with β€οΈ for charity clinics and healthcare accessibility