Powering a Multi-vendor E-commerce Platform with Gatsby

case study
Project Focus
TECHNICAL CONSULTANCY
UI/UX DESIGN
DECOUPLED DRUPAL
GATSBYJS
Image
Shop the Area E-commerce site

Client Overview

Claire is a fashion entrepreneur with an idea she has been working on for a couple of years. A local boutique e-commerce site aimed at small to medium-sized boutiques who might not have their own websites enabling both boutique owners as well as retail customers to shop from boutiques in their area through an online portal.

 

Industry Overview

Cutting edge digital e-commerce stores are making it easy to sell and buy goods online. With headless commerce and progressive web applications (PWA), the world is becoming a storefront as brands enable commerce via websites and apps. The promise of headless commerce is the freedom to sell anywhere without design or development constraints— reimagining the architecture.

Image
Shop the Area E-commerce site

Image
Shop the Area E-commerce site

Project Overview

Helping storefronts stay in business and provide customers with a flawless online shopping experience.

The client required that users be able to shop from boutiques that are within a 15-mile radius of their location. The site is aimed at small to medium-sized boutiques. Helping storefronts stay in business and provide customers with a flawless online shopping experience. The idea was to create a website and Progressive Web App (PWA) with simple navigation for product purchase and checkout.

96%

performance score

100%

seo score

92%

best practices score

88%

accessibility score

0%

dev intervention with Netlify’s automated build & deployments

quote

I could not be happier!
I highly recommend this company.

Claire Aillet
Owner – Shop the Area

“After 2 years of obstacles with other companies in the states, a friend recommended QED42. They were friendly, knowledgeable, prompt and accommodating to my needs. They were able to give me a great product in less than 5 months. They stayed under my budget. I could not be happier! My app is a delivery service for retail stores. The first release was better than I could have imagined and I cannot wait to continue working with them. I highly recommend this company.”

Image
Shop the Area E-commerce site

Image
Shop the Area E-commerce site

Image
Shop the Area E-commerce site

Requirements

Performance is the core criteria for e-commerce. For every second it takes to load a page, customers (and revenue) are lost.

  • Design and build a flexible e-commerce marketplace for boutiques to sell their products
  • Boutiques can self manage their storefronts on e-commerce platforms
  • Dashboard for boutiques to see reports on their products
  • Geolocation integration for delivery feasibility and better shopping experience
  • Content Management capabilities blended into the e-commerce experience for promotions
  • Simple navigation, search functionality, location-based services and payment gateway integration
  • Simple and intuitive design
Why Decoupled Drupal?

Traditionally Drupal commerce has been an exceptional framework to build flexible e-commerce experiences for serving e-commerce websites. However, out of the box, it falls short at matching the modern e-commerce sites when it comes to performance and user experience. After understanding the success criteria we decided to use a modern JS framework along with Drupal and decided to go with GatsbyJS, as it solved both these problems of performance and rich user experience by rendering blazing fast static data, yet supporting commerce functions via direct API calls.

Image
Shop the Area E-commerce site

Our Approach

Along with a responsive website we also delivered a Progressive Web App for the site.

  • A decoupled Drupal backend for the core e-commerce administration like boutiques onboarding, product management, reports etc with a Gatsby front-end for the end-users for performance and rich user experience.
  • Drupal Commerce provides out of the box features for an e-commerce platform along with the framework to build custom solutions and works perfectly as a dashboard that is easy to understand and use for store owners to manage their store, inventories, and orders.
  • In third party software, we used Google Places API for address and distance calculations and Stripe as the payment gateway.
  • The backend has been hosted in AWS while the app is hosted in Netlify
Location-based services
  • The primary goal was to present users with products from stores located within a 15-mile radius from the user’s location.
  • We also ensured that the website displays boutiques and products even when the users do not share their location.
  • The Google Maps API lets share the location where they want the product to be delivered or their current location.
Image
Shop the Area E-commerce site

User authentication
  • It allows the client application to identify the current user, and to potentially change their experience based on that information.
  • Additionally, an authenticated user can also be authorized to perform specific actions depending on their account's permissions.
  • We used simple_oauth module for authentication on Drupal end.
  • For more information around user authentication, read User Authentication for Gatsby and Drupal Decoupled site - https://bit.ly/3fOoF6u
Image
Shop the Area E-commerce site

Store management
  • We created each boutique as a new store. ShopTheArea admin can onboard boutique owners by creating a new user and a store for them. 
  • As this is a location-based service so it was very crucial for us to get the exact location (geo coordinates) of the boutique to provide better results. 
  • We implemented the Field geolocation module which provides integration with Google Maps API. 
  • The Boutique owner role comes with a set of permissions - managing products, access to a dashboard with different reports, etc.
Image
Shop the Area E-commerce site

Search
  • The search functionality was added to the Catalog page, enabling users to narrow down to their desired search results.
  • We set up another Gatsby instance which only pulls the required data for the catalogue page. This instance works as a search index for us. We make GraphQL requests against this Gatsby instance to display the search results with respect to the user’s choices.
  • Whenever data changes on Drupal end both Gatsby instance data gets updated.
Image
Shop the Area E-commerce site

Cart switching anonymous to a registered user
  • There may be scenarios where a user might lose the products added to the cart because they haven’t logged in, resulting in poor user experience.
  • To avoid this we created a custom REST endpoint which will be triggered when an anonymous user registers on the site. 
  • When a user registers on the site we assign the current cart with the newly registered user. In this way when a user logs in on the site and checks the cart page, the products will remain intact in the cart.
Image
Shop the Area E-commerce site

Updating data
  • Whenever content is added, updated or deleted on the Drupal end it won’t automatically update on the Gatsby site. As Gatsby will process only data that is available at the build time.
  • To achieve this we used the build hook module. Which provides different options to choose for triggering the build hook.
  • We configured the build hook in such a way that whenever any content update happens it will trigger the Netlify build hook for our site so that our site content will be always up to date.
Image
Shop the Area E-commerce site

Reducing build time
  • Build refers to the process of compiling your site. During a build, or at build time, your project gets transformed from component files to optimized HTML, CSS, and JavaScript files that you can deploy to your hosting provider.
  • While build happens for your site Gatsby fetches data from Drupal site. So we disabled all the JSON:API resources which aren’t required in the frontend so that unnecessary data shouldn’t be fetched and processed.
  • Also, we used gatsby-plugin-netlify-cache. This plugin caches your build files locally or in the Netlify cache directory. It will massively speed up subsequent builds. This plugin reduces the builds almost by 60-70% of build time.
Image
Shop the Area E-commerce site

Stripe for payment
  • We integrated Stripe - a payment gateway with easy to understand interface.
  • Multi-factor authentication - once payment is completed, Stripe sends the backend the status of the payment ie. success or failure. The system backend places the order only when Stripe sends a success message.
Image
Shop the Area E-commerce site

Image
Shop the Area E-commerce site

Image
Shop the Area E-commerce site

We designed and built a flexible e-commerce marketplace for boutiques to sell their products.

  • Decoupled Drupal with Gatsby front-end helped create a super-fast customer-facing application.
  • Additionally, Gatsby provides browser caching which sped up page loads even more on consecutive visits.
  • Gatsby also provides PWA out of the box.

We implemented a decoupled Drupal backend for the core e-commerce administration like boutiques onboarding, product management, and reports with a GatsbyJS front-end to deliver a performant and rich user experience.

Technology Stack

Image
Shop the Area E-commerce site

Image
cta

Build infinitely scalable applications.