Product Selection Plugin Revamp

Overview

Role
Frontend Developer
Company
TechnologyAdvice
Tech Stack
Vue.js, WordPress, PHP, REST APIs, SCSS

Led a front-end refactor of a custom WordPress plugin that rendered real-time, filterable product listings and reviews across multiple site contexts. The plugin powered dynamic product selectors in blog content, browsable software categories, and individual product pages—built with Vue.js and integrated with internal SaaS APIs.

Key Features

  • Vue.js-Powered Product UI: Delivered a responsive, accessible front-end experience for filtering, searching, and viewing software listings.
  • Shortcode-Driven Embeds: Enabled editors to drop product selectors into blog posts and landing pages using customizable shortcodes.
  • Multi-Use Flexibility: The plugin powered three primary use cases: filterable selectors in editorial posts, a dynamic software category index, and fully detailed individual product pages.
  • Live Data from Internal SaaS: Fetched structured data like reviews, features, and partner offers from an internal API for real-time display.

Challenges & Solutions

  • Unifying Multiple Use Cases: Designed a modular architecture that supported different page types (blog post, category index, product page) without code duplication.
  • Legacy Code Refactor: Rewrote a brittle, outdated plugin codebase into a modular, component-based Vue.js app while maintaining backward compatibility with existing shortcodes.
  • Dynamic Filtering Logic: Built flexible filtering and sorting logic that adapted to varying product datasets, while maintaining fast response times.

Impact

  • Improved User Experience: Delivered a more engaging and interactive experience for site visitors exploring product recommendations.
  • Empowered Editorial Teams: Provided content creators with a powerful but easy-to-use tool that improved content value and increased conversion opportunities.

Sample Screenshots

  • technologyadvice.com browse categories
  • technologyadvice.com product profile
  • technologyadvice.com product selection list filters
  • technologyadvice.com product selection list

This project reflects work I contributed to while employed at TechnologyAdvice. Screenshots shown are of publicly available content and are shared solely for demonstration purposes.