A modern, role-based laboratory management platform for managing patients, appointments, test results, and analytics. Built as a portfolio/demo project showcasing production-grade architecture, inspired by real-world medical data management systems.
Demo Credentials (Shared demo accounts - do not use for sensitive data)
| Role | Password | |
|---|---|---|
| 👨💼 Admin | [email protected] |
password123 |
| 🔬 Lab Scientist | [email protected] |
password123 |
| 📋 Receptionist | [email protected] |
password123 |
- Secure Firebase Authentication
- Three distinct user roles with protected routes
- Automatic role detection and dashboard routing
- One-click demo account login
- System Overview: Real-time statistics on patients, tests, and staff
- User Management: Complete CRUD operations for system users
- Advanced Analytics: Interactive charts with revenue, test volume, and performance metrics
- System Settings: Comprehensive configuration panel for notifications, security, and preferences
- Department Performance: Track efficiency metrics across lab departments
- Test Management: View assigned tests with patient information
- Results Entry: Add and edit test results with dialog-based forms
- Test Tracking: Monitor pending, in-progress, and completed tests
- Quality Control: Results review and approval workflows (planned)
- Patient Management: Register and manage patient records
- Contact Information: Phone and email management
- Billing Overview: Track pending payments and test costs
- Appointment Scheduling: Calendar-based booking system (planned)
- Registration Workflows: Document upload and verification (planned)
- Revenue Tracking: Daily trends with dual-axis line charts
- Test Distribution: Pie charts showing test type breakdowns
- Performance Metrics: Department efficiency with progress indicators
- System Alerts: Real-time notifications for critical events
- Top Performers: Monthly leaderboard with accuracy ratings
- Framework: React 19.1.0 (latest)
- Language: TypeScript 5.7.2 (strict mode)
- Build Tool: Vite 6.3.5
- UI Library: Material-UI (MUI) v7.3.1
- Styling: Tailwind CSS v4.1.6
- Routing: React Router DOM v7.8.0
- Charts: Recharts v3.1.2
- Data Grid: MUI X Data Grid v8.10.0
- Date Pickers: MUI X Date Pickers v8.10.0
- Auth: Firebase Authentication v12.1.0
- State Management: React Context API
- Date Handling: date-fns v4.1.0, dayjs v1.11.13
- Linting: ESLint v9.25.0
- Type Checking: TypeScript with strict mode
- Deployment: Vercel
Make sure you have the following installed:
- Node.js 18.x or higher
- npm 9.x or higher (or yarn/pnpm)
- Git
-
Clone the repository
git clone https://github.com/yourusername/zenSoar.git cd zenSoar -
Install dependencies
npm install
-
Set up environment variables
cp .env.example .env
Edit
.envand add your Firebase configuration:VITE_FIREBASE_API_KEY=your_api_key_here VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain_here VITE_FIREBASE_PROJECT_ID=your_project_id_here VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket_here VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id_here VITE_FIREBASE_APP_ID=your_app_id_here
-
Start the development server
npm run dev
-
Open your browser
Navigate to
http://localhost:5173
- Create a Firebase project at console.firebase.google.com
- Enable Email/Password Authentication
- Create demo users with emails:
- Copy your Firebase config to
.env
ZenSoar implements role-based access control with three distinct roles:
| Role | Permissions | Dashboard Features |
|---|---|---|
| 👨💼 Admin | Full system access | User management, analytics, system settings, overview statistics |
| 🔬 Lab Scientist | Test management & results entry | Assigned tests, result entry, pending reviews, quality control |
| 📋 Receptionist | Patient & appointment management | Patient registration, scheduling, billing, contact management |
Each role has a dedicated dashboard with tailored functionality and access controls enforced at the route level.
- ✓ Role-based authentication with Firebase
- ✓ Responsive dashboards for all three roles
- ✓ Mock data infrastructure
- ✓ Interactive analytics with charts
- ✓ System settings panel
- ✓ User management interface
- Dark mode with theme persistence
- Loading states & skeleton screens
- Form validation with error handling
- Keyboard shortcuts for quick actions
- Optimized rendering with React.memo
- Backend integration (Firebase Firestore or REST API)
- Bulk operations with Excel/PDF export
- Advanced search and filtering
- Virtual scrolling for large datasets
- Audit trail for compliance logging
- Real data persistence
- WebSocket notifications for test results
- Multi-user editing with live updates
- Appointment calendar with drag-and-drop
- Real-time patient status updates
- Predictive analytics for lab operations
- Automated quality control workflows
- Custom BI dashboard builder
- Machine learning for test result patterns
- Unit tests with Jest/Vitest
- Integration tests with React Testing Library
- E2E tests with Playwright/Cypress
- Accessibility compliance (WCAG 2.1)
Contributions are welcome! Please see CONTRIBUTING.md for guidelines.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Kachi
- GitHub: @yourusername
- Live Demo: zen-soar-uadq.vercel.app
- Inspired by real-world laboratory information management systems (LIMS)
- Built as a demonstration of modern React architecture and best practices
- UI design based on Material Design principles
This is a demo/portfolio project with shared demo credentials. Do not use for production or store any sensitive/real patient data. The application uses mock data and is intended for demonstration purposes only.
Made with ❤️ by Kachi