A modern medical laboratory management platform built with React — enabling patients to book tests, view results, and get AI-powered health insights, while giving staff and admins full control over lab operations.
- Sign in with email or identity number
- Two-step registration with medical information (blood type, allergies, chronic diseases, emergency contact, insurance)
- Forgot password flow
Dashboard — Overview of bookings, pending tests, results, and unread alerts.
Test Catalog — Browse and search all available lab tests by category, with discount badges and cart functionality.
Special Offers — View active discounts and promotions across all branches.
Book Appointment — Select a branch, date, and time. Choose between cash payment at branch or secure online payment via Stripe.
Stripe Payment — Integrated Stripe checkout with multi-currency support (USD / ILS).
My Bookings — View all appointments with status (Confirmed / Pending) and payment tracking.
AI Analysis — AI-powered explanations of lab results. Patients can ask questions like "Are my values within normal range?" or "What symptoms should I watch for?"
Admin Dashboard — System-wide overview of bookings, revenue, staff count, patient count, and active branches.
Bookings Management — View and manage all appointments across all branches with status and payment filters.
Test Catalog Management — Add, edit, and activate/deactivate lab tests.
And more: Templates, Reference Ranges, Pricing, Offers, Staff Management, Patient Records, Branches, and Results.
| Technology | Purpose |
|---|---|
| React | UI framework |
| JavaScript (JSX) | Language |
| Tailwind CSS | Styling |
| Axios | API communication |
| Stripe | Payment processing |
| React Router | Navigation |
| Context API | State management |
| CRACO | Build configuration |
src/
├── api/ # Axios API calls
├── components/ # Reusable UI components
├── context/ # Auth context
├── hooks/ # Custom React hooks
├── pages/
│ ├── admin/ # Admin portal pages
│ ├── auth/ # Login, Register, Forgot Password
│ ├── patient/ # Patient portal pages
│ └── staff/ # Staff portal pages
├── styles/ # Global CSS
└── utils/ # Helper functions
- Node.js 18+
- npm or yarn
# Clone the repo
git clone https://github.com/mohz7/elab-frontend.git
cd elab-frontend
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env
# Fill in your API base URL and Stripe public key in .env
# Start the development server
npm startThe app will run at http://localhost:3000
REACT_APP_API_BASE_URL=https://your-backend-url/api
REACT_APP_STRIPE_PUBLIC_KEY=your_stripe_public_key| Role | Access |
|---|---|
| Patient | Dashboard, Tests, Offers, Bookings, Results, AI Analysis, Cart, Profile |
| Staff | Patient Profiles, Bookings, Upload Results, Chats |
| Admin | Full system management — all of the above plus Branches, Staff, Pricing, Templates, Ranges |
- eLab Backend — ASP.NET Core REST API