Preparing a focused brutalist interface for projects, skills, writing, and product work.
LắcKey is a full-stack e-commerce system for Vietnam's mechanical keyboard community. It supports public shopping flows, keyboard-specific product variants, guest and customer carts, checkout, SePay/VietQR and COD payments, GHN shipping, supplier inventory, admin CMS, blog content, ratings, wishlist, notifications, and Docker-based deployment.
Generic e-commerce sites do not model mechanical keyboard buying well: products need technical variants such as switch, layout, color, SKU, pricing and stock; customers need a smooth checkout and order lookup flow; suppliers need inventory and order visibility; admins need CMS, discounts, payment reconciliation, shipping, and operational dashboards.
The system separates a Next.js storefront from a NestJS API, then organizes commerce, product, content, payment, shipping, supplier, and admin domains around a MongoDB/Prisma data model. SePay webhooks automate bank-transfer confirmation, Redis/BullMQ handle asynchronous work, and Docker/Nginx make deployment reproducible.
The screens are grouped by the commerce journey: customers configure keyboard variants and checkout, operators manage orders and runtime workflows, then the architecture visuals show payment, data, and deployment design.
A public shopping experience for keyboard buyers with home sections, product listing, category browsing, search, filters, product detail pages, custom keychain content, blog pages, and SEO metadata.
A complete order flow from guest/customer cart to checkout, address selection, shipping fee calculation, discount validation, payment method selection, VietQR transfer, COD, and order completion.
Back-office tools let admins manage products, categories, brands, attributes, suppliers, orders, customers, ratings, site content, blog posts, discounts, and supplier accounts.
External services handle product media, payment confirmation, shipping/tracking, transactional email, PDF invoice generation, scheduled cleanup, and real-time operational alerts.
The Next.js client serves public and dashboard interfaces while the NestJS API owns business logic, validation, authentication, and data access through domain modules.
MongoDB and Prisma model customers, users, suppliers, products, variants, carts, orders, payments, invoices, discounts, ratings, wishlist items, CMS pages, and inventory movements.
SePay webhook and IPN endpoints verify payment notifications, write payment events, reconcile pending payments, and update order states while guarding against duplicated transactions.
Docker Compose coordinates the Next.js client, NestJS API, MongoDB, Redis-backed queues/cache, and Nginx reverse proxy for a repeatable production environment.
A compact map of every important product screen, diagram, email, and deployment visual extracted from the report.
Product detail page for selecting keyboard options
Featured Screen
Option selection flow for a custom keyboard build
Diagram
Variant selection for switch, layout, and product attributes
Interface Screen
Checkout flow with shipping and cash payment state
Diagram
Admin dashboard for order monitoring
Interface Screen
Admin order detail screen for status and fulfillment
Interface Screen
Public storefront with customer support overlay
Project Visual
Backend runtime logs during system execution
Terminal
Entity relationship model for the commerce database
Diagram
SePay and order confirmation flow
Diagram
Checkout and payment sequence diagram
Diagram
System architecture and module boundaries
Diagram
Client-server architecture with API and data layers
Diagram
Frontend folder organization
Diagram
Backend module organization
Diagram
Docker, Nginx, MongoDB, and Redis deployment architecture
Diagram
Have an idea or project?
Let's build something amazing.アイデアやプロジェクトがありますか？素晴らしいものを一緒に作りましょう。