購物網站 Demo (Next-Shop)

Next-Shop：基於 Next.js 的現代化動態電商購物網站實踐

🎯 專案介紹

本專案是一個完整串接前後端資料流的現代化電商購物網站。前端採用 Next.js 框架搭配 Redux Toolkit 進行狀態管理，後端則使用 Express 搭建 RESTful API，並串接 MongoDB 資料庫進行真實的商品與資料持久化儲存。專案完整實作了商品瀏覽、動態路由、以及具備緩存記憶功能的購物車系統。

🛠️ 技術架構

• 前端框架：Next.js (React) + SCSS (Sass)
• 後端架構：Node.js + Express
• 資料庫管理：MongoDB + Mongoose ORM
• 狀態管理：Redux Toolkit + Redux Persist (LocalStorage 購物車同步)
• 後端託管平台：Render (Free Instance)

✨ 核心特色

1. MERN/NEXT 全端架構與 RESTful API 串接 後端採用 Express 撰寫高效能的 API 路由，透過 Mongoose 定義清晰的商品（Products）與使用者資料 Schema，並將真實數據儲存於 MongoDB 雲端資料庫。前端非同步調用後端 API，實現資料驅動（Data-Driven）的商品動態渲染。

2. Redux Toolkit 全域狀態與購物車持久化 為了處理電商最核心的購物車邏輯，專案捨棄了複雜的 Context API，改採業界標準的 Redux Toolkit 進行全域狀態管理。並深度整合 Redux Persist，將使用者的購物車內容即時同步至瀏覽器的 LocalStorage，確保使用者在重新整理網頁或不經意關閉分頁時，購物車內的商品依然能夠被完美保留。

3. 多維度商品展示與響應式動態路由 前端畫面使用 Sass/SCSS 刻劃出具備高度一致性的現代電商 UI。系統載入 MongoDB 的商品資料後，以響應式網格（Grid Layout）精緻呈現；並結合 Next.js 的動態路由機制，點擊特定商品卡片即可無縫跳轉，兼顧視覺張力與使用者體驗。

💡 專案反思與 UX 優化（服務冷啟動處理）

📌 開發者備忘筆記：

由於後端 Express 伺服器與 MongoDB API 部署於 Render 的免費雲端託管服務上，若專案在 15 分鐘內無人造訪，伺服器會自動進入休眠狀態（Sleep Mode）。

當下一個使用者首次點擊網頁時，需要等待約 30 秒讓伺服器進行**「冷啟動（Cold Start）」**。為了優化這段受限於客觀條件的等待體驗，前端設計了流暢的資料載入狀態提示（Loading States），引導使用者在服務喚醒期間獲得良好的視覺回饋，確保全端應用在各種限制下依然具備極高的可用性與落地完成度。

🌐 專案連結