03 // CHI TIẾT KIẾN TRÚC & DỰ ÁN

Composable Commerce, Tích hợp Hệ thống, & AI Delivery

Mỗi case study dưới đây được trình bày theo cấu trúc Context → Problem → Approach → Impact → Stack. Tất cả số liệu kỹ thuật đều được xác thực qua kinh nghiệm thực chiến trên production.

CASE STUDY // 01SHOPMACHER eCommerce GmbH & Co. KG

Agentic delivery workflow

Role: Frontend / AI Integration Developer

01 / Context

Triển khai dự án agency, đội ngũ phân tán, lượng ticket liên tục trên nhiều dự án commerce.

02 / Problem

Một phần lớn thao tác trong ticket là các công việc lặp — tìm mã nguồn liên quan, tạo test scaffold, cập nhật tài liệu. Tốn thời gian, ít đòi hỏi phán đoán, và dễ bị bỏ qua khi deadline gấp.

03 / Approach

Xây dựng bộ kỹ năng Claude Code dùng lại được giúp xử lý trọn vẹn ticket: đọc hiểu yêu cầu, khảo sát codebase, lập trình, chạy kiểm định với test và sinh tài liệu kỹ thuật. Thiết kế theo hướng review-first — con người tập trung kiểm duyệt diff chứ không gõ code. Tôi đã xây dựng và chia sẻ bộ công cụ này cho 4-5 kỹ sư trong team áp dụng.

04 / Impact

Workflow được chạy trên gần như mọi ticket tôi đảm nhận. Thời gian đọc hiểu codebase và logic nghiệp vụ từ khoảng 1 giờ giảm xuống còn một nửa. Thời gian tiết kiệm được dành cho logic phức tạp thay vì tài liệu hay khung test.

What I would do differently

Ban đầu tôi cố gắng tự động hóa cả việc viết description cho PR và comment review trong một bước. Điều đó tạo ra thông tin nhiễu khiến người review bỏ qua. Khi tinh gọn automation chỉ tập trung vào implementation đã verify, test scaffolding và tài liệu thực tế, team đã áp dụng ngay lập tức.

CASE STUDY // 02ANWR Group (via SHOPMACHER)

Composable storefront, ANWR

Role: Senior Frontend Engineer

01 / Context

Xây dựng storefront B2B và B2C headless cho ANWR — tập đoàn bán lẻ giày dép và thể thao Đức — trên 3 storefront: sport2000, schuhe.de, và ATS.

02 / Problem

Thách thức lớn nhất nằm ở phần tích hợp — một frontend Next.js kết nối commercetools qua Frontastic, tương tác với hệ thống PIM, ERP và commerce có sẵn, đảm bảo tính nhất quán trên 3 storefront.

03 / Approach

Sử dụng Next.js SSR với commercetools qua Frontastic. Tự xây dựng tính năng tìm kiếm Algolia cho PLP và PDP từ đầu — bao gồm caching, tối ưu độ trễ và độ liên quan của kết quả tìm kiếm — cùng các tính năng checkout. Viết Cypress e2e test cho các luồng quan trọng, review code và làm việc trực tiếp với Product Owner.

04 / Impact

Nâng điểm Lighthouse hiệu năng của storefront từ khoảng 60 lên khoảng 80 thông qua tối ưu hình ảnh và JavaScript. Các chỉ số kinh doanh chi tiết được bảo mật theo thỏa thuận NDA.

CASE STUDY // 03NFQ Vietnam

Pharmacy B2B CRM platform

Role: Middle Front-end Developer

01 / Context

Nền tảng tương tác khách hàng B2B ngành dược phẩm tại NFQ Vietnam (03/2022 – 03/2023). Dự án outsourcing cho một đội ngũ của Đức.

02 / Problem

Giao diện dữ liệu y tế chuyên sâu phức tạp đòi hỏi quản lý state ổn định qua cả GraphQL và REST API.

03 / Approach

React, TypeScript, GraphQL (chính), REST, MaterialUI. Phối hợp chặt chẽ với UX/UI designer; phân tích nguyên nhân gốc rễ, review code và viết unit test cùng các senior engineer theo quy trình Scrum.

04 / Impact

Bàn giao tính năng tương tác khách hàng ổn định kèm hệ thống unit test và E2E test (Cypress).

CASE STUDY // 04Enlab Software

BL Education course platform

Role: Senior Front-end Developer

01 / Context

Nền tảng khóa học trực tuyến gồm ứng dụng học viên và hệ thống quản trị tại Enlab Software (03/2021 – 03/2022).

02 / Problem

Dự án greenfield xây dựng từ đầu chưa có quy chuẩn frontend với đội ngũ 5-6 kỹ sư frontend.

03 / Approach

Dẫn dắt đội ngũ frontend 5-6 kỹ sư: chịu trách nhiệm kiến trúc FE, template dự án, quy chuẩn lập trình và tài liệu kỹ thuật; đào tạo thực tập sinh; làm việc trực tiếp với khách hàng, UX và PM. Sử dụng Vue 2, Nuxt, Tailwind CSS, ElementUI cùng backend NestJS + PostgreSQL trên Azure.

04 / Impact

Xây dựng hoàn chỉnh từ đầu, thiết lập quy chuẩn cho đội ngũ frontend 5-6 kỹ sư và đạt giải thưởng Rising Star cho năng lực và cống hiến xuất sắc.