A complete Point of Sale (POS) system for blood testing laboratories with Firebase backend and automatic deployment. Features patient management, blood test catalog, billing/checkups, user management, and professional PDF invoice generation.
- 🔐 User Authentication - Firebase email/password authentication
- 👥 Patient Management - Complete CRUD operations
- 🧬 Blood Tests Catalog - Manage test types, prices, and rules
- 📋 Checkup/Billing - Create bills with multiple tests
- 📄 PDF Generation - Professional invoice generation
- 👤 User Management - Create and manage staff users
- 📊 Dashboard - Analytics and statistics
- 🎨 Responsive Design - Works on all devices
- ☁️ Cloud Database - Firestore for real-time data
- 🚀 Auto-Deployment - GitHub Actions to Firebase Hosting
- 📦 Redux Thunk - Async state management
- 🔄 Real-time Updates - Live data synchronization
- 🛡️ Secure - Firebase Authentication & Firestore Rules
- 📱 Mobile-First - Bootstrap responsive design
- Node.js 18+ and npm
- Firebase account (free tier works)
- Git
- Clone the repository
git clone <your-repo-url>
cd Blood-Lab-Manager- Install dependencies
npm install-
Set up Firebase (Detailed guide: FIREBASE_SETUP.md)
- Create Firebase project
- Enable Authentication (Email/Password)
- Enable Firestore Database
- Get configuration values
-
Configure environment
# Copy the example file
cp .env.example .env
# Edit .env with your Firebase config
VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
VITE_FIREBASE_APP_ID=your-app-id
VITE_FIREBASE_MEASUREMENT_ID=your-measurement-id-
Create initial admin user
- Follow instructions in docs/FIRST_USER_SETUP.md
-
Run development server
npm run dev- Open in browser
http://localhost:5173
All documentation is in the docs folder:
| Document | Description |
|---|---|
| Firebase Setup | Complete Firebase setup guide |
| Deployment Guide | Deployment overview and guide |
| GitHub Actions Setup | CI/CD auto-deployment setup |
| GitHub Secrets Setup | |
| First User Setup | Create your initial admin user |
| Version Guide | Version management and releases |
| Implementation Summary | Technical implementation details |
| Remaining Updates | Pending updates and improvements |
| Claude.md | Project structure and conventions |
Blood-Lab-Manager/
├── src/
│ ├── components/
│ │ ├── common/ # Reusable UI components
│ │ ├── Navbar.jsx # Top navigation
│ │ ├── Sidebar.jsx # Side navigation
│ │ ├── Footer.jsx # Footer component
│ │ └── ProtectedRoute.jsx # Route authentication
│ ├── config/
│ │ └── firebase.js # Firebase initialization
│ ├── pages/ # Page components
│ │ ├── Home.jsx
│ │ ├── Login.jsx
│ │ ├── Dashboard.jsx
│ │ ├── Patients.jsx
│ │ ├── Tests.jsx
│ │ ├── Checkups.jsx
│ │ └── Users.jsx
│ ├── services/ # Business logic
│ │ ├── authService.js # Authentication operations
│ │ └── firestoreService.js # Database operations
│ ├── store/ # Redux state
│ │ ├── store.js
│ │ ├── authSlice.js
│ │ ├── patientsSlice.js
│ │ ├── testsSlice.js
│ │ ├── checkupsSlice.js
│ │ └── usersSlice.js
│ ├── styles/ # CSS files
│ │ ├── sidebar.css
│ │ ├── navbar.css
│ │ └── footer.css
│ ├── utils/
│ │ └── pdfGenerator.js # PDF invoice generation
│ ├── App.jsx # Main app component
│ └── main.jsx # Entry point
├── .github/
│ └── workflows/
│ └── firebase-deploy.yml # Auto-deployment workflow
├── firebase.json # Firebase hosting config
├── .firebaserc # Firebase project config
└── .env.example # Environment template
| Category | Technology |
|---|---|
| Frontend | React 19.1.1 |
| Build Tool | Vite 7.1.7 |
| State Management | Redux Toolkit 2.9.0 |
| Routing | React Router DOM 7.9.4 |
| UI Framework | React Bootstrap 2.10.10 + Bootstrap 5.3.8 |
| Icons | React Icons 5.5.0 |
| jsPDF 3.0.3 + jspdf-autotable 5.0.2 | |
| Backend | Firebase 12.4.0 (Auth + Firestore) |
| Hosting | Firebase Hosting |
| CI/CD | GitHub Actions |
- Authentication: Secure user login with email/password
- Firestore: NoSQL cloud database for all app data
- Hosting: Fast, secure web hosting with global CDN
- Slices: Modular state management
- Thunks: Async operations (API calls)
- Immer: Immutable state updates made easy
- Components: Pre-built UI components
- Responsive: Mobile-first grid system
- Theming: Consistent design system
Secure authentication with Firebase
Analytics and key metrics at a glance
Complete patient management system
Create bills, generate PDF invoices
# Build the app
npm run build
# Deploy to Firebase
firebase deploy --only hosting⚠️ IMPORTANT: Set up GitHub Secrets first (see docs/GITHUB_SECRETS_SETUP.md)- Push to
mainbranch - Automatically builds and deploys!
git add .
git commit -m "feat: add new feature"
git push origin main
# 🚀 Deploys automatically!| Command | Description |
|---|---|
npm run dev |
Start development server (http://localhost:5173) |
npm run build |
Build for production (outputs to dist/) |
npm run preview |
Preview production build locally |
npm run lint |
Run ESLint for code quality |
- API keys in
.envare safe to expose publicly - Th DE7E ey identify your Firebase project only
- Security comes from Firestore Rules and Authentication
Update in Firebase Console for production:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Only authenticated users can access data
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}- ✅
.envis in.gitignore(never commit it) - ✅ Use GitHub Secrets for CI/CD
- ✅ Rotate Firebase service accounts periodically
- ✅ Enable Firebase App Check for production
- ✅ Monitor usage in Firebase Console
{
uid: "firebase-auth-uid",
username: "John Doe",
email: "john@example.com",
mobile: "1234567890",
role: "user",
createdAt: "2025-01-11T..."
}{
id: "auto-id",
name: "Patient Name",
age: 30,
gender: "Male",
mobile: "1234567890",
address: "123 Main St",
email: "patient@example.com"
}{
id: "auto-id",
name: "Complete Blood Count",
price: 500,
details: "Measures blood components",
rules: "Fasting not required"
}{
id: "auto-id",
patientId: "patient-id",
tests: [
{ id: "test1", name: "CBC", price: 500 }
],
total: 500,
notes: "Follow-up required",
timestamp: "2025-01-11T10:30:00Z"
}Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
"Firebase not initialized"
- Verify
.envfile exists with all variables - Ensure variables start with
VITE_ - Restart dev server
"Permission denied" in Firestore
- Update Firestore Security Rules
- Ensure user is authenticated
"User not found" after login
- Create user profile in Firestore
- Document ID must match Auth UID
See docs/FIREBASE_SETUP.md for more troubleshooting help.
Problem: Live app bypasses login page and opens dashboard directly Cause: GitHub Secrets not configured
Solution:
- Go to: https://github.com/ThanuMahee12/Blood-Lab-Manager/settings/secrets/actions
- Add all 7 Firebase secrets (see docs/GITHUB_SECRETS_SETUP.md)
- Re-run failed GitHub Actions workflow
- Wait 2-3 minutes for redeployment
Quick Fix: Add these secrets to GitHub:
VITE_FIREBASE_API_KEYVITE_FIREBASE_AUTH_DOMAINVITE_FIREBASE_PROJECT_IDVITE_FIREBASE_STORAGE_BUCKETVITE_FIREBASE_MESSAGING_SENDER_IDVITE_FIREBASE_APP_IDVITE_FIREBASE_MEASUREMENT_ID
- Documentation: Check the docs folder
- Issues: Open a GitHub issue
- Firebase: https://firebase.google.com/support
- React: https://react.dev/learn
- React Team for the amazing framework
- Firebase for backend infrastructure
- Bootstrap team for the UI framework
- Redux Toolkit for state management
- Add more blood test types
- Implement appointment scheduling
- Add inventory management
- Email invoice delivery
- SMS notifications
- Advanced analytics
- Multi-language support
- Dark mode theme
If you find this project useful, please consider giving it a star! ⭐
Comprehensive guides and documentation are available in the docs/ folder:
- FIREBASE_SETUP.md - Complete Firebase project setup guide
- FIRST_USER_SETUP.md - Creating your first admin user
- SUPERADMIN_SETUP.md - Upgrade account to SuperAdmin
- GITHUB_SECRETS_SETUP.md - Configure GitHub Actions secrets
- GITHUB_ACTIONS_SETUP.md - Setup automatic deployment
- RBAC_IMPLEMENTATION.md - Role-Based Access Control system
- 4 user roles: User, Editor, Maintainer, SuperAdmin
- Permission matrix and approval workflows
- Auto serial number generation for checkups
- DEPLOYMENT_GUIDE.md - Production deployment guide
- VERSION_GUIDE.md - Version history and updates
- IMPLEMENTATION_SUMMARY.md - Feature implementation summary
- REMAINING_UPDATES.md - Planned features and updates
- CLAUDE.md - Development guidelines and project structure for AI assistants
Built with ❤️ using React, Firebase, and modern web technologies