iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

使用 React + Node.js + MongoDB 打造電商網站 系列

本次鐵人賽主題為「使用 React + Node.js + MongoDB 打造電商網站」。在 30 天挑戰中,我將完成一個模擬賣場平台,前端使用 React + Tailwind CSS 建立商品展示、會員登入與購物車功能;後端以 Node.js + Express 架設 API,串接 MongoDB 儲存商品與會員資料,並加入密碼加密與 JWT 權限管理等資安措施。網站亦具備後台管理功能,可新增、修改與刪除商品,並提供搜尋與分類功能。最後,網站將部署到雲端平台,讓所有人都能實際瀏覽與操作。本系列文章將完整記錄從環境建置到功能開發與部署的過程,讀者可跟著實作,最終完成專屬電商網站。

參賽天數 22 天 | 共 22 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day11 商品詳細頁 + 前端新增商品

今天是鐵人賽 Day11,目標是完成商品詳細頁,能顯示商品圖片、價格、描述與庫存,並串接後端 API,讓使用者可以看到完整商品資訊;另外,也加上前端可以新增商品...

2025-09-25 ‧ 由 yangcheng 分享
DAY 12

Day 12 新增商品搜尋功能

今天是鐵人賽 Day12,目標是新增商品搜尋功能,能夠依商品名稱與描述來篩選商品,讓使用者能更快速找到想要的商品,同時保留新增商品的功能。 1️⃣ 前端 Hom...

2025-09-26 ‧ 由 yangcheng 分享
DAY 13

Day13 新增分類功能,首頁依類型篩選商品

今天是鐵人賽 Day 13,目標是新增「分類功能」,讓桌遊商品可以依類型顯示,並且在新增商品時可以選擇分類,首頁也能篩選指定類型的商品。這對於商城的使用者體驗非...

2025-09-27 ‧ 由 yangcheng 分享
DAY 14

Day14 商品多圖與管理功能完善

今天是鐵人賽 Day14,目標是完成商品詳細頁多圖輪播功能,新增商品頁支援多張圖片上傳,同時改善 UI 互動與回首頁功能,調整整體頁面配色,並新增前端商品刪除功...

2025-09-28 ‧ 由 yangcheng 分享
DAY 15

Day15 會員註冊 API 與密碼加密實作

今天是鐵人賽 Day15,目標是完成會員註冊 API,加入密碼加密功能(bcrypt),可透過 Postman 測試註冊、查詢與刪除會員,並新增密碼長度驗證(至...

2025-09-29 ‧ 由 yangcheng 分享
DAY 16

Day16 會員登入 API(JWT 驗證)與 Admin 權限控制

今天是鐵人賽 Day16,目標是完成會員登入 API,導入 JWT 驗證,並加入 admin 權限控制,確保只有登入使用者可存取受保護 API,管理者才可刪除會...

2025-09-30 ‧ 由 yangcheng 分享
DAY 17

Day17 React 前端註冊與登入頁面 + JWT 儲存實作

今天是鐵人賽 Day17,目標是完成 React 前端註冊與登入頁面,並將 JWT 儲存到 localStorage,讓前端可以呼叫受保護 API。 1️⃣ 註...

2025-10-01 ‧ 由 yangcheng 分享
DAY 18

Day18 會員/管理員登入後導向個人頁面(Profile)

今天是鐵人賽 Day18,目標是讓會員與管理員登入後都能進入「個人頁面 (Profile)」,並在此頁面中顯示自己的基本資料。 1️⃣ 修改 App.jsx 路...

2025-10-02 ‧ 由 yangcheng 分享
DAY 19

Day19 完成購物車 API:新增、修改數量與刪除商品

今天是鐵人賽 Day19,目標是建立購物車 API,讓會員能夠新增商品到購物車、修改數量,以及刪除商品。 1️⃣ 後端 Cart Model (Cart.js)...

2025-10-03 ‧ 由 yangcheng 分享
DAY 20

Day20 前端串接購物車 API:完成「加入購物車」功能

今天是鐵人賽 Day20,目標是讓前端商品列表能串接購物車 API,完成「加入購物車」功能,使用者可直接將商品加入自己的購物車。 1️⃣ 前端 Home.jsx...

2025-10-04 ‧ 由 yangcheng 分享