St. Mary's Old vs. New

Technologies Used: Laravel, Livewire, Tailwind CSS, Alpine.js

Overview

In this project, I updated the old website to be more reactive, with updated features and interface. Below, you can see a side-by-side comparison showcasing the improvements in design, functionality, and usability. Many features were added upon request, the code was simplified greatly, and overall performance was improved.

The home page is a kiosk style display that auto updates data when edited in the back-end, as well as rotates displays based on specified timers.

Image comparison

Before

Old pages feature unscaled elements that are hard to see on larger displays.

Old pages displayed when there were no entries to display.

Images table missed needed features.

Old table displayed all items at the same time. Lacked pagination, sorting, and other quality of life features.

After

Added proper scaling and increased visibility as per request of users.

Added option to add multiple entries at the same time.

Reworked entire table display to incorporate search, pagination, bulk actions, and to enable entries with a single click.

Close-up of table headers.

Not visible in screenshot, but added auto-scrolling for pages that featured large sets of entries.

Added a new announcements section.

Added a settings page to hide/display different components, as well as gave the ability to set timers for components. Also added a fallback in case no components are enabled.

Updated images to have their own individual timers for the slideshow.