[Day-1] 拿好藏寶圖,準備出航


Posted by KevinCodePlace on 2020-12-17

這個課程佔了 45 小時,是一個非常大的專案。一不小心就不知道在做什麼了。
為了避免見樹不見林,首先來看看我們會做哪些事情。主要是以下分成三塊:身分驗證、管理員功能、使用者功能

一、身分驗證:登入登出、Firebase 驗證、串接資料庫

1. 建立前端導覽 Navbar,可以換頁
2. 設定 Firebase 驗證帳號,並將使用者資料存入 redux
3. 設定 MongoDB,將使用者資料存入資料庫
4. 用 Firebase 驗證帳號使否為管理員
5. 將後台依身分顯示不同畫面

二、管理員功能:後台上架產品、展示產品到使用者頁面

1. 新增項目 CRUD(如:品牌名稱 Microsoft)
2. 新增子項目 CRUD(如:商品名稱 Surface 系列)
3. 新增產品資料庫,連結項目與子項目資料
4. 新增產品影像上傳功能
5. 新增或刪除產品
6. 將產品資訊顯示到前端

三、使用者功能:評分機制、篩選機制、購物車、折價券、金流

1. 產品評分系統
2. 產品項目與子項目前端頁面
3. 篩選系統(價格範圍、評分、項目、子項目、運送、品牌、顏色)
4. 購物車系統
5. 結帳系統(含輸入優惠券)
6. 串接金流
7. 訂單後端資料庫
8. 使用者購買紀錄頁面
9. 發票(PDF)下載功能
10. 下次再買頁面

完成以上最後部署就完成拉!

真的是非常浩大的工程,但想必這個系列完會學到很多!未來如果要打造自己的前後端 side project 就不是辦不到啦!

服用說明

因為 code 最後會放在 codesandbox 上,所以不會把全部的 code 貼上來,只會把有學習的點拿出來講,建議把 code 打開放在旁邊跟著看!


#前端 #後端 #架構 #電商網站 #自我學習







Related Posts

[Note] webpack5 problem: local server CORS

[Note] webpack5 problem: local server CORS

【Day03】 Node Red使用教學

【Day03】 Node Red使用教學

CSS保健室|opacity

CSS保健室|opacity


Comments