Updating Blitsy's Front-End

From UX updates to converting an Angular v1.3 application to React

Updating Blitsy's Front-End

When I first joined Blitsy, the front end application was running on a strange mix of Angular v1.3 and jQuery. The style and js files were a bit disorganized and the code itself would jump between the standard Angular directives and random bits of jQuery. Needless to say, this affected the DOM heavily; Load times were 6-7+ seconds per page, errors occurred often, and trying to fix an error would result in an error elsewhere. The long game early on was to eventually do a front-end overhaul, and this past year I was finally able to tackle this large project.

Angular v1.3 & jQuery version of Blitsy (~2016)

Initially the idea was to use Angular v2+ and completely remove jQuery. Removing jQuery was the first (and easiest) step, however, Angular 2 didn't pan out. Converting the front-end into a Single Page Application (SPA) would have required major updates to the backend as well, something that just wasn't feasible at the time. Blitsy's stack is pretty intricate, so the decision immediately shifted to the use of React; React allowed me to create more modular pieces that I was able to drop into different pages. The added benefits were load times, which were extremely fast, and the DOM became much more responsive.

Updated React version of Blitsy
Search & Product Page Views (React)
Product Details with Add To Cart that follows user (React)
Shopping Process - including user sign in/register from Cart (React)