40 tools migrated, and a robot to check them

I helped move the custom styles on the main WRDS web application from Bootstrap 3 to Bootstrap 4, and converted over 40 classroom tools in the process. Each one also got a design refresh and made mobile responsive rather than simply translated.

I refactored and cleaned up the SCSS as I went, because a migration is the one moment when touching every file is already justified.

The part that made it tractable

Manually checking 40 tools across multiple viewports is where this kind of project quietly dies. I built a screenshot tool in Python and Selenium to capture every tool at every breakpoint, which turned QA from a week of clicking into a diff you could actually look at.

I extended Bootstrap’s built-in mixins so our components could carry Wharton colors properly instead of fighting the framework, and I wrote the style guide documenting the custom WRDS components on the primary application.