ezliving-furnitures-ecommerce-headless-pwa-magento-solution

industry-icon
Industry
E-Commerce

service-icon.png
Service
Web Development

launch-year-icon
Year
2022-2023

company-overview

Company Overview

EZ Living Furniture is a leading Irish furniture retailer who deals in a comprehensive range of stylish home furniture and furnishings. You can shop from their online platforms available in Ireland as well as the UK. Apart from these online stores, EZ Living Furniture also has many physical stores across Ireland allowing customers to view, experience and then make a purchase.

Key Challenges

Our client got this project developed with another agency in PWA Studio and Magento 2. However, there were many issues in their current platform. So they have approached our team to create a fresh design with the latest technology stack. Our team required to focus on the issues mentioned below in order to provide a seamless experience:

Performance

The website’s performance had a significant issue where the page load time was extremely long and affected user experience.

Architecture/infra Cost

Despite leveraging high-quality resources like AWS, the architecture of the website was not optimized properly which resulted in increased expenses.

Instability /Traffic Handling

The website was unstable even under normal traffic conditions suffering crashes even with adequate resources.

Web vitals /SEO

Website’s core web vitals and SEO performance was heavily compromised.

ERP sync issues

Order synchronization with ERP was unreliable and had random issues.

Payment/Order Missing

The website was experiencing issues related to syncing orders between payment gateways and magento.

Import job issues

Catalog/Stock Import jobs had stability issues

UI /UX Revamp

A comprehensive redesign was necessary with regards to UI/UX to meet industry standards.

Our Solution

Our team conducted a comprehensive audit that revealed multiple issues within the website architecture and codebase. By integrating a new Relic, we identified the SQL/query load, as well as the components that caused delays in loading. Then, we optimized the modules that were affected and cleaned up the redundant data, such as url_rewrite from the tables. As a result, this improved performance but it was not up to the mark and now we needed to go for infrastructure revamp.

The client approved our request for an infrastructure revamp. While our team was exploring the PWA components, we found many outdated modules and unnecessary customizations, so we decided to go for a completely new architecture and UI/UX design. Moreover, we also upgraded our entire tech stack for a better experience. We reviewed business requirements and optimized existing features, customizations, and integrations to align with best practices, eliminating redundant and suboptimal code.

Architecture/ Implementation

We designed the architecture with scalability, efficiency and running cost in mind over the AWS infrastructure.

    • circle-check-iconEC2 instances for each service/application(Magento/Backend, PWA/frontend, Redis, Varnish).
    • circle-check-iconELB (Elastic load balancer) for routing and ASG for Auto Scaling.
    • circle-check-iconS3 buckets for media.
    • circle-check-iconRDS for database
    • circle-check-iconOpensearch Service for search
    • circle-check-iconFor Prerendering solution for boats we used separate service from prerender.io
    • circle-check-iconWe used cloudflare for caching and WAF
  • circle-check-iconCloudflare WAF implemented a website safe from boat attacks.
  • circle-check-iconProper usage CORS module and their listing.
  • circle-check-iconIP based whitelisting for integrations.
  • circle-check-iconVPN/VPC restricted access.
  • circle-check-iconPenetration Testing.
  • circle-check-iconCSP implementation on frontend.
  • circle-check-iconProtect Against CSRF and XSS.
  • circle-check-iconRegularly Update and Patch.
  • circle-check-iconRestricted Admin Access.
  • circle-check-iconSSL Encryption.
  • circle-check-iconManual/Automated code reviews are conducted alongside the use of SonarQube, and for frontend ESLint is employed for coding formatting and adherence to standards.
  • circle-check-iconUtilized the AWS CloudWatch service to set up alerts for system downtime and developed a Python script on Lambda to send notifications in case the GraphQL services are unresponsive.
  • circle-check-iconThe Noibu tool, a third-party solution, is employed to capture frontend traces and user experiences. It sends notifications for every frontend error encountered by end users on various browsers and devices.
  • circle-check-iconGA4 with GTM
  • circle-check-iconWe used github for branch and repository management.
  • circle-check-iconSource code scanning during the code commits/merge.
  • circle-check-iconDeployHq(third party) service to send the builds and manage the pre/post deployment command, it also flush the cache automatically from cloudflare on post deployment.
  • circle-check-iconWebp conversion using lambda script on S3 itself without application involvement, any image that goes to S3 automatically converts to webp.
  • circle-check-iconThere is no single image/csv or any kind of media hosted or placed on webserver.
  • circle-check-iconVarnish and Redis configurations to use best of it.
  • circle-check-iconDatabase junk cleanup tasks are designed to remove logs or outdated and unwanted data within a specified timeframe.
  • circle-check-iconAdded third party cloud service called prerender.io to render a preprocessed or cached html dom for google/bing and other social platforms for better seo and website performance.
  • circle-check-iconOrderite ERP – Custom module to sync Catalog, Orders with Orderite.
  • circle-check-iconWorldpay – Custom payment module for both backend and frontend.
  • circle-check-iconGivex Gift Card – Custom module created to interact with givex for gift card buying and redemption
  • circle-check-iconPrerender.io (Prerenderer) – Service to render a preprocessed/cached dom for boats.

Tech Stack

Cloudflare

GraphQL

MySQL
PWA Studio
Stripe
AWS

UI/UX Design

Created a new PWA theme which was adhering to several UI/UX standards and best practices to ensure a seamless and user friendly experience.

The Results

The solutions implemented by our team have delivered tremendous results significantly contributing to the website’s success in generating quality leads, maximizing revenue and earning recognition through prestigious awards.

Performance
The website’s performance has substantially improved, matching client satisfaction.
Architecture/infra Cost
Our team optimized the website’s infrastructure and resulted in client’s cost savings by improved resource utilization.
ERP Sync Issues
Our team resolved all ERP sync issues through a total code refactor.
Web vitals/SEO
To enhance web vitals, we utilized prerender.io cloud service, which safeguarded web server resources and carefully handled bot traffic. This enhancement has optimized web vitals and reduced resource usage.
Traffic Handling
The new optimized website can efficiently manage high traffic volumes, particularly during sales periods, maintaining an order quantity of 200-300 orders per day, even with larger order sizes.
Import job issues
We addressed issues with the import job, implemented additional exception handling to promptly capture any data errors, and set up notifications to alert the admin. Furthermore, we optimized execution times for large files by taking into account resource constraints and file sizes, ensuring efficient processing within specified time frames.

Client Testimonial

Partnering for Success, Delivering with Excellence

by 270+ customers for 700+ Web and Mobile App Development Projects

    For Project Inquiries

    Start Growing Your Business With Us

    Please fill in the details and our representative will be in touch with you shortly.
    VT Netzwelt Close