Cabela's GunHub

webpack  javascript  angular  redux  d3  sass

The Cabela’s GunHub kiosk was designed to be a visually impressive and highly interactive data driven experience to sit within the firearms department in their stores. The kiosk allows Cabela’s outfitters and customers to quickly find and compare products, view detailed product information, and even interact with a sampling of products hands on.

The user facing experience is built as a full screen web app, running via Chrome’s kiosk mode. To support offline usage as much as possible, the app is served via a local web server. New builds can be created by Jenkins and sent to the kiosk device via Octopus deployment.

We made the decision to go with Angular 1.6 as our front end framework, taking full advantage of it’s components and their lifecycle hooks. We also brought in Redux via ngRedux to manage application state and used SASS (SCSS) as our style preprocessor. Additional libraries include D3 for building out our data driven, complex SVGs and animations and HammerJS to handle advanced touch interactions.

Product detail view kiosk screenshot.
D3 was brought in to handle complex data driven SVGs and animations. In this case, rendering the connected nodes which animate to center on tap.
Product comparison view kiosk screenshot.
HammerJS was used to handle advanced touch interactions. We built a custom drag and drop solution with Hammer events and Angular directives for the compare page.

The application goes all in on ES6 including modules and classes for our components and services. We used Webpack to bundle our modules and included eslint extending airbnb as part of the build process to ensure consistent code style. The application also takes advantage of javascript web workers to offload heavy tasks like filtering into a separate thread.

The product listing page allows sorting of a large, heavy data set in an instant by using web workers and redux eventing.

The kiosk has been rolled out to two Cabela’s store locations so far with more on the way. Both outfitter and user feedback has been very positive.

Cabelas demo