The Orange Materials website is a platform for delivering digital materials to users, such as videos, documents, or images associated with reThink events or promotions. The updated version addresses previous technical issues, such as bottlenecks in serving files and generating user content, and seeks to streamline the content creation process and enhance customer engagement.
Created as a Senior Software Engineer at The reThinkGroup, Inc.
For this project, my coworker and I were responsible for updating the website that delivers digital materials for the Orange Conference 2014. We chose to rewrite the site in Laravel 6 to leverage Laravel Nova which allowed us to streamline administrative content creation and improve customer engagement by reducing technical debt.
Two main challenges needed addressing from the previous version of the website. First,
we improved the performance of file streaming and downloads by using Digital Ocean Spaces
with CDN instead of the
s3fs-fuse filesystem driver connected to Wasabi. This allowed
us to serve files directly to browsers and significantly reduce support incidents. Second,
a user interface redesign allowed content to leverage MySQL to be more memory-bound versus
model operations that were CPU-bound.
To improve navigation and decrease page load times, we built a single-page application using Vue.js that hit multiple API endpoints simultaneously. This reduced page load times from over 6 seconds to milliseconds per call. While the number of individual API calls increased, as a result, implementing caching strategies would further enhance the user experience.
Technologies used on this project
Login page when we haven't authenticated yet.
Landing page after authenticating to instruct users to unlock and navigate to their purchased content.
This is the
FINAL Audio Files category page for the
NEXT 2020 event. This showcases the streaming audio player.
This is the
FLORIDA category page for the
Camp Kid Jam event. This showcases the streaming video player.
Viewing, filtering, and sorting the listing of event buckets.
Viewing the event bucket details as well as create, edit, view, filter and sort the bucket's categories information.
NEXT 2020 bucket category details as well as create, edit, view,
filter and sort the category's materials information.
FINAL Audio Files category material details as well as
create, edit, view, filter and sort the material's assets information.
Digital Experience Guide code type details. This screen links all the associated
categories to a particular code type as codes may unlock content across multiple or even all event buckets.
Viewing, filtering, and sorting the listing of users.