A mobile-first web app for cataloging and retrieving barcoded reagent bottles in a laboratory setting.
Small barcoded bottles can only be used for a single reagent — once assigned, they cannot be reused for a different reagent. Partially used bottles are stored and reused when the same reagent is needed again. Over time this leads to a large accumulation of bottles that are difficult to locate quickly.
BottleTrack lets you:
- Catalog each bottle by scanning its barcode, with reagent name, category, storage location, lot number, and remaining volume
- Find bottles instantly by searching reagent name, barcode, or location
- Verify the correct bottle before use (search reagent → scan physical barcode to confirm it matches)
- Identify an unknown bottle instantly by scanning its barcode
- Track volume with a visual indicator and low-volume alerts
- 📷 Camera barcode scanning (supports Code 128, QR, EAN, and most common formats)
- 🔬 Reagent-first workflow: search by reagent name → confirm physical bottle by scan
- 📦 Barcode-first workflow: scan any bottle → instantly see what reagent it contains
- 💧 Volume tracking with color-coded indicators (OK / Mid / Low)
- 🗂 Category filtering and full-text search
- 📊 Summary dashboard with low-volume alerts
- 🌙 Dark mode support
- 💾 All data stored locally on the device (no server, no account needed)
- Go to the hosted URL (see below) in Safari (iPhone) or Chrome (Android)
- Tap Share → Add to Home Screen for an app-like experience
This is a single self-contained HTML file with no build step required.
- Rename
index.htmlif needed - Deploy to any static hosting service:
- GitHub Pages — push to a repo, enable Pages in Settings
- Netlify Drop — drag the folder to netlify.com/drop
- Any static file host
Just open index.html in any modern browser. No server needed.
Note: Camera barcode scanning requires HTTPS or localhost. It will not work over plain HTTP.
All bottle data is stored in the browser's localStorage on the device. No data is sent to any server. Each device maintains its own independent catalog — if you want to share a catalog across devices or with colleagues, you would need to add a backend (not currently implemented).
- Vanilla HTML, CSS, and JavaScript — no framework, no build tools
- ZXing browser barcode scanning library (Apache 2.0)
- DM Sans & DM Mono via Google Fonts (SIL Open Font License)
Barcode scanning powered by ZXing-JS, licensed under the Apache License 2.0.
MIT License — see LICENSE for details.
Issues and pull requests welcome. Some areas that could be extended:
- Export / import catalog as CSV
- Experiment usage log (track which experiment used how much of which bottle)
- Expiry date tracking and alerts
- Multi-device sync via a backend or cloud storage
- PWA manifest for better home screen installation