FULLSTACK CASE STUDY

E-Commerce Platform

Giải pháp thương mại điện tử hiện đại tích hợp thanh toán thời gian thực và quản lý kho thông minh.

open_in_new VIEW WEBSITE GitHub logo VIEW GITHUB
Next.js logo Next.js 14
Spring Boot logo Spring Boot
Kafka logo Kafka
Docker logo Docker
account_tree Microservices
Redis logo Redis
Linux logo Linux VPS
expand_more
01. THE CHALLENGE

Giới thiệu Dự án

Trong thị trường thương mại điện tử cạnh tranh, việc duy trì tính nhất quán của dữ liệu kho hàng khi có hàng ngàn lượt truy cập đồng thời là một thách thức lớn. Các giải pháp truyền thống thường gặp vấn đề về **"Race Conditions"** khiến việc đặt hàng vượt quá số lượng thực tế.

Bên cạnh đó, việc cung cấp một nền tảng thương mại điện tử hiện đại kết nối giữa người bán và người mua đòi hỏi phải tích hợp nhiều tính năng phức tạp như quản lý sản phẩm, xử lý thanh toán, và hệ thống đánh giá. Điều này tạo ra một loạt thách thức kỹ thuật, từ việc thiết kế cơ sở dữ liệu hiệu quả đến việc xây dựng API mạnh mẽ.

Dashboard Analytics
Architecture Diagram
02. VOUCHER FEATURE

Săn voucher giảm giá theo mùa sales


Tính năng voucher được thiết kế để cung cấp mã giảm giá theo mùa cho khách hàng, giúp tăng doanh số trong các dịp khuyến mãi.
Hệ thống dữ liệu voucher mang tính đa dạng theo chuẩn các sàn thương mại điện tử hiện đại với phong phú các loại hình giảm giá, điều kiện áp dụng, thời hạn sử dụng và phạm vi áp dụng. Điều này đòi hỏi một kiến trúc backend linh hoạt để xử lý logic phức tạp và đảm bảo hiệu năng cao khi có hàng ngàn lượt truy cập đồng thời trong các đợt sales lớn.

03. Shopping Cart

Trang giỏ hàng

Trang giỏ hàng được thiết kế để cung cấp trải nghiệm mua sắm liền mạch, cho phép người dùng dễ dàng xem và quản lý các sản phẩm đã chọn trước khi thanh toán. Giao diện thân thiện với người dùng và tối ưu hóa cho cả thiết bị di động và máy tính để bàn giúp tăng tỷ lệ chuyển đổi và giảm tỷ lệ bỏ giỏ hàng.

Giỏ hàng được thiết kế để chuyển đổi linh hoạt giữa chế độ guess và user, cho phép khách hàng thêm sản phẩm vào giỏ mà không cần đăng nhập trước. Khi người dùng quyết định thanh toán, hệ thống sẽ tự động chuyển đổi sang chế độ user, liên kết giỏ hàng với tài khoản của họ để đảm bảo quá trình mua sắm liền mạch và cá nhân hóa.

Dashboard Analytics
Checkout Screen 1 Checkout Screen 1 Checkout Screen 1
04. CHECKOUT

Kiểm tra & Thanh toán


Trang thanh toán được thiết kế để cung cấp trải nghiệm mua sắm liền mạch, cho phép người dùng dễ dàng xem và quản lý các sản phẩm đã chọn trước khi thanh toán.
Hệ thống thanh toán tích hợp nhiều phương thức thanh toán phổ biến như thẻ tín dụng, ví điện tử, và chuyển khoản ngân hàng. Khách hàng có thể chọn phương thức vận chuyển cho mỗi kiện hàng, chọn voucher giảm giá và tổng tiền đơn hàng sẽ được tự động cập nhật theo mã giảm giá đã áp dụng.

05. ORDER REVIEW

Thông tin chi tiết đơn hàng
& Theo dõi vận đơn

Trang chi tiết đơn hàng cung cấp cho khách hàng thông tin chi tiết về đơn hàng của họ, bao gồm trạng thái đơn hàng, thông tin vận chuyển, và lịch sử giao dịch. Khách hàng có thể theo dõi tiến trình vận chuyển của họ theo từng kiện hàng có trong đơn và nhận thông báo cập nhật về trạng thái đơn hàng.

Checkout Screen 1 Checkout Screen 1
Checkout Screen 1 Checkout Screen 1 Checkout Screen 1
06. NHÀ BÁN HÀNG

Quản lý & Tiếp nhận đơn hàng


Ngay khi đơn hàng được tạo, hệ thống sẽ tự động gửi thông báo đến nhà bán hàng liên quan đến sản phẩm đã được đặt. Sau đó, nhà bán hàng có thể nhấn chấp nhận đơn để chuẩn bị chuyển hàng cho đơn vị vận chuyển (một mã vận đơn sẽ được gửi đến từ logistics ngay khi chấp nhận để theo dõi quá trình giao hàng) .

Nhà bán hàng có thể theo dõi và quản lý các đơn hàng của họ thông qua một giao diện quản trị chuyên dụng. Họ có thể xem chi tiết đơn hàng, cập nhật trạng thái đơn hàng, và xử lý các yêu cầu hoàn trả hoặc đổi hàng. Hệ thống cũng cung cấp các công cụ để nhà bán hàng có thể liên hệ trực tiếp với khách hàng để giải quyết các vấn đề liên quan đến đơn hàng.

07. RETURN PROCESS

Quản lý trả hàng & Hoàn tiền

Khi đơn hàng có yêu cầu trả hàng, nhà bán hàng có thể xem chi tiết yêu cầu trả hàng, bao gồm lý do trả hàng và tình trạng sản phẩm. Họ có thể chấp nhận hoặc từ chối yêu cầu trả hàng dựa trên chính sách của họ. Nếu yêu cầu được chấp nhận, hệ thống sẽ tự động gửi thông tin đơn trả cho logisitics để thu hồi sản phẩm từ khách hàng.

Sau khi sản phẩm được thu hồi, nhà bán hàng có thể nhấn nút Xác nhận đã kiểm tra và nhận hàng đầy đủ nếu hàng được khách gửi trả đầy đủ, sau đó hệ thống sẽ tự động xử lý hoàn tiền cho khách hàng. Khách hàng sẽ nhận được thông báo về trạng thái yêu cầu trả hàng của họ và có thể theo dõi tiền hoàn trả được cập nhật vào ví người dùng.

Checkout Screen 1 Checkout Screen 1
08. DOCKER STATS SERVICES

Cấu trúc quản lý các service Docker stats

Quản lý và theo dõi trạng thái của các service container trong môi trường Docker trên Linux VPS.

Docker stats services architecture
08. GIAO DIỆN TIÊU BIỂU

Một số giao diện tiêu biểu

UI Showcase 1
Architecture Diagram
08. THE SOLUTION

Các Giải pháp Kỹ thuật

1. Preventing Race Conditions

Triển khai kỹ thuật Pessmistic Locking để đảm bảo tính nhất quán cho dữ liệu kho hàng trong giờ cao điểm khi lượng đặt hàng tăng đột biến. Tránh giao dịch ghi đè gây thất thoát dữ liệu tồn kho.

2. Optimizing Database Queries

Sử dụng kỹ thuật Query Optimization để cải thiện hiệu suất truy vấn cơ sở dữ liệu. Tối ưu hóa các truy vấn phức tạp bằng cách sử dụng chỉ mục, phân tích kế hoạch thực thi, và tái cấu trúc truy vấn để giảm thời gian phản hồi.

3. Optimizing Performance using Multi-threading

Áp dụng kỹ thuật Multi-threading để xử lý các tác vụ nặng như xử lý hình ảnh và tính toán phức tạp, giúp giảm tải cho server chính và cải thiện hiệu suất tổng thể của ứng dụng.

4. Building Scalable Architecture

Thiết kế kiến trúc microservices để phân tách các thành phần của ứng dụng và sử dụng containerization với Docker để dễ dàng triển khai và mở rộng quy mô ứng dụng khi cần thiết.

Code Close-up
03. RESULTS

Kết quả & Bài học

Dự án đã đạt được chỉ số Lighthouse đạt **98/100** về hiệu năng. Quan trọng hơn hết, việc áp dụng kiến trúc Serverless đã giúp giảm thiểu **40% chi phí vận hành** hàng tháng.

check_circle Tối ưu hóa hình ảnh tự động thông qua Next/Image API.
check_circle Xây dựng hệ thống Design System nhất quán với Tailwind CSS.
Terminal View
Abstract Data

PROJECT META

Timeline 3 Months (2023-24)
Role Lead Developer

Ready to build something similar?

VIEW SOURCE CODE