咖啡廳顧客點餐及商家後台管理平台

HTML JavaScript css Bootstrap 5 firebase Groq Figma

專案概述

開發一個整合顧客端與商家端的電商平台。顧客端專注於使用者體驗與流暢的下單流程,商家端則提供產品管理與訂單追蹤功能,實現前後端分離的開發架構。

顧客端系統

首頁

以大面積形象圖片作為視覺焦點,搭配簡潔明確的導覽列,引導使用者快速理解網站定位與主要功能。整體版面留白適中、資訊層級清楚,讓使用者一進入網站即可建立良好的第一印象,並順利延伸至後續瀏覽與點餐流程。

菜單頁面

提供清晰的商品分類與吸引人的圖片,使用者能輕鬆找到所需,享受流暢的點餐體驗。

購物車系統

購物車系統使顧客可以輕鬆管理訂單,透過即時更新商品數量和總價,提升使用者的便利性和體驗感。

取餐系統

透過即時狀態回饋機制,清楚呈現餐點製作進度,協助使用者有效掌握取餐時機,提升整體流程效率與使用體驗。

商家端系統

登入頁面

使用Google身分驗證服務,告別傳統帳密的繁瑣管理流程與忘記密碼的困擾,管理者可靈活設定存取權限,確保資料安全無虞。

即時訂單管理系統

總共有待處理訂單已完成已取消三種不同的訂單狀態,當有新訂單時,待處理訂單頁面會自動出現新訂單,每筆訂單下方都會有兩個狀態按鈕,按下接單按鈕時,顧客端就會更新訂單狀態至餐點製作中,按下完成訂單按鈕時,顧客端系統會顯示請前往取餐,該筆訂單也會從待處理頁面移到已完成頁面。
如商家未於5分鐘內接單,系統將自動取消訂單,並通知顧客訂單已取消。

AI 智能文案助理

使用Groq AI功能,輸入商品名稱、售價與關鍵字,按下"開始AI生成內容"按鈕後開始進行AI文案生成,如大致滿意生成內容,按下"確認生成內容"按鈕後將AI文案自動帶入至商品上架頁面。

智慧商品上架系統

可以將AI文案進行細部調整,加上產品分類標籤後即可進行上架,大幅降低商家上架商品的難度與時間。亦提供手動輸入來進行產品上架,並且提供即時修改編輯功能。

視覺化商品清單管理

採用卡片式佈局,展示商品圖片、名稱、價格、分類標籤與上架狀態。按下每個產品下方的修改按鈕,即可將產品資訊帶入修改模式進行修改,按下刪除按鈕即可將該產品進行下架。