Spree Commerce and Alokai integration for uncompromising mobile users

Spree Commerce is an open source eCommerce platform built with Ruby on Rails. Spree features a modern responsive frontend but, as its core team, we decided to build an alternative PWA frontend using Alokai and integrate it with an Instagram feed and an influencer referral program. To test it all, we launched a live store with fashion apparel which we manufactured ourselves for people on the move. It went viral, as intended and expected.

Spree and Alokai integration

In order to integrate Spree with Alokai, we first built JavaScript and TypeScript SDKs for Spree Storefront REST API v2 . With this SDK, JavaScript, and TypeScript developers can easily build amazing storefronts in React, Vue, or Angular with Spree serving as a headless commerce backend.

We then built a spree2vs connector which bridges two open source initiatives into a complete PWA eCommerce platform. It combines Spree inventory, order, user, and configuration management capabilities with Alokai's modern approach to consumer online shopping experiences.

Live demo for real-world testing conditions

What better way to test our complete PWA eCommerce solution than by launching a live store and selling to real users? Open-source projects too often remain in an experimental development phase which is unverified by real-world users who are each developer’s best QA team.

We decided to have some fun and invented our own fashion brand. Fearnot is a fearless apparel brand for adventurers who are seeking extreme challenges and willing to go against the elements and beyond what others consider easy, comfortable or even possible. We are thinking about surfers, wakeboarders, snowboarders, skiers, and other outdoors enthusiasts. Isn’t that a perfect target group for a PWA eCommerce solution? 

We’ve asked surfers and snowboarders to test our PWA store website. On the beach in the full summer sun when high-contrast UI matters most. With sand sticking to your phone screen or water splashing on your hands and your mobile device. On the snow in the freezing cold when your fingers aren’t that precise, your mobile phone hardly responds and you don’t want to wait for the page to load for too long with your gloves off. With poor connection or without. Our beta testers browsed the site, placed orders and provided us with UX feedback. 

It felt really good to put our technology through rigorous testing and, after several iterations, make it good enough for our target group. Mobile users are uncompromising. Your mobile-first eCommerce either works for them or it doesn’t. We chose not to test our PWA apps in the safe confines of a lab or an office with lightning fast WiFi. We went to the places where people really need PWA; In the mountains, on the beach, in the snow, and in pouring rain. 

Instagram feed integration for viral & mobile marketing

A mobile shopping experience would be incomplete without an Instagram feed integration. Adventurers love sharing their stories . Instagram is where it all happens for our target group so we’ve connected our Fearnot PWA store to Instagram APIs ; it enables our influencers to share the adventures they have while wearing our store’s products.

We’re showcasing Fearnot customers’ Instagram posts tagged with @dofearnot username or #dofearnot hashtag on the store homepage. Both photos and videos are signed with the influencer’s Instagram username (to respect their copyrights) and are, of course, clickable. When clicked the Instagram app opens and presents the post tagged with Fearnot username or hashtag; users can then like and comment.

This has enabled Fearnot customers to get featured on the store homepage and has instantly turned them into brand ambassadors.

Built-in referral program for Instagram influencers

The next logical step was to provide Fearnot brand ambassadors with the tools to incentivize their Instagram followers to buy Fearnot merchandise. We want to enable our influencers to make some money at the same time so we’ve created the Fearnot referral program for Instagram influencers based on the Spree promo code engine.

As a Fearnot influencer you:

• Get Fearnot gear for free. We’ll send you swag that you can wear proudly in pics that you post on your social media channels
  
• Share your own Fearnot promo code with your followers. We’ll set you up with a personal promo code for our online store. Share it with your loyal followers to give them a 10% discount for Fearnot products
  
• Get a revenue share from all your sales. Each purchase made with your personal promo code will get you a 30% revenue share and we’ll email you daily with your latest rev share update.

Soon enough our Fearnot brand gained a following among extreme athletes, adventurers, and travelers. It went viral, proving once again that PWA eCommerce and Instagram marketing go very well together. 

Enabling people on the move to do some shopping and some sharing

PWA eCommerce enables people to keep moving and frees them from the burden of using a large desktop or a tablet device. Packaged with an Instagram integration, it enables them to seamlessly combine their lifestyle and eCommerce experiences . It closes the loop of the customer journey for people on the move with no time to waste.

People love the smooth UX which our PWA app provides. Combined with an Instagram integration and a referral program for brand ambassadors, we’ve created a complete package for a mobile eCommerce go-to-market strategy. What made it all possible was a standalone PWA Alokai.

But the cherry on the cake for this project was that our key brand ambassador (Instagram influencer, kitesurfer, snowboarder, traveler, and Fearnot photo model) decided to pivot his career and become a full-time Quality Assurance specialist. He tested our demo site, studied hard and passed the ISTQB exam at the first attempt. Do or do not, as master Yoda used to say. Fearnot.

To learn more about Spree PWA or launch a new PWA store or a marketplace:

• Contact Spark Solutions - Spree core team and builders of Spree PWA
• Read more about Spree and Alokai integration
• Explore headless E-Commerce opportunities with Spree Commerce