Rental System

This rental manager was a fun project but will likely never come to light. At Divrsion, we recently added new games to the PCs and new Xboxes for our customers to play.

One of the challenges was how we kept track of who was supposed to be currently playing. The answer is similar software to how we manage our VR systems. The system we use is a 3rd party that focuses on VR. There were other alternatives, but another idea came to mind.

I wanted to create a proof of concept for a simple system to keep track of rentals. The idea was to have a simple, lightweight service we could access from any device within our building. And so, that is where this project was born.

It needed to:

• Allow us to create players

• Allow us to keep track of rented-out devices & accessories to those players

The Good Stuff

Like most of my projects, this utilizes the TALL (Tailwind, Alpine.js, Laravel, and Livewire) stack. While there may be better options, I love this option because it lets me prototype ideas quickly.

I quickly pulled in the design from another project consignment keeper.

How It Works

A new customer would come in, and we would set them up as a new player within this system. We can then book a rental for that newly created player using the screen below:

I designed this screen for rapid creation. It features a lot of similarities to our other booking system that we've been using for 3+ years.

When we create a rental, it will appear in a list of awaiting rentals.

Once started, a timer would countdown the players remaining time. I built the timer using a custom AlpineJS plugin.

Initially, I thought it might be easiest to use wire:poll, which was true. It was very excessive when multiple timers were running at a single time. There wasn't a reason that JavaScript couldn't parse the time.

The cool thing about the timer is that the borders & text colors change based on the amount of remaining time.

• Orange: 5-10 minutes remaining

• Red: Less than 5 minutes remaining

The colors give us a quick indicator of how much time is remaining on a rental.

We can also manage the rental by adjusting time, marking it as paid, or deleting it.

Thanks to the TALL stack, this project was a total of only a few hours worth of work.