Problem問題背景
The project needed more than a static catalog. Products required structured data, multiple images, categories, search and filters, SEO metadata, catalog PDFs, customer inquiries, and an admin workflow for ongoing maintenance.這個專案不只是靜態型錄。商品需要結構化資料、多張圖片、分類、搜尋與篩選、SEO 資料、PDF 型錄、客戶詢價，以及能長期維護的後台流程。
Approach做法
I split the system into a public storefront, admin interface, API server, database schema, shared validation/spec libraries, and test scripts. This made the product easier to reason about and safer to change.我將系統拆成公開前台、後台介面、API server、資料庫 schema、共用驗證與規格模組，以及測試腳本，讓專案更容易維護與修改。
Key Features主要功能
- Product list, search, filters, product detail pages, related products, and recommended pairings.商品列表、搜尋、篩選、商品詳情、相關商品與推薦搭配。
- Admin product CRUD, publish toggle, sort order, image upload/sorting, categories, SEO fields, and CSV import.後台商品 CRUD、上下架、排序、圖片上傳與排序、分類、SEO 欄位與 CSV 匯入。
- Inquiry workflow with status management, uploaded attachments, and storage cleanup.詢價流程，包含狀態管理、附件上傳與儲存清理。
- Dashboard metrics for products, categories, recommendations, pending inquiries, and R2 usage.後台儀表板，呈現商品、分類、推薦、待處理詢價與 R2 使用量。
- Catalog PDF upload and storefront display.PDF 型錄上傳與前台展示。
Public Screenshots公開頁面截圖
These screenshots are captured from the public storefront only. Admin screens and private operational data are intentionally excluded.以下截圖只取自公開前台；後台畫面與私有營運資料刻意不放入作品集。
Delivery Quality交付品質
The repository includes build checks, API smoke testing, and Playwright E2E tests covering homepage load, admin login, product CRUD, product detail, search, SEO title, settings, inquiries, attachments, and mobile admin navigation.專案包含 build 檢查、API smoke test 與 Playwright E2E，覆蓋首頁載入、後台登入、商品 CRUD、商品詳情、搜尋、SEO 標題、設定、詢價、附件與手機版後台導覽。
What This Shows呈現能力
This project demonstrates product ownership beyond UI work: data modeling, file handling, operational admin design, production hosting, DNS/domain setup, and verification before release.這個專案不只展示 UI 能力，也包含資料建模、檔案處理、後台營運流程設計、正式部署、DNS/網域設定與上線前驗證。