Reaction Commerce in the Wild: A Corporate Case Study

Project Ricochet is a development agency that works with a wide range of languages and frameworks. Over the past several years we've launched and maintained many e-commerce projects. We've worked with the most well-known open-source platforms like Drupal Commerce, Ubercart, WooCommerce, WP E-commerce, Magento, and have even rolled our own on occasion. We recently came across Reaction Commerce and decided to put it to the test for a rather unique corporate use case. What we discovered was a developer experience unlike any of our past e-commerce projects. Today, I'd like to share a high-level overview of the project from a developer's point of view.

Background

The client is a Fortune 10 company with several custom Meteor apps we've built for them over the years to aid in business process improvement.
One of the apps is a department software provisioning and subscription tool that allows employees to request software they need, track how the software is “paid” for via internal chargebacks to various departments, and lastly help the IT team track department approvals and the multiple steps involved in the provisioning process.

We are big proponents of implementing a minimally viable version of an app first - and with this client, we did just that. Most of the steps still required a human to push the peanut forward, with the app serving as a tool for making sure that nothing got lost or skipped. This alone saved countless human hours per week.

The only downside, however, was that it didn’t allow employees of the organization to self-serve. Rather, they had to get in touch with the department that managed the app, and someone would have to go in and manually add the software request. From there the app would take over, but the manual data entry, albeit small, was not as automated as the client would have liked.

Our objective was simple: provide a way for employees to browse and select the software they need, and let the custom app take over from there - just like shopping online.

While we could have built a simple shop directly in the app, we didn't want to limit ourselves or reinvent the wheel. So, we started our research. We wanted a platform with a modern user experience that was completely extendible. We needed something that could integrate seamlessly with our custom app, preferably in real-time. Right off the bat, our options were limited. The Drupal modules and Wordpress plugins available would require installing and configuring a base CMS as well as designing or purchasing an e-commerce compatible theme. Even then the experience with a PHP platform would have been less modern. From a user's perspective, every click would lead to an entire page refresh. From the developer's perspective, antiquated PHP just isn't as fun as ES6 Javascript. The difference in databases - MySQL vs Mongo - meant that we'd have to design a REST API in our custom app to accept software requests.

Our research pretty quickly led us to Reaction Commerce. Local installation was as simple as a single terminal command. Out-of-the-box Reaction came with a completely modern UI that uses ReactJS and Meteor to provide a completely real-time, no-page-refresh experience. The developer documentation detailed a relatively simple API, which is unheard of in open-source e-commerce. In less than an hour, I had Reaction running locally and enough knowledge of the API to start extending.

User Authentication

Our client required that users authenticate before being able to browse for software. Like we've done with all of our past apps for this client, we decided to authenticate against their Microsoft Active Directory service. Users should be able to log in simply by entering their Microsoft Active Directory username and password.

To solve for this we installed the ActiveDirectory package from NPM and copied over a class we had used in our other apps. From there, we simply implemented a Router.triggers.enter callback, which Reaction provides to allow you to hook into the routing process. The callback function was simple; if the user isn't logged in, redirect them to the custom login form. By using Active Directory we were also able to retrieve metadata about each user, like name, email, roles, and even organizational general ledger information (which we would later use as a form of payment for the internal chargeback payment piece of the application).

Managing Products

It’s important to note that all of the software product information that was available to employees to “purchase” through the Reaction Commerce site was already managed in our custom app. Ideally, the client would not need to keep track of duplicate sets of products across multiple databases, so we wanted our custom app to be able to update the Reaction Commerce product database in an automated fashion. Admins of the app define the available software by entering information like title, versions, pricing rules, and logo.

To keep the custom app as the source of truth, our app connected directly to Reaction's Mongo database and inserted/updated/deleted products as they were updated in the app.
Because Reaction has security measures in place to ensure data integrity, we simply needed to extend Reaction's product schema to allow us to include custom data like software pricing rules. And because both apps use Mongo's file collection capabilities, transferring product images involved only basic collection inserts.

Browsing Products

Once we had products syncing in real-time from our custom app to Reaction, the next step was tweaking the browsing experience. We wanted to display the available versions and price ranges on the grid page below each image in Reaction Commerce. This is where Reaction's powerful collection-based template system came into play. To override any template, you simply make a collection update call and replace a default template name with your own custom version. We did just that - and our main products page was done.

The product detail page was customized heavily. We needed to have a custom React component where the user could enter a couple pieces of information and have a price generated, based on the pricing rules defined in the custom app. We also wanted tabs to display additional information about the software. We simply built our React components and made another collection update call to remove unneeded components - and added ours where we wanted them. By the way, we needed almost no CSS to do this. Reaction Commerce has a well-thought-out UI-based on Bootstrap - the same UI library we've used for all of our apps for this client.

Checkout

Our use case also called for a heavily customized checkout experience. The usual e-commerce experience involves adding one or more products to a cart and entering billing/shipping/payment information during checkout. In our case, we wanted users to order each piece of software separately. For each software request (order), we needed to collect specific additional information in order to provision the software. We also needed the user to be able to designate an approver, or the manager, of the project they're working on which requires the software. And finally, instead of paying with a credit card, users needed to be able to select or enter a general ledger account number - which would later be used for internal billing.

This again simply involved overriding a few templates and building out React components. We removed the cart from the header and had our custom product detail pricing form bring the user directly to checkout. We then replaced all of the default checkout steps with a few of our own. Finally, upon order completion, we simply had Reaction insert order information back into our custom app's software requests collection. The app took over from there, contacting the approver, creating a task with all needed information populated, and updating the Reaction order status - all in real-time.

Conclusion

Often, the learning curve is the most difficult challenge developers face when using a platform for the first time. With Reaction Commerce this was certainly not the case. Coming from a Meteor background, working with Reaction required almost no learning curve. In my opinion, the same cannot be said for most other e-commerce platforms available today.

As for our project, it was completed well under budget and a couple months ahead of schedule. Reaction Commerce is now my e-commerce platform of choice. Innovation is important and Reaction is without a doubt, the most modern Open Source e-commerce platform available today. Coupled with a simple API and limitless extendibility, I believe that it’s here to stay.

Project Ricochet is a full-service digital agency specializing in Open Source.

Is there something we can help you or your team out with?