pantry-app/pantry
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Week 3: Barcode scanner component with camera access #4

New Issue
Closed
opened 2026-02-08 19:00:59 +00:00 by makiolaj · 0 comments
makiolaj commented 2026-02-08 19:00:59 +00:00
Owner
Copy Link

Phase: Week 3 - Barcode Scanning

Task

Implement barcode scanner using device camera and html5-qrcode library.

Acceptance Criteria

  • Camera permission handling
  • html5-qrcode integrated
  • Detects EAN-13, UPC-A barcodes
  • Scan → barcode value extracted
  • UI feedback (scanning state, success, error)
  • Works on mobile (PWA camera API)
  • Fallback to manual barcode entry
  • Stop scanning when code detected

Technical Details

  • Install html5-qrcode package
  • Create BarcodeScanner.vue component
  • Use facingMode: 'environment' (rear camera)
  • Emit scan event with barcode value
  • Handle errors (no camera, permission denied)

Resources

Estimated Effort

3 days

**Phase:** Week 3 - Barcode Scanning ## Task Implement barcode scanner using device camera and html5-qrcode library. ## Acceptance Criteria - [ ] Camera permission handling - [ ] html5-qrcode integrated - [ ] Detects EAN-13, UPC-A barcodes - [ ] Scan → barcode value extracted - [ ] UI feedback (scanning state, success, error) - [ ] Works on mobile (PWA camera API) - [ ] Fallback to manual barcode entry - [ ] Stop scanning when code detected ## Technical Details - Install html5-qrcode package - Create BarcodeScanner.vue component - Use facingMode: 'environment' (rear camera) - Emit scan event with barcode value - Handle errors (no camera, permission denied) ## Resources - html5-qrcode docs: https://github.com/mebjas/html5-qrcode - docs/ARCHITECTURE.md (barcode flow) ## Estimated Effort 3 days
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
backend
Backend (Supabase/Edge Functions)
 database
Database (Schema/Migrations)
 frontend
Frontend (Nuxt/Vue)
 infrastructure
Infrastructure (Docker/Coolify)
 mvp
Required for MVP (v0.1)
 week-1
Week 1: Foundation
 week-2
Week 2: Core Inventory
 week-3
Week 3: Barcode Scanning
 week-4
Week 4: Tag System
 week-5
Week 5: PWA & Offline
 week-6
Week 6: Deployment
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
makiolaj
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: pantry-app/pantry#4
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?