Time Tracker

Preface

A vinyl fencing company needed a simple way to track inventory coming in and out of the warehouse. They wanted to be able to scan the vendor supplied bar codes to enter the item into inventory. Then they needed a way to look up the items in the inventory. I created an interface pre-programmed for the different types of items that came through the warehouse. I also created a filtering system that syncs the url with the active filters. This gives the ability to easily share links that include the filters.

Technical Decisions

I made the decision to build a frontend as a SPA that communicates with a separate backend API. The backend is using Laravel. Laravel is one of the most complete frameworks available. Inspired by Rails but built using PHP, it is easy for a single developer to build full stack applications.

The frontend is a vite SPA written using vue.js. I like vite better than laravel mix or webpack in general. It's fast and is easy to configure. The performance of Vue bests most frameworks and the reactivity makes state management a breeze. The ui is Bootstrap 5 which has utility classes as well as component classes. Bootstrap has made itself framework-agnostic and was easy to integrate into my vite + vue workflow.

I'm using Docker to deploy the frontend and backend to an ubuntu server. There is a traefik proxy controlling access to the containers. I am using nginx behind the traefik proxy, so I can run both applications from the same domain. That can be done through Traefik, but having an NGINX container available makes the application more portable.