Orange Materials

1 min read

Revitalize the Orange Materials website, a content delivery system that allows users to download or stream digital materials associated with reThink events or promotions.

Created as Software Engineer at The reThinkGroup, Inc in mid-2019.

About this project

This project is currently the 3rd iteration of a site formerly designed to deliver Orange Conference 2014 digital materials. With the previous iteration in Laravel 5.1, the decision to rewrite in version 6 wasn't taken lightly. The administrative content creation section was streamlined by leveraging Laravel Nova. A complete rewrite gave the flexibility to approach the original specification from a new perspective, with Laravel Nova reducing the technical debt to primarily focus on customer engagement.

There were 2 significant bottlenecks to overcome with the prior version. The first was serving files from Wasabi using the s3fs-fuse filesystem driver and the second, generating a user's content by ownership. To considerably improve streaming and downloads, we leveraged Digital Ocean Spaces with CDN. This allowed us to serve files directly to browsers, reducing almost all support incidents. A user interface redesign allowed user content to leverage MySQL to be more memory-bound versus model operations that were CPU-bound.

Leveraging Vue.js as a single-page application allowed us to split up navigation operations and hit multiple API endpoints versus waiting for a single page return. This reduced page loads from upwards of 6 seconds to milliseconds per call. While there are more individual API calls, leveraging caching strategies would allow for more exceptional user experience.

Technical sheet

Technologies used on this project

  • General concepts

    • UI/UX Design
    • UI/UX Architecture
    • HTML5 – semantic
    • CSS3 – preprocessed with SASS
  • Infrastructure

    • Ubuntu 18.04.3 LTS
    • PHP v7.3.14
    • MariaDB v10.3.21
    • Nginx v1.15.8
    • Redis v5.0.7
  • Application-specific

    • Laravel Framework v6.x
    • Laravel Nova Admin
    • Laravel Telescope
    • TailwindCSS v1.1
    • Lo-Dash v4.17
    • Vue v2.6
    • Vue Router v3.1
    • Continuous Delivery via Gitlab CI and Laravel Forge