Stock

Introduction

The "Stock" project aims to develop a mobile-friendly web application designed for barcode-based inventory and data collection. This application will facilitate efficient inventory management through barcode scanning, data matching with Excel files, data storage, and export functionalities, all within a clean, mobile-first user interface.

System Overview

The Stock application will leverage device cameras for barcode scanning, support data matching with uploaded Excel files, and provide robust data storage and export capabilities. The application is designed to be intuitive and efficient, catering to users who need to manage inventory seamlessly on mobile devices.

Functional Requirements as Story Points

• As a User, I should be able to use the device camera to scan barcodes in common formats such as EAN-13, UPC-A, Code 128, and QR.
• As a User, I should be able to use a "multiple scan" mode to continue scanning items without extra taps.
• As a User, I should see a running count of items scanned in the current session.
• As a User, I should be able to manually enter a barcode number if the camera cannot read it.
• As a User, I should be able to upload an Excel file (.xlsx/.csv) containing a master list of barcodes and associated data.
• As a User, I should be able to see details of a scanned barcode by matching it with the uploaded Excel file.
• As a User, I should be able to flag a scanned barcode as "unknown" if it isn't found in the Excel file and add details manually.
• As a User, I should be able to store all scanned entries in a session/log table with details like barcode, product info, timestamp, and quantity.
• As a User, I should be able to edit or delete individual scanned entries.
• As a User, I should be able to persist data across sessions using local storage or a simple backend.
• As a User, I should be able to export the scan log as an Excel (.xlsx) or CSV file.
• As a User, I should be able to share the exported file via a share sheet, email, or download link.
• As a User, I should be able to optionally share a summary of total items and total value as text.
• As a User, I should experience a clean, mobile-first interface with a large scan button, live camera preview, and a scrollable list of scanned items.
• As a User, I should receive clear success/error feedback after each scan (green flash for match, red for unknown).

User Personas

• Inventory Manager: Responsible for overseeing inventory processes, ensuring data accuracy, and managing stock levels.
• Warehouse Staff: Engages in day-to-day scanning and data entry tasks, requiring a straightforward and efficient interface.
• Data Analyst: Analyzes inventory data for trends and discrepancies, requiring export and data sharing functionalities.

Core User Flows

1. Barcode Scanning and Data Matching:

   • User opens the app -> selects scan mode -> scans barcode -> app matches barcode with Excel data -> displays product details or flags as unknown.

2. Data Storage and Management:

   • User scans items -> entries are logged with details -> user edits/deletes entries as needed -> data persists across sessions.

3. Export and Sharing:

   • User completes scanning session -> exports log as Excel/CSV -> shares file via email/download link -> optionally shares summary as text.

Visuals Colors and Theme

• primary: #1E90FF (Dodger Blue)
• primary_light: #63B8FF (Light Sky Blue)
• secondary: #FF6347 (Tomato)
• accent: #32CD32 (Lime Green)
• highlight: #FFD700 (Gold)
• bg: #F5F5F5 (White Smoke)
• surface: rgba(255, 255, 255, 0.9)
• text: #333333 (Dark Charcoal)
• text_muted: #777777 (Gray)
• border: rgba(0, 0, 0, 0.1)

Signature Design Concept

The Stock application will feature an interactive "Barcode Galaxy" on the landing page. Users will see a dynamic, animated galaxy of barcodes swirling around a central inventory hub. Each barcode is a clickable star that, when selected, expands to show product details and stock levels. The galaxy will be built using motion/react for smooth animations and transitions. As users hover over different barcodes, the galaxy will subtly shift, highlighting connections between related products. This interactive experience will make inventory management visually engaging and intuitive.

Landing Hero Motion Brief

The hero section will depict a seamless transformation of scanned barcodes into organized inventory data. As users scan barcodes, they will see a visual representation of data flowing into a central hub, symbolizing efficient inventory management. The animation will loop every 10 seconds, showing barcodes entering the hub and transforming into organized data. This will be achieved using motion/react for fluid animations and responsive interactions.

Interaction Model & Motion Direction

• Intended Interaction Model: Animated
• The landing page will feature moderate scroll-triggered reveals and hover transitions, enhancing user engagement without overwhelming them.
• Internal pages will maintain a static layout for clarity and ease of use.

Non-Functional Requirements

• The application must be responsive and function seamlessly on various mobile devices.
• Ensure data security and privacy for all stored and shared information.
• The application should perform efficiently, with minimal lag during barcode scanning and data processing.

Tech Stack

• Frontend: React for Web
• Backend: FastAPI
• Database: MySQL or MariaDB
• Local Orchestration: Docker, docker-compose

Assumptions and Constraints

• Users will have devices with cameras capable of barcode scanning.
• The application will primarily be used in environments with stable internet connectivity.
• The system will handle a moderate volume of data, suitable for small to medium-sized businesses.

Glossary

• Barcode: A machine-readable code representing data about the item it is attached to.
• SKU: Stock Keeping Unit, a unique identifier for each product.
• Excel File: A spreadsheet file format used for data organization and analysis.
• Session/Log Table: A record of scanned entries during a session.
• Local Storage: A method of storing data locally on a user's device.