本次鐵人賽主題為「使用 React + Node.js + MongoDB 打造電商網站」。在 30 天挑戰中,我將完成一個模擬賣場平台,前端使用 React + Tailwind CSS 建立商品展示、會員登入與購物車功能;後端以 Node.js + Express 架設 API,串接 MongoDB 儲存商品與會員資料,並加入密碼加密與 JWT 權限管理等資安措施。網站亦具備後台管理功能,可新增、修改與刪除商品,並提供搜尋與分類功能。最後,網站將部署到雲端平台,讓所有人都能實際瀏覽與操作。本系列文章將完整記錄從環境建置到功能開發與部署的過程,讀者可跟著實作,最終完成專屬電商網站。
今天是鐵人賽第一天的文章,來講述我為何選擇此主題以及希望自己30天後能達成的目標! 說實話,我本身也是第一次做完整的前後端專案的小白。因家中收藏了不少桌遊,但以...
今天是鐵人賽 Day2,主要目標是完成開發環境的建置,為後續前後端開發做好準備。作為第一次做完整專案的新手小白,這一天的任務非常重要,讓我能順利進入開發階段。今...
今天是鐵人賽Day3,正式開始後端的第一步,目標是建立 Node.js + Express 後端伺服器,並成功連接到 MongoDB Atlas。這是專案能夠存...
今天是鐵人賽 Day4,正式進入後端核心——連接 MongoDB Atlas 並建立第一個商品資料 Collection,透過 API 可以讀取資料。這是專案能...
今天是鐵人賽 Day5,目標是設計網站的資料結構,也就是建立 商品(Product)、會員(User)、購物車(Cart) 的 schema,並用 ERD 與...
今天是鐵人賽 Day6,目標是把前面設計好的商品資料結構(Product schema)實作成可以操作的 API,包括新增商品、取得所有商品、刪除商品,並用 P...
今天是鐵人賽 Day7,我整理了這一週的後端學習心得,主要是對 伺服器、資料庫、API 的完整流程做回顧,也把遇到的問題和收穫記錄下來。 1️⃣ 本週完成的核心...
今天是鐵人賽 Day8,目標是建立 React 前端專案,並整合 Tailwind CSS,讓我們可以用簡單的 class 快速做出漂亮的 UI。這是前端開發的...
今天是鐵人賽 Day9,目標是設計網站首頁的雛形,加入 Header、Main 區塊與 Footer,讓專案不再只有測試用的「Hello Tailwind!」,...
今天是鐵人賽 Day10,目標是讓 React 前端串接後端商品 API,並在首頁顯示商品清單。以求能看到真實資料呈現在網頁上,對整個專案流程非常重要。 1️⃣...