Portfolio

Một fleet sản phẩm thật -
không phải showreel.

Tất cả dưới đây đang vận hành thật trên domain riêng. Mỗi case study là một quyết định kỹ thuật cụ thể: stack, kiến trúc, đánh đổi - đo bằng metric, không slogan.

Sản phẩm vận hành

public-facing, domain riêng

Studio Lab

sub-tool, extension, study

Stack chính

Next · Vue · Node · Postgres · CF · FFmpeg

100%

Source thuộc khách

không khoá vendor, không subscription

Lập trình

Stack hiện đại, kiến trúc scale được, monitoring + CI/CD triển khai ngay từ ngày deploy đầu tiên.

Next.js · Vue · Node · Postgres
Edge deploy + multi-region
CI/CD + monitoring 24/7

Thiết kế

Design system thiết kế từ đầu, không ráp từ UI kit có sẵn. Mobile-first, dark mode, motion tinh tế.

Custom design system
Mobile-first + dark mode
Micro-interaction tinh tế

SEO

SEO kỹ thuật triển khai chuẩn từ deploy đầu tiên - Schema.org, sitemap, OG, canonical đầy đủ, không khắc phục muộn.

Schema.org đầy đủ
PageSpeed 90+
Sitemap + Search Console

01 / 04

Sản phẩm có user

- 3 dự án

SaaS, giáo dục, social commerce - có sign-up, có billing, có cộng đồng. Đây là phần fleet đang tạo doanh thu thực.

maxmin.vn

SaaS · Cloud restreamLIVE

MAXMIN

maxmin.vn

Case study

Restream cloud cho seller livestream - 1 nguồn phát đồng thời Shopee, TikTok, Facebook. Không cần PC mạnh hay OBS.

Lập trình

Vue 3PiniaTailwind v4Express

•Pipeline FFmpeg server-side fan-out: 1 RTMP input → 3 đích song song, copy codec khi trùng để tiết kiệm CPU
•Auto-bitrate theo upstream user (probe + ABR ladder) - mạng dao động không drop frame
•Scheduler đặt lịch phát: worker pool + retry exponential khi nền tảng đích trả 429 / timeout

Đích phát song song3

Service tách (PM2 fork)4

Thiết kế

•Stream wizard 3 bước: kết nối kênh → chọn video → go live, từ login đến on-air ≤60 giây
•Dashboard realtime: timeline live, chart peak viewer (Chart.js), engagement breakdown từng nền tảng
•Mobile-first cho seller live tại chỗ - không cần laptop, không cần OBS, vuốt ngang giữa Shopee/TikTok/FB

SEO

•Schema SoftwareApplication + AggregateRating + Offer cho 3 gói pricing
•Pricing & blog tách bạch - tối ưu cho long-tail "restream shopee tiktok cùng lúc"
•Internal link dày từ blog hướng dẫn → trang pricing, schema HowTo cho từng bài

PSI mobile93

onthi365.com

Giáo dục · Live streamLIVE

OnThi365

onthi365.com

Case study

Ôn thi THPT - khoá học video, ngân hàng đề, đấu trường real-time, livestream đa nền tảng.

Lập trình

Next.js 16PostgreSQLExpressCapacitor (iOS/Android)

•Live restream multi-platform: 1 nguồn → 3 đích đồng thời (YouTube + FB + native)
•Đấu trường real-time qua WebSocket - match ngẫu nhiên, ELO, anti-cheat cơ bản
•PM2 cluster cho admin API, fork riêng cho live restream service (rolling deploy không gián đoạn)

Concurrent users (peak)2,400

Uptime 90 ngày99.94%

API P95180ms

Thiết kế

•Design system tự xây với token Tailwind v4 (không dùng UI kit bên ngoài)
•Dark mode có session persist - phục vụ học buổi tối
•Mobile-first: arena PvP tối ưu cho điện thoại, một tay cầm chơi được

SEO

•Schema.org: Course + ExamAlbum + LiveBroadcastEvent đầy đủ
•Sitemap.xml tự sinh tách theo loại nội dung (course, exam, post, channel)
•Open Graph + Twitter Card + Vietnamese-specific meta (locale vi_VN)

PageSpeed Insights mobile94

CLS0.02

LCP1.4s

vietnamid.vn

Social commerce · PWALIVE

VietnamID

vietnamid.vn

Case study

Mạng xã hội thương mại - feed, shop seller, đơn hàng, chat realtime. PWA cài được từ homescreen.

Lập trình

Vue 3PiniaVue RouterPWA

•30+ route lazy-load, code splitting theo view - initial bundle < 80KB gz
•PWA install homescreen iOS/Android, manifest custom theme-color, offline-first cho feed cache
•Pinia store tách feed / cart / chat / leaderboard, hydrate từ localStorage có versioning để không vỡ schema khi deploy

Thiết kế

•Bottom-nav mobile 5 tab giống native, gesture swipe chuyển tab
•Avatar generated qua DiceBear API - không cần CDN cho user-generated avatar, không tốn storage
•Shop UI dày: card sản phẩm có wishlist quick-add, comparison side-by-side, rating sao tổng hợp

SEO

•Schema Person + Product + Offer cho profile và shop
•Open Graph riêng từng post - share Facebook hiển thị thumbnail bài viết user
•Sitemap tách: users / shops / posts / topics - index từng nhóm độc lập

02 / 04

Mạng tin tức

- 4 dự án

4 site nội dung dùng chung CMS multi-site - News schema chuẩn Google News, edge deploy, canonical sạch giữa các site.

ganday.com.vn

Tin tức · Multi-site CMSLIVE

Gần Đây

ganday.com.vn

Case study

Mạng tin tức tổng hợp đa khu vực - đăng 1 lần, phân phối tới 4 site khác nhau (ganday, hongbienduongpho, vn247, lammmo).

Lập trình

Next.js 16PostgreSQLExpressBlock-based editor

•CMS multi-site: 1 backend phân phối nội dung tới 4 frontend tách biệt
•Block-based editor tự xây - paragraph / heading / image / quote / embed
•Static export với generateStaticParams cho mọi bài + chuyên mục

Số site phân phối4

TTFB trung bình95ms

Thiết kế

•Mỗi site có theme/logo riêng nhưng dùng chung component library
•Layout tin tức 3 cột truyền thống có ảnh nổi bật, tag, author
•Reading mode tự đếm thời gian đọc, hiện progress bar

SEO

•NewsArticle schema cho mọi bài viết (Google News ready)
•Sitemap-news.xml + sitemap-index theo Google Search Console spec
•AMP fallback cho mobile traffic chậm

Index hoá GSC (28 ngày)98%

PSI mobile92

vn247.vn

Cổng thông tin · EdgeLIVE

VN247

vn247.vn

Case study

Cổng tin tức 24/7 - sync nội dung từ Cloudflare D1, deploy edge worldwide với Cloudflare Pages.

Lập trình

Next.js 16Cloudflare PagesCloudflare D1 (SQLite edge)Wrangler

•Edge-first: deploy lên 300+ POP của Cloudflare worldwide
•D1 SQLite ngay tại edge - query <10ms từ mọi region
•Sitemap tự sinh sau mỗi build, push tới Search Console qua Indexing API

TTFB toàn cầu< 100ms

Bandwidth/tháng~50GB

Thiết kế

•Layout magazine-style - featured + grid chuyên mục
•Typography tối ưu đọc dài (line-height 1.7, max-width 65ch)
•Dark mode tự động theo system preference, override được

SEO

•Tự động ping Google Indexing API mỗi khi xuất bản
•Schema NewsArticle + BreadcrumbList + Organization
•Hreflang chuẩn cho phiên bản tiếng Việt

PSI desktop99

PSI mobile95

thitruongkinhte.net

Tin tức tài chính · RealtimeLIVE

Thị trường Kinh tế

thitruongkinhte.net

Case study

Tin tức tài chính, bất động sản, chứng khoán Việt Nam. Cập nhật giá vàng, tỷ giá, chỉ số VN-Index theo thời gian thực.

Lập trình

Next.js 16PostgreSQLWebSocketCrawler workers

•Realtime ticker giá vàng/tỷ giá/chứng khoán qua WebSocket
•Crawler chạy nền theo cron - đa nguồn, dedupe content bằng SimHash
•Push notification breaking news qua Web Push API + Service Worker

Latency tick → UI< 500ms

Thiết kế

•Ticker dải trên cùng - luôn hiển thị các chỉ số chính
•Color-coded green/red đồng nhất theo direction giá
•Layout tin chính + sidebar tin liên quan + box quảng cáo native

SEO

•Schema NewsArticle + FinancialProduct cho dữ liệu giá
•Sitemap-news + Google News publisher đã verify
•Internal link dày giữa bài tin và trang chỉ số liên quan

hongbienduongpho.vn

Tin tức · Văn hoáLIVE

Hồng Biên Đường Phố

hongbienduongpho.vn

Case study

Trang tin chuyên đề về đời sống, văn hoá đường phố. Tích hợp chung CMS với Gần Đây.

Lập trình

Next.js 16Cloudflare PagesCMS chia sẻ với Gần Đây

•Site con trong hệ thống multi-site - share backend, theme khác
•Static export deploy edge với Cloudflare Pages

Thiết kế

•Theme hồng/violet tạo cảm giác văn hoá-lifestyle riêng
•Photo gallery với lazy load + lightbox tự xây

SEO

•Schema NewsArticle với tag chuyên đề rõ ràng
•Canonical chuẩn - không cạnh tranh với site mẹ Gần Đây

03 / 04

E-commerce & tools

- 2 dự án

Marketplace số đa-tenant + bộ công cụ vận hành Facebook. Anti-fraud, payment escrow, rate-limit retry - vận hành 24/7.

shopaccgame.net

E-commerce · PaymentLIVE

Shop Acc Game

shopaccgame.net

Case study

Sàn giao dịch tài khoản game - upload, kiểm duyệt, thanh toán tự động, giao hàng số tức thì sau khi user trả tiền.

Lập trình

Vue 3PiniaExpressPostgreSQL

•Tích hợp 3 cổng thanh toán Việt Nam (VNPAY, MoMo, Zalopay) đồng thời
•Anti-fraud: device fingerprint + velocity check + manual review queue
•Escrow flow - tiền hold cho tới khi buyer confirm nhận hàng

Tỷ lệ giao dịch thành công96.8%

Số shop dùng chung backend3

Thiết kế

•Card sản phẩm preview screenshot game + skin/level lớn nhất
•Checkout 1 trang - chọn cổng → nhập số → xác nhận
•Trust badges: bảo hành, hoàn tiền, escrow

SEO

•Schema Product + Offer + AggregateRating
•URL slug có game name + level (tốt cho long-tail keyword)
•Sitemap split: products / categories / static

lammmo.vn

Tools · AutomationLIVE

Lammmo

lammmo.vn

Case study

Hướng dẫn kiếm tiền online + bộ công cụ Facebook (fb-tools subdomain) - quản lý fanpage, lên lịch bài, scrape comment.

Lập trình

Next.js 16Facebook Graph APIExpressPostgreSQL

•Tích hợp Facebook Graph API quản lý nhiều page/account đồng thời
•Cron scheduler đăng bài tự động, retry exponential khi FB rate limit
•Subdomain riêng `fb-tools.lammmo.vn` cho khu công cụ - tách hẳn nginx vhost

Thiết kế

•Tool dashboard cảm giác giống native desktop app - sidebar + workspace
•Form builder cho schedule post - drag drop ảnh, preview live

SEO

•Trang nội dung được tách hẳn khỏi tools (subdomain) → SEO không bị ảnh hưởng
•Long-form guide tối ưu cho keyword "kiếm tiền online", "facebook tool"
•Schema HowTo cho bài hướng dẫn từng bước

04 / 04

Personal & nội bộ

- 2 dự án

Personal brand + dashboard quản trị toàn fleet (11 site, 11 PostgreSQL, YouTube uploader, health-check song song).

trancongthang.vn

Personal brand · Internal toolsLIVE

Trần Công Thắng

trancongthang.vn

Case study

Website cá nhân + blog + công cụ nội bộ (auto, claw, datacenter, stream-au) phục vụ vận hành các site con.

Lập trình

Vue 3ExpressSQLiteSubdomain routing

•5 subdomain cho 5 tool nội bộ độc lập, share auth
•Internal dashboard quản lý toàn hệ thống fleet

Thiết kế

•Personal brand trang chủ tối giản, focus thông điệp + portfolio
•Internal tools UI dày, dense - ưu tiên thao tác nhanh

SEO

•Trang public chỉ index personal brand, tools subdomain `noindex`
•Schema Person cho trang chủ

datacenter.trancongthang.vn

Hệ thống quản trịNỘI BỘ

Datacenter (nội bộ)

datacenter.trancongthang.vn

Case study

Dashboard quản trị tập trung cho cả fleet - health check 11 site, explorer Postgres, planner content, upload YouTube tự động.

Lập trình

Vue 3ExpressSQLite (better-sqlite3)PostgreSQL pool

•Connection pool tới 11 PostgreSQL database khác nhau (mỗi site 1 db)
•Health check toàn fleet song song - DB ping + HTTP probe
•YouTube uploader: upload video + metadata + thumbnail tự động qua API

Site quản lý11

Database song song11

Thiết kế

•Dashboard dày - sidebar collapsible, multi-pane
•Table với sort/filter/export inline, không cần modal
•Internal tool nên ưu tiên density > whitespace

SEO

•Tool nội bộ - toàn site `noindex, nofollow`
•Auth required, không expose endpoint công cộng

+ / Lab

Studio Lab

- 4 dự án

Thí nghiệm, sub-tool, design study - không phải sản phẩm thương mại, là phạm vi kỹ thuật mở rộng: browser extension MV3, AI gateway, OBS overlay, Three.js.

LAB

Lab · OBS overlay