ProVia

Planted: 2023

Writing in progress.

Revamping the ProVia website Vision Board and Where to Buy features.

Stack

Server Language: PHP

Client Language: JavaScript

Web framework: WordPress

CSS framework: Tailwind

Database: MySQL

Auth: Ultimate Member

ProVia manufactures professional-class doors, windows, vinyl-siding, manufactured stone, and metal roofing for residential and non-residential use.

ProVia wanted a more easy-to-use CMS for their marketing website that showcases their products and a better Vision Board and Where to Buy implementation.

I had never worked with direct WordPress development before, so I had a lot to learn.

Design Center: Vision Board

Across the website, account members can favorite images. The vision board allows members to create boards with their favorite images in a masonry grid with item actions

• Edit selection
• Edit position
• Edit ratio
• Move left
• Move right
• Insert left
• Insert right
• Remove

I built the vision board with plain JavaScript, Tailwind, and custom WordPress Data API endpoints. I had to patch html2canvas to save the Vision Board as an image.

Dealer Locations: Where to Buy

ProVia wanted to make it easier for customers to find where to buy their products. I built a custom WordPress Data API endpoint to return a list of ProVia dealers. Customers can filter for dealers that provide specific product categories, dealers that have certain features (e.g., visualization), and a zipcode. I used Alpine.js to handle the state management of the search form and results. The map is built with Google Maps and the Google Maps JavaScript API.