CellBlock is a web-based scheduling system for shared biosafety cabinet (hood) usage in a mammalian cell culture laboratory. It gives every lab member a live view of equipment availability, enforces fair-use rules automatically, and keeps experiment notes attached to each booking — all without spreadsheets or group chats.
It is built for research groups that share multiple hoods across rotating users and need a lightweight, always-available booking interface that runs from any device.
Shared equipment in a cell culture lab is a constant source of scheduling conflicts. Without a system:
- Members have no visibility into who is using which hood and when
- Back-to-back bookings monopolize equipment and block others
- Experiment annotations get lost in notebooks or messaging apps
CellBlock solves this with a real-time weekly calendar, per-hood views, and hard limits on consecutive booking blocks — enforced at the application level, not by convention.
Desktop
Mobile
Users register with their name, institutional email, and a 3-letter lab code. New accounts require admin approval before they can book. Login accepts either email or the 3-letter code.
The main view is a 7-day × 24-hour grid — including nights and weekends, for cell culture runs that require off-hours monitoring. Each hood has its own independent schedule. Users can navigate up to 4 weeks ahead.
| Rule | Details |
|---|---|
| Max 3 consecutive hours | Per user, per hood, per day. Attempting a 4th consecutive slot is rejected |
| Rolling schedule release | Weeks 3 and 4 are locked until the preceding Saturday at 11:00 AM, preventing early monopolization of future slots |
| Admin override | Admin accounts bypass booking locks for urgent or administrative reservations |
Each booking has an attached notes field. Only the booking owner can write or edit notes. Notes are visible to any logged-in user when clicking a slot, supporting transparency across the team.
| Real-time data | Bookings sync through Supabase — changes appear immediately across all sessions |
| Multi-hood | Any number of biosafety cabinets can be added; each has its own independent schedule |
| Role-based access | Admin and regular user roles with different permissions |
| Approval workflow | New registrations require admin approval before access is granted |
| Experiment notes | Per-booking notes visible to the team, editable only by the owner |
| PWA-ready | Installable on Android, iOS, and desktop as a standalone app |
| 24/7 grid | Full 24-hour view supports night shifts and weekend monitoring |
| Responsive | Full sidebar layout on desktop; compact single-column view on mobile |
This instance is configured for the Palomares-Ramírez Group at the Institute of Biotechnology, UNAM, managing five specialized stations:
| Hood | Type |
|---|---|
| Hood 1 | Virus-free |
| Hood 2 | Virus-free |
| Hood 3 | Virus |
| Hood 4 | Insect cells |
| Bacteria Hood | Lab 401 · Bacteria |
Frontend
Backend & data
Deployment
CellBlock/
├── src/
│ ├── config/
│ │ └── lab.config.js ← lab identity, admin contact, booking rules
│ ├── lib/
│ │ └── supabase.js ← Supabase client (single instance)
│ ├── hooks/
│ │ └── useBookings.js ← data fetching + CRUD (hoods, bookings)
│ ├── components/
│ │ ├── BookingCalendar.jsx ← 7-day × 24-hour scheduling grid
│ │ ├── BookingModal.jsx ← booking detail, notes, delete
│ │ ├── LoginScreen.jsx ← auth + registration flow
│ │ └── SupportBox.jsx ← admin contact panel
│ ├── App.jsx ← thin orchestrator (auth state, slot logic)
│ ├── main.jsx ← React entry point
│ └── index.css ← global styles
├── public/ ← static assets
├── screenshots/ ← UI screenshots for this README
├── index.html ← HTML entry point
├── vite.config.js ← Vite + GitHub Pages configuration
├── package.json
└── .env ← Supabase credentials (not committed — see .env.example)
| Table | Key columns |
|---|---|
authorized_users |
id, full_name, email, user_code, password, is_approved, is_admin |
hoods |
id, name |
bookings |
id, hood_id, user_id, user_name, start_time, end_time, notes |
# 1. Clone and install
git clone https://github.com/ebalderasr/CellBlock.git
cd CellBlock
npm install
# 2. Configure Supabase credentials
echo "VITE_SUPABASE_URL=https://your-project.supabase.co" >> .env
echo "VITE_SUPABASE_ANON_KEY=your-anon-key" >> .env
# 3. Start dev server
npm run devnpm run deployEmiliano Balderas Ramírez Bioengineer · PhD Candidate in Biochemical Sciences Instituto de Biotecnología (IBt), UNAM · Grupo Palomares-Ramírez
