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 1

Day1 從0開始,打造自己的電商平台

今天是鐵人賽第一天的文章,來講述我為何選擇此主題以及希望自己30天後能達成的目標! 說實話,我本身也是第一次做完整的前後端專案的小白。因家中收藏了不少桌遊,但以...

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

Day2 環境建置完成,準備就緒

今天是鐵人賽 Day2,主要目標是完成開發環境的建置,為後續前後端開發做好準備。作為第一次做完整專案的新手小白,這一天的任務非常重要,讓我能順利進入開發階段。今...

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

Day3 正式開始後端的第一步

今天是鐵人賽Day3,正式開始後端的第一步,目標是建立 Node.js + Express 後端伺服器,並成功連接到 MongoDB Atlas。這是專案能夠存...

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

Day4 後端進階—連接資料庫並建立商品資料

今天是鐵人賽 Day4,正式進入後端核心——連接 MongoDB Atlas 並建立第一個商品資料 Collection,透過 API 可以讀取資料。這是專案能...

2025-09-18 ‧ 由 yangcheng 分享
DAY 5

Day5 規劃網站資料結構(商品、會員、購物車)

今天是鐵人賽 Day5,目標是設計網站的資料結構,也就是建立 商品(Product)、會員(User)、購物車(Cart) 的 schema,並用 ERD 與...

2025-09-19 ‧ 由 yangcheng 分享
DAY 6

Day6 建立商品 API(新增、讀取、刪除、修改)

今天是鐵人賽 Day6,目標是把前面設計好的商品資料結構(Product schema)實作成可以操作的 API,包括新增商品、取得所有商品、刪除商品,並用 P...

2025-09-20 ‧ 由 yangcheng 分享
DAY 7

Day7 心得整理 — 後端流程回顧

今天是鐵人賽 Day7,我整理了這一週的後端學習心得,主要是對 伺服器、資料庫、API 的完整流程做回顧,也把遇到的問題和收穫記錄下來。 1️⃣ 本週完成的核心...

2025-09-21 ‧ 由 yangcheng 分享
DAY 8

Day8 建立 React 專案 + Tailwind CSS

今天是鐵人賽 Day8,目標是建立 React 前端專案,並整合 Tailwind CSS,讓我們可以用簡單的 class 快速做出漂亮的 UI。這是前端開發的...

2025-09-22 ‧ 由 yangcheng 分享
DAY 9

Day9 設計網站首頁雛形(Header、Footer、版面配置)

今天是鐵人賽 Day9,目標是設計網站首頁的雛形,加入 Header、Main 區塊與 Footer,讓專案不再只有測試用的「Hello Tailwind!」,...

2025-09-23 ‧ 由 yangcheng 分享
DAY 10

Day10 React 串接商品 API,首頁顯示商品清單

今天是鐵人賽 Day10,目標是讓 React 前端串接後端商品 API,並在首頁顯示商品清單。以求能看到真實資料呈現在網頁上,對整個專案流程非常重要。 1️⃣...

2025-09-24 ‧ 由 yangcheng 分享