限時取餐 MealTime

網站連結 : http://meal-time-official.herokuapp.com

專案簡介

限食取餐 meal time 是因剩食議題而誕生的食物交易贈送平台。現代社會帶給人們資源與便利，但同時也造成了許多食物的浪費。透過限食取餐 meal time，可以即時將過剩的食物放上平台，提供給需要的人，讓食物不再有浪費。

這是限時取餐的前端原始碼，採用 React Hooks + Redux Toolkit 開發。

專案後端請參考：後端原始碼

• 用戶可使用功能：
  • 商品系統：關鍵字搜尋、固定分類搜尋，可以瀏覽網站上所有刊登的食物，且能利用最新、低價、即期篩選搜尋結果之食物
  • 購物車系統：查看欲購買的項目及內容，並且成立訂單
  • 個人資料管理系統：編輯個人聯絡資訊
  • 訂單系統：掌握所有訂單的最新狀態、可以完成或取消訂單
  • 地圖系統：透過所在位置搜尋附近店家、搜尋食物
• 賣家可使用功能：
  • 可提供賣場圖片、營業時間、賣場介紹、聯絡方式、賣場分類，讓買家更了解、更容易搜尋到賣場
  • 可於賣家後台刊登、編輯所有上架的食物

使用技術

前端框架

• React Hooks
• React Dom

第三方套件

• Redux Toolkit
• React Router 路徑
• styled-components
• atomize 網頁基本樣式
  • react-transition-group 安裝
  • npm styletron-engine-atomic styletron-react with React
• react-loading 讀取畫面
• react-geocode 地址與經緯度之間的轉換

第三方 API

• @react-google-maps/api 地圖顯示

安裝

1. npm install 安裝本專案所需要的所有套件
2. 註冊 Google Map API Token，在 src/constants 建立 googleMapToken.js 檔案，放入 API token，格式如下：

const googleMapToken = YOUR_API_TOKEN;
export default googleMapToken;

3. npm start 執行專案

部署

npm run build

專案 DEMO

註冊為會員、編輯會員資料

在網站註冊為會員之後，可以下訂食物、查看自己的所有訂單

註冊賣家、編輯賣家資料

可以透過賣場後台功能，上傳賣場主圖、頭像，編輯賣場名稱、聯絡電話、賣場地址、賣場介紹，也可以設定賣場分類讓用戶更容易搜尋到指定食物，沒有設定的話系統會自動設定為未分類

新增、編輯商品

以註冊為賣家的使用者，可開始新增及編輯商品名稱、圖片、商品分類、價格、數量、製造日期及有效日期，或者刪除該商品

食物搜尋

可以利用關鍵字搜尋、點擊固定分類搜尋該分類所有食物，還可以依照最新上架、低價優先、即期優先篩選所有食物

地圖

可以依照自己所在地點，在地圖查看附近的店家，也可以利用關鍵字搜尋感興趣的食物

訂購食物

將欲訂購的食物、數量加入購物車內，之後可以在購物車查看所有加入購物車的食物，也可以在購物車裡修改數量或是刪除該筆食物，同一位賣家的所有食物視為同一張訂單，一次只能訂購一張訂單（同一位賣家）

查看訂單

• 用戶可以透過訂單列表查看自己下訂的食物、地點、時間
• 賣家可以透過訂單列表查看賣場所有被訂購的食物、地點、時間

買賣家皆可以透過待取貨、已完成、已取消篩選所有訂單的狀態

傳送訊息

會員在賣場頁面按下「傳送訊息」按鈕，連接至訊息頁面傳訊給賣家，可於訊息頁面查看、回覆所有與賣家及管理員的訊息，賣家也可在訊息頁面查看回覆所有來自會員的訊息。

License

MIT