Tracking Warehouse Inventory with Laravel, Vue.js, and Barcode Scanning

Github Repo

Preface

A vinyl fencing company needed a simple system to track warehouse inventory. Requirements included scanning vendor barcodes to receive items, looking up inventory, filtering with shareable URL-synced links, and a pre-programmed interface for different item types.

Technical Decisions

Architecture

I chose a decoupled architecture: a Vue.js SPA frontend communicating with a Laravel API backend.

Backend

Laravel provides a complete, robust framework. Inspired by Rails but built on PHP, it enables a single developer to build full-stack applications efficiently.

Frontend

The frontend uses Vue.js and Vite.

• Vite: Faster and easier to configure than Laravel Mix or Webpack.
• Vue.js: Excellent performance and reactive state management.
• UI: Bootstrap 5, which integrates well with Vite + Vue and offers utility and component classes.

Deployment

I use Docker to deploy both frontend and backend containers to an Ubuntu server. A Traefik proxy manages access, with NGINX behind it to serve both applications from the same domain. While Traefik can handle this, the NGINX container improves portability.