LIFE

前端 github： https://github.com/zyuan8591/life_project_fe

後端 github： https://github.com/zyuan8591/life_project_be

網站頁面及功能

頁首

快速連結網站頁面、關鍵字全站搜尋 ( 商品、食譜、活動 )

首頁

熱門商品及食譜 slider 、活動頁面連結以及快速註冊按鈕、與後台客服中心建立一對一聊天室

會員中心

註冊及登入、修改個人資料、重設密碼、刪除收藏、修改刪除新增過的食譜及活動、查看訂單

商品

商品銷售排行、快速篩選及排序、商品收藏及加入購物車、商品評論、商品限時優惠

食譜

類別篩選、食譜名稱及食材搜尋、新增食譜、收藏及評論食譜

活動專區

野餐及露營活動地圖一覽、地圖快速篩選及搜尋

野餐

官方活動及揪團活動、使用者新增揪團、快速搜尋及排序篩選、收藏及加入/退出活動

露營

快速搜尋及排序篩選、收藏及加入/退出活動、當日天氣 API

購物車

選取指定項目結帳、使用會員點數折扣、LinePay 支付、信用卡支付

最新消息

一頁式列表陳列消息、快速篩選消息類別

網站後台

商品專區

上下架商品、編輯商品資訊、新增限時優惠折扣

活動專區

上下架活動、編輯活動資訊、排序

客服中心

向前台使用者發送公告訊息、與前台使用者建立一對一聊天室

使用技術

前端技術：React、Sass、Bootstrap

後端技術：Node.js、Express、MySQL

設計工具：Figma、PhotoShop

其他技術：npm、Git、Github、Restful API

使用套件

前端使用套件：

• antd：網頁 UI 元件
• axios：串接 API
• email.js：會員驗證信件
• emotion：CSS-in-JS
• formik、yup：表單驗證
• fullcalendar：使用者行事曆
• leaflet：活動地圖
• LinePay：訂單付款支付方式
• react-beautiful-dnd：對表單項目重新排序
• react-icons：icons
• swiper：輪播牆

後端使用套件：

• argon2：密碼加密
• cors：跨來源資源共享
• express：api router
• express-session：session 儲存資料
• express-validator：資料驗證
• line-pay-merchant：串接 LinePay 金流
• mysql2：連接資料庫
• multer：上傳圖片

前後端使用套件：

• dotenv：讀取 .env 檔案
• moment：日期格式
• socket.io：前後台即時聊天室