case study

Helping buyers shop from multiple boutiques at one place via Headless Commerce: STA

:: PROJECT FOCUS ::

TECHNICAL CONSUTANCY
DECOUPLED DRUPAL

UI/UX DESIGN
GATSBYJS

Image
Shop the Area Banner image

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
Shop the Area Overview
Helping storefronts stay in business and provide customers with a flawless online shopping experience.

Project Overview

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.

0
%
Image
Performance Score

Performance Score 

0
%
Image
SEO Score

SEO Score

0
%
Image
Best Practices Score

Best Practices Score

0
%
Image
Accessibility Score

Accessibility Score

0
%
Image
Dev intervention

developer intervention with Netlify's automated build & deployments

success
- story

quotes

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. I could not be happier! 

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

Requirements

  • 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.

Shop the Area E-commerce site
Along with a responsive website we also delivered a Progressive Web App for the site.

Our Approach

  • 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

Image
Shop the Area E-commerce site
Image
Shop the Area E-commerce site
Image
Store Management
Image
Shop the Area E-commerce site
Image
Shop the Area E-commerce site
Image
Shop the Area E-commerce site
Image
Shop the Area E-commerce site
Image
Shop the Area E-commerce site

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.

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

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.

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.

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.

 

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.

 

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.

 

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.

 

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.

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

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.

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.

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.

 

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.

 

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.

 

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

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.

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

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.

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.

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.

 

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.

 

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.

 

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

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.

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

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.

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.

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.

 

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.

 

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.

 

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
Store Management

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.

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

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.

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.

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.

 

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.

 

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.

 

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

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.

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

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.

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.

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.

 

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.

 

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.

 

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

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.

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

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.

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.

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.

 

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.

 

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.

 

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

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.

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

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.

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.

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.

 

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.

 

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.

 

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

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.

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

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.

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.

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.

 

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.

 

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.

 

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
Shop the Area E-commerce site
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