Master Demo's Admin Site

Blog post metadata

Custom built administration web-app developed for managing Master Demolition Inc's projects, images, videos, blog posts, and web page content.

Blog post manager

Custom built administration web-app developed for managing Master Demolition Inc's projects, images, videos, blog posts, and web page content. Every aspect of the demolition company's web presence could be managed from this once place. As the public sites architecture became larger and more abstracted it became necessary for a management system as editing json data by hand was becoming unreasonable. In addition the creation of this web app ensured the sites longevity well beyond my time on the project.

The admin dashboard consisted of a number of cards for different sections of the site, as well as some actionable items on each one. Of all the manageable sections included: blogs, images, locations, webpages, projects, slideshows, and tools.

Data flow chart

This image served as a guide for me while building the site. It helped me keep track of the ways in which data would flow throughout the different sections and how each reference file would need to be altered when one particular item was edited. While as an overview it may look like a confusing mess, and hey it is, but following a single arrow through the chart could quickly tell me all the info I needed to continue with the development.

Of course the site needed to be locked away from the outside world. Users would need to log in with Google Oauth2.0 and match a whitelist of tokens in order to gain access.

Many areas of the admin area looked quite similar, with a number of text fields filling in data and labeling the whole thing in the library. Blogs are an accessible example to give of this flow. After clicking on the blog card in the dashboard they would be taken to the list view seen in the first photo here. This would display all published posts, and clicking on one would give the ability to edit it. Further down the page was a similar list for draft posts and a section for restoring deleted posts. Once inside users have the ability to update titles, descriptions, featured images, and page content.

Blog post metadata

At the bottom of the edit page is the meta data section, where dates, keywords, and visibility could be changed. Additionally you could assign a particular related service, which would include the post for consideration to be featured on that relevant service page on the public site. A script on the site would ultimately decided whether or not to feature the post by taking in a number of additional factors at runtime.

The forms themselves are what make up the majority of the content in this web app and so a good deal of time went into optimizing their look and performance. Pulling heavily from material design with a few custom additions to fit the branding led to a minimal look with a number of custom elements. The select box design for example is entirely custom built giving consistent visual feel across all the form elements.

The image library was one of the key points in the entire site. As seen in the flow chart at the beginning, editing an image would require an change to nearly every reference file and vice versa. Loading the image library ran a nearly identical script as the one on MDI's public site, but would include images marked as private as well. The loading of images took in one reference file which would calculate the number of image containers to create and the number of items needed to fill "above the fold". Once everything was calculated it would send off ajax requests for the images and populate them with dense src-sets keeping load times to a minimum.

Once the library was loaded, the admin would be able to click on an image to open and edit it. The opening image animation was extensively optimized to be as performant as possible. Calculating the image size, the final full size, and the difference between beforehand lent to the insertion of a new absolutely positioned element that could be dropped in right on top of the original image. And then 2d transformed into its final position.

After opening up an image you're presented with a variety of metadata to update for the image. The caption and image file itself are expected and placed right up top. Additional info flows down below including alt text, location, tools/equipment pictured, and designating which project it was a part of. Finally all of that information gets processed and an updated json file is produced/updated server side. In this gif here you can see the user interface as well as a look under the hood at the data files being created.


Keywords: admin, custom cms, database management, demolition, estimating tools, master demolition inc., notifications, offline-first, pwa, quote calculator, web-app