本次鐵人賽主題為「使用 React + Node.js + MongoDB 打造電商網站」。在 30 天挑戰中,我將完成一個模擬賣場平台,前端使用 React + Tailwind CSS 建立商品展示、會員登入與購物車功能;後端以 Node.js + Express 架設 API,串接 MongoDB 儲存商品與會員資料,並加入密碼加密與 JWT 權限管理等資安措施。網站亦具備後台管理功能,可新增、修改與刪除商品,並提供搜尋與分類功能。最後,網站將部署到雲端平台,讓所有人都能實際瀏覽與操作。本系列文章將完整記錄從環境建置到功能開發與部署的過程,讀者可跟著實作,最終完成專屬電商網站。
今天是鐵人賽 Day11,目標是完成商品詳細頁,能顯示商品圖片、價格、描述與庫存,並串接後端 API,讓使用者可以看到完整商品資訊;另外,也加上前端可以新增商品...
今天是鐵人賽 Day12,目標是新增商品搜尋功能,能夠依商品名稱與描述來篩選商品,讓使用者能更快速找到想要的商品,同時保留新增商品的功能。 1️⃣ 前端 Hom...
今天是鐵人賽 Day 13,目標是新增「分類功能」,讓桌遊商品可以依類型顯示,並且在新增商品時可以選擇分類,首頁也能篩選指定類型的商品。這對於商城的使用者體驗非...
今天是鐵人賽 Day14,目標是完成商品詳細頁多圖輪播功能,新增商品頁支援多張圖片上傳,同時改善 UI 互動與回首頁功能,調整整體頁面配色,並新增前端商品刪除功...
今天是鐵人賽 Day15,目標是完成會員註冊 API,加入密碼加密功能(bcrypt),可透過 Postman 測試註冊、查詢與刪除會員,並新增密碼長度驗證(至...
今天是鐵人賽 Day16,目標是完成會員登入 API,導入 JWT 驗證,並加入 admin 權限控制,確保只有登入使用者可存取受保護 API,管理者才可刪除會...
今天是鐵人賽 Day17,目標是完成 React 前端註冊與登入頁面,並將 JWT 儲存到 localStorage,讓前端可以呼叫受保護 API。 1️⃣ 註...
今天是鐵人賽 Day18,目標是讓會員與管理員登入後都能進入「個人頁面 (Profile)」,並在此頁面中顯示自己的基本資料。 1️⃣ 修改 App.jsx 路...
今天是鐵人賽 Day19,目標是建立購物車 API,讓會員能夠新增商品到購物車、修改數量,以及刪除商品。 1️⃣ 後端 Cart Model (Cart.js)...
今天是鐵人賽 Day20,目標是讓前端商品列表能串接購物車 API,完成「加入購物車」功能,使用者可直接將商品加入自己的購物車。 1️⃣ 前端 Home.jsx...