Industry
E-commerce
Location
Baton Rouge, Louisiana, US
Engagement
3
Year
Focus
Headless e-commerce Marketplace – to help multiple boutiques to sell their products in one place.
Services
Decoupled Drupal
UX & UI Design
GatsbyJS
Technical Consultancy
Claire, a fashion entrepreneur, wanted to create a local boutique e-commerce site that would allow users to shop from small to medium-sized boutiques within a 15-mile radius of their location.
We helped her achieve this by creating the Shop The Area website and Progressive Web App (PWA) with simple navigation for product purchases and checkouts. The site also includes features that help boutique owners stay in business, such as a directory of local boutiques and a blog about fashion trends.
Challenge
The major challenge was to create a platform that would be easy to use for both buyers and sellers and also be scalable to accommodate a growing number of boutiques. Another challenge was to design the website to handle a large volume of traffic and be fully secure to protect sensitive financial information.
Solution
To address these challenges, we decoupled the Drupal Commerce back end from the front end. It allowed us to use a modern JavaScript framework, GatsbyJS, to create a fast and user-friendly front end. GatsbyJS renders static pages on the server, which makes the site load much faster than a traditional dynamic site.
Additionally, GatsbyJS allowed us to easily integrate with the Drupal Commerce back end, so we could still access all of the functionality of Drupal Commerce. We also used Google Places API for address and distance calculations, and Stripe as the payment gateway. The back end is hosted in AWS, while the app is hosted in Netlify.
Location-based service
To provide a more personalized shopping experience, we integrated Google Maps API to allow users to see products from stores located within a 15-mile radius of their location.
We also ensured that the website displays boutiques and products even when the users do not share their location. This way, users can still browse and shop for products from all of the participating boutiques, regardless of their location.
User authentication
User authentication was important STA e-commerce site, as it allowed the client to identify the current user and authorize to perform specific actions. We used the simple_oauth module for authentication on the Drupal end.
This module allows users to log in using their Google or GitHub accounts. Once a user is authenticated, they can view their orders, manage their account settings, and place orders.
Store management
Admins can onboard boutique owners by creating a new user and a store for them. The exact location (geo coordinates) of the boutique is crucial for this location-based service, so we implemented the Field Geolocation module which provides integration with Google Maps API.
The boutique owner role comes with a set of permissions, such as managing products and accessing a dashboard with different reports.
Search functionality
To allow users to narrow down their search results, we added a search functionality to the Catalog page. We set up another Gatsby instance that pulls only the required data for the Catalog page.
This instance acts as a search index to make GraphQL requests and display the search results based on the user's choices. Whenever data changes on the Drupal end, both Gatsby instances are updated.
Cart switching
To avoid users losing products from their cart when they register, we created a custom REST endpoint that is triggered when an anonymous user registers. This endpoint assigns the current cart to the newly registered user. This way, when the user logs in and checks their cart, the products will still be there.
Data updates
To keep the Gatsby site up to date with the latest content from the Drupal end, we used the build hook module. This module allows us to configure a webhook that will be triggered whenever content is added, updated, or deleted on the Drupal end.
We configured the webhook to trigger the Netlify build hook for our site, which will then rebuild the Gatsby site with the latest content.
Less build time
To reduce the build time of the Gatsby site, we disabled unrequired JSON:API resources to ensure only the necessary data is fetched and processed, speeding up the build process.
We also used the gatsby-plugin-netlify-cache plugin, which caches the build files locally or in the Netlify cache directory. It means that subsequent builds will be much faster, and this plugin can reduce the build time by up to 60-70%.
Payment gateway
To handle payments, we integrated Stripe, a popular payment gateway with an easy-to-understand interface. Stripe provides a secure and reliable multi-factor authentication for users to pay for their purchases.
Once a payment is completed, Stripe sends a message to the back end with the status of the payment (success or failure), and the system backend places the order only when a success message is received.
Outcome
The decoupled Drupal backend and GatsbyJS frontend helped STA deliver a fast, performant, and rich user experience for the boutique e-commerce marketplace. The decoupled architecture allows for scalability and flexibility, while Gatsby's browser caching and PWA capabilities ensure that the site is available offline even with a slow internet connection. This provided a seamless and convenient shopping experience for both the boutiques and their customers.
Bring us your challenge
We’ll help you get clear on what needs solving,
that’s where we begin
How an academic medical center launched its full site on schedule, with the content migration still running
How an academic medical center launched its full site on schedule, with the content migration still running
Rebuilding Diabetes Food Hub as one connected nutrition planning experience
One operating model for a global portfolio of industrial brands
AI-powered legal search helps 62% more users find legal help
How Banyan Living built a digital guest experience as premium as their properties
Built on trust and purpose, our 5 years of Digital partnership with the UN
Creating a safe digital space for women and girls facing gender based violence
Building a migraine therapy band website for the German market
National Kidney Foundation’s Drupal 7 to 10 migration | Redefining digital operations and experience
Interactive data visualization of climate hazards for the International Organization for Migration, UN
Enabled a Fortune 200 company to launch 2000+ websites via a decoupled DXP
An intuitive platform to find co-living spaces for digital nomads
MVP to a multi-platform real estate app using Decoupled Drupal
Restaurant aggregator web & mobile interface fueled by NodeJS
Overhauling the digital landscape of diabetes.org with Drupal 10 & multisite architecture
Drupal multisite powered HCP portal for a Fortune 500 pharma company
Bringing 70 brands under one umbrella platform for the world's largest FMCG company
Unifying multiple brand sites for a hospitality group with Drupal 9
Launched 11 beer brands via platforming for SABMiller
Connecting 1200+ educators and digitizing resources for Azim Premji Foundation
Drupal 9 & Acquia Site Studio platform for the world largest’s FMCG company
Marketing CMS for Blinkit’s Native Mobile App
Helping buyers shop from multiple boutiques in one place via headless commerce: STA
Expanding global presence for the European Bartender School using Drupal 8
How Kotak Securities rebuilt for speed, scale, and full platform ownership
Increasing employee engagement at HERE Technologies
Platform migration and design system for Stanford GSB
Personalization & effortless content management for Rajasthan Patrika
NSE Clearing — Secure and scalable digital finance solutions with Drupal 9
Redefining user-centric legal access for ILAO with UX design and Drupal
Building the future of healthcare engagement with Lean UX and Drupal
Enabling Ashoka's presence across 90+ geographies with a resilient content architecture
Building a Drupal-powered knowledge management platform for a global nonprofit
Transforming a global nonprofit venture fund platform with Drupal 9