Virtual Shelf System

The Virtual Shelf System enables Hermes to track the location of his inventory remotely and streamline shipping processes. By leveraging barcode scanning, Google Sheets integration, and tools like Next.js and Trello, Hermes can efficiently pair products with shelf positions and share coordinates for seamless order fulfillment.

One of 4 double sided shelves.

The Problem

Hermes runs a business out of his parent’s home and needs a way for his dad to find the correct product to pull off the shelf and ship to customers while Hermes is at college.

The Solution

Create a “virtual shelf” system that allows Hermes to view the location of every product in his inventory so he can share those coordinates with his dad on shipment day.

How it Works

Each slot on the shelf has a barcode. Scan the shelf’s barcode, then scan the product’s barcode to pair the two together and designate its location on the shelf. Updates can be viewed and edited in Google Sheets. When a product needs to be pulled off the shelf and shipped to a customer, Hermes uses the virtual shelf to locate the item and shares the coordinates with his dad (Shelf 1, Row 4, Column C).

Features

Scan Items Onto the Shelf

Add products to shelf by scanning the shelf’s barcode then scanning the product’s barcode.

Selecting an available slot on the shelf.

Successfully adding a product to the shelf

View on Google Sheets

Each shelf is updated in real time and can be viewed and edited in Google Sheets.

Viewing Shelf 2 in Google Sheets

Locate Product Using QR Codes

Use the QR code reader to scan shipment labels and quickly locate the product that needs to be shipped.

Using the QR code reader to find product’s location on the inventory shelf by scanning the shipment label

Challenges I Faced

Gravity

Each shelf can stack two products on top of each other. A challenge I faced was dealing with scenarios where the bottom position is removed, leaving behind a floating top positioned product. I needed a way to detect this and automatically shift the top product down. I created this function to solve that issue.

function findGravityIssues(rows) {
  const issues = rows.filter((row) => {
    if (row?.Location?.includes('Top')) {
      const bottomLocation = row?.Location?.replace('Top', 'Bottom');
      return !rows.some((r) => r?.Location === bottomLocation);
    }
    return false;
  });

  return issues;
}