Pet eCommerce 是一個基於 Vue.js + Express.js + Firebase + JWT 建構而成的電子商務網站，支援 PWA 及 RWD，UI 皆以 SCSS 並遵循 OOCSS 手刻而成，強調樣式的模組化及可重用性，平台使用者主要可分為管理員 (admin)、會員 (member) 兩種身分，管理員可依造主題快速擴展商店，會員可透過前台購物功能進行消費等行為。
- Demo：https://pet-ecommerce.netlify.app/
- API Doc：https://github.com/awdr74100/pet-ecommerce-api
- 2020/10/04：修復 Chrome 80+ 針對跨域 Cookie 的規則調整 (SameSite 必須從預設 Lax 改為 None 同時加上 Secure 屬性)
- 2020/10/04：修復 IOS 裝置中 Chrome 與 Safari 樣式兼容問題
此專案為 PetStore 的重製版本，主要改善一些重大錯誤及導入 Vuex 管理狀態等，包含 UI、UX 也全部打掉重練，這次嘗試從後端的建立與部署到前端的切版與串接全部跑過一遍，學習建構一個完整的全端專案。此專案支援 RWD、SPA、PWA，意即在手機上使用也不會有體驗低落的問題。
- 管理員後台功能 (商品管理、庫存管理、銷售量管理、優惠卷管理、訂單管理) ✔
- 會員前台購物功能 (購物車、訂單管理、結帳付款、轉盤遊戲) ✔
- 優化後台圖片上傳 (改使用 Base64 預覽圖片) ✔
- 將 icon 改為 SVG 格式並使用 mask-image 改變顏色 ✔
- 使用 Prerender SPA 預渲染應用 ✔
- 單元測試 (習得後完成)
- 串接金流 (習得後完成)
- 更新為 Vue 3.0 (進入測試)
- 基於 Token 的身分驗證機制 (JWT)
- 自製 Grid System 與 Spacing 完成響應式設計
- 使用 Firebase Authentication 管理用戶
- 使用 Firebase Realtime Database 操作資料庫
- 使用 Firebase Storage 上傳圖片
- 使用 Vuex 管理狀態
- 購物車 (CRUD)
- 商品管理 (CRUD)
- 優惠卷管理 (CRUD)
- 訂單管理 (CRUD)
- 發送密碼重製郵件
- 模擬訂單週期各事件
- 轉盤遊戲
- 骨架屏載入
-
前端
- Vue.js / Vuex / Vue Router / Vue CLI 4
- Webpack / Prerender SPA
- JavaScript (ES6+)
- AJAX / Axios
- OOCSS / BEM / 7-1 Pattern
- SCSS
- RWD
- PWA
- Web APIs (FileRender、FormData、DragEvent、Web Storage)
- Netlify Deployment
-
後端
- Node.js / Express.js
- Firebase
- JWT / Cookie
- RESTful API
- Vercel Deployment
-
代碼風格
- ESLint (Airbnb)
- Prettier
-
額外插件
- vue-axios
- vue-meta
- vue-fontawesome
- vue-js-modal
- vue-luck-draw
- vue-awesome-swiper
- vue-loading-skeleton
- vue-slider-component
- vue-progressbar
- vue-clipboard2
- vue-scrollto
- vee-validate
- vue2-datepicker
-
其他
- Responsive Grid System
- Responsive Spacing
- Theme Color
- 前台購物 - 首頁
- 前台購物 - 關於我們
- 前台購物 - 最新消息
- 前台購物 - 熱銷商品
- 前台購物 - 商品資訊
- 前台購物 - 優惠活動
- 前台購物 - 領養專區
- 前台購物 - 聯絡我們
- 前台購物 - 登入/註冊會員
- 會員功能 - 最近加入商品
- 會員功能 - 購物車
- 會員功能 - 結帳付款(1)
- 會員功能 - 結帳付款(2)
- 會員功能 - 結帳付款(3)
- 會員功能 - 訂單管理
- 後台管理 - 商品管理
- 後台管理 - 優惠卷管理
- 後台管理 - 訂單管理
- 互動視窗 - 轉盤遊戲
- 互動視窗 - 新增商品
- 互動視窗 - 上下架商品
- 互動視窗 - 刪除商品
- 互動視窗 - 產生新的優惠卷
- 互動視窗 - 啟禁用優惠卷
- 互動視窗 - 刪除優惠卷
- 骨架屏 - 商品列表
- 骨架屏 - 商品資訊
- 骨架屏 - 購物車
- 骨架屏 - 商品管理、優惠卷管理、訂單管理
- 本作品內圖片、內容等，純粹為個人練習前端使用，不做任何商業用途。