ExpressCDN

Drag and drop image / CSS / JS files optimizer ❤️

Context

ExpressCDN is one of the projects we’ve been working on in Blinkloader, a small app meant to drive traffic to the platform. I worked together with our backend developer, Yarik Bratashchuk, and under the guidance of our lead frontend developer, Max Makarochkin. My responsibilities were to implement the UI, estimate the data structure for the API, and deliver consistent user experience using Preact.js.

After the initial working prototype was finished, we all worked together on integrating the app into the website as needed.

Overview

Problems and Solutions

  • No Dropzone plugin for preact.js, the existing one was a pull request and is not working as a plugin -> solved by just taking the code from the pull request;
  • Scroll to file when the file is dropped -> use window.scrollTo and refs to target a specific element;
  • File size to display research -> use 1024 base to be more accurate;
  • Submitting the files -> convert to Base64 string;
  • Collaborating with the backend engineer -> discuss the API, create the sample data structure to be used for API 
  • Loading state/responsiveness -> design and implement UI variations
  • Integrate copying functionality -> use Clipboard.js as the existing react plugin was not applicable for Preact.js app.

Overall result

Working and easy to use and understand app that delivers links to optimized files. The users can use those links in the website right away with the HTML tags we provide or download the files.