Dự án · E-commerce Website

Gaming Peripherals Commerce Platform.

Khách hàng: Global multi-brand PC gaming & peripherals company
Vai trò: Fullstack Developer
Năm: 2021 – 2025

[ Gaming Peripherals Commerce Platform ]

(01) Tổng quan

A direct-to-consumer ecommerce platform built on Shopify Plus, showcasing and selling PC components, gaming peripherals, apparel, and accessories.

(02) Công việc chính

01
Developed and maintained storefront application for an e-commerce platform using Next.js, React, and GraphQL.
02
Optimised SEO, SSR, and ISR on demand to improve site performance and search visibility.
03
Combined data from Shopify, Contentful, and other sources to give product teams full control over content without hardcoding.
04
Participated in Agile/Scrum workflows, ensuring smooth code merges and efficient feature development.
05
Developed and maintain micro-frontend applications (storefront, custom-product builder, checkout)
06
Improved product alignment by participating in backlog refinement and providing strategic UI/UX and business-logic guidance, reducing rework.
07
Coordinated with business and analytics teams for tracking implementations and third-party service integrations.
08
Coordinated with product owner to discuss business features and propose techincal solutions.
09
Implemented and maintained tracking tools including GTM, Braze, Bazaarvoice, and Meta Pixel for marketing and analytics teams.
10
Monitored AWS logs and build pipelines to diagnose and resolve production issues and build failures.
11
Authored clear, comprehensive system and feature implementation documentation tailored for both developers and non-technical stakeholders.
12
Mentored and trained other developers, improving team capability and reducing ramp-up time.

(03) Đóng góp lớn

Reduced unnecessary renders caused by React hooks (e.g., useMemo, useCallback, useEffect) by debugging and eliminate incorrect reference dependencies.

Reduced LCP by 76% by resolving SSR issue with client-side-rendering-support-only library.

−76% LCP

Bài viết1 phút đọc

01 — Bối cảnh

Storefront là bản Shopify Plus headless chạy Next.js 12 và GraphQL. Các trang chính có LCP kém: carousel dùng react-swiper chỉ chạy được ở client nên làm hỏng server-side rendering, nội dung chính chỉ hiện ra sau khi JavaScript tải xong.

02 — Cách tiếp cận

Đầu tiên tôi cho carousel render lại được từ server để màn hình đầu không phải chờ code client. Chỉ vậy là chưa đủ, nên tôi rà tiếp phần còn lại của trang: cách Next.js 12 render và tải từng phần, cách ảnh được phục vụ từ Cloudinary, cho tới khi phần tử lớn nhất hiện ra sớm.

Carousel chỉ là điểm khởi đầu, không phải toàn bộ câu chuyện.

03 — Kết quả

LCP giảm 76% và Core Web Vitals của cửa hàng về mức tốt.

Successfully combined Google Tag Manager and Meta Conversion API for precise client/server-side tracking.

Improved SEO and Google crawlability by leveraging Next.js features like SSR, ISR, and SSG

Delivered critical backend features under tight deadlines to meet Computex release requirements.

Automated workflows with Shopify Flow to handle order resubmissions, conversions, and error recovery.

Migrated UI and custom business features from LiquidJS to Shopify React Extensions and Shopify Functions, reducing maintenance effort and improving modularity.

Enhanced ADA compliance by improving keyboard navigation, color contrast, and ARIA support across key components.

(04) Kết quả

−76%

LCP

3×

Fewer GraphQL fetches

3×

Faster builds

(05) Công nghệ

NextJS
ReactJS
SWR
TailwindCSS
SCSS
GraphQL
Redux
Shopify
NodeJS
Contentful

Dự án tiếp theoMQ Solution Website