網站連結 : 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
地址與經緯度之間的轉換
@react-google-maps/api
地圖顯示
npm install
安裝本專案所需要的所有套件- 註冊 Google Map API Token,在 src/constants 建立
googleMapToken.js
檔案,放入 API token,格式如下:
const googleMapToken = YOUR_API_TOKEN;
export default googleMapToken;
npm start
執行專案
npm run build
在網站註冊為會員之後,可以下訂食物、查看自己的所有訂單
可以透過賣場後台功能,上傳賣場主圖、頭像,編輯賣場名稱、聯絡電話、賣場地址、賣場介紹,也可以設定賣場分類讓用戶更容易搜尋到指定食物,沒有設定的話系統會自動設定為未分類
以註冊為賣家的使用者,可開始新增及編輯商品名稱、圖片、商品分類、價格、數量、製造日期及有效日期,或者刪除該商品
可以利用關鍵字搜尋、點擊固定分類搜尋該分類所有食物,還可以依照最新上架、低價優先、即期優先篩選所有食物
可以依照自己所在地點,在地圖查看附近的店家,也可以利用關鍵字搜尋感興趣的食物
將欲訂購的食物、數量加入購物車內,之後可以在購物車查看所有加入購物車的食物,也可以在購物車裡修改數量或是刪除該筆食物,同一位賣家的所有食物視為同一張訂單,一次只能訂購一張訂單(同一位賣家)
- 用戶可以透過訂單列表查看自己下訂的食物、地點、時間
- 賣家可以透過訂單列表查看賣場所有被訂購的食物、地點、時間
買賣家皆可以透過待取貨、已完成、已取消篩選所有訂單的狀態
會員在賣場頁面按下「傳送訊息」按鈕,連接至訊息頁面傳訊給賣家,可於訊息頁面查看、回覆所有與賣家及管理員的訊息,賣家也可在訊息頁面查看回覆所有來自會員的訊息。