13 / WORK / CASE STUDY

環飽 EcoBǎo 剩食訂購平台

媒合店家餘食與消費者的剩食訂購平台,消費者與店家雙端;近期重構為純前端 demo 並統一設計系統,作為公開作品集。

TYPE: FULL STACK
SCOPE: 剩食平台 · 現代化重構
STACK: REACT · VITE · TAILWIND · REACT NATIVE · DJANGO · DRF
LINKS: LIVE

01 / PROBLEM

環飽 EcoBǎo 是一個以「剩食」為題的訂購媒合平台——店家把當日未售完但仍新鮮的餐點,以即期優惠或驚喜福袋的形式折扣出售,消費者於指定時段到店自取,藉此減少food waste。專案分為三個 codebase:React 網頁前端、React Native(Expo)行動 App 與 Django REST 後端,提供消費者與店家兩端介面。這輪工作的目標,是把這個學生時期的專題「翻新成能公開展示的作品集」。

02 / CONSTRAINTS

網頁前端原本綁死後端:透過 axios 打一組 ngrok 後端網址,一旦後端不在就整站空白,無法獨立展示。要當作品集 demo,必須讓它能脫離後端、部署到 GitHub Pages 靜態託管。
既有前端同時混用 MUI、Ant Design、Bootstrap 與 styled-components 四套樣式系統,視覺不一致、bundle 也肥。
三個 repo 都要公開,後端原本把 SECRET_KEY、資料庫帳密與郵件設定寫死在程式碼裡,直接開源等於外洩設定。

03 / ARCHITECTURE

前端從 Create React App 遷移到 Vite,並移除四套 UI 庫、收斂到單一 Tailwind 設計系統。設計語言以 UI/UX 評估重建為「Eco-Fresh(清新永續)」:翠綠主色 + 食物暖橙點綴、Noto Sans/Serif TC 中文字體,token 以 CSS 變數驅動、Web 與 App 共用,並支援深色模式與 prefers-reduced-motion。

為了脫離後端,建立一層純前端 mock API + seed 資料(店家、剩食商品、活動、評價、訂單、會員),以模擬延遲與 localStorage 持久化重現購物車、下單與取貨碼流程;整站改用 HashRouter 以相容 GitHub Pages,並以 GitHub Actions 自動建置部署。

後端(Django 4 + DRF)把 SECRET_KEY、資料庫、郵件與 API 金鑰等機敏設定全數抽離為環境變數並附 .env.example;補上 requirements 與完整 README,移除測試殘檔與未使用模組,並將誤入版控的 __pycache__ 與資產取消追蹤。行動端(Expo / React Native)則導入共用設計 token 與 UI 原子元件、統一導覽與樣式。

04 / RESPONSIBILITIES

本輪現代化重構(前端 Vite 遷移與 Eco-Fresh 設計系統、純前端 mock/seed 與 GitHub Pages 部署、後端機敏設定抽離與文件、App 設計語言套用)由我主導完成;原始平台為在學期間的團隊專題與競賽作品。

05 / CHALLENGES → SOLUTIONS

CHALLENGE

前端整站綁死後端,後端一離線就空白,無法當獨立 demo。

SOLUTION

在資料層與畫面之間插入一層 mock API,對外簽名與真實後端一致,底層改讀前端 seed 並以 localStorage 持久化;購物車、結帳、取貨碼、店家後台儀表板都能在無後端下完整跑完,直接靜態部署。

CHALLENGE

四套 UI 樣式庫並存,視覺破碎、維護成本高。

SOLUTION

先以 UI/UX 評估定出 Eco-Fresh 設計 token,再自建一套 Tailwind 元件庫(按鈕、卡片、標籤、對話框、分頁、評分、骨架⋯)逐頁替換,最終移除 MUI/Antd/Bootstrap/styled-components,收斂為單一設計系統。

CHALLENGE

後端要公開,但機敏設定散落在原始碼中。

SOLUTION

把 SECRET_KEY、資料庫、郵件與金鑰全部抽成環境變數並提供 .env.example 範本,補上 .gitignore、requirements 與 README,並將原本誤入版控的快取與資產取消追蹤——讓 repo 能安全開源。

06 / SYSTEM FACTS

Web · App · 後端 repo

消費者 / 店家雙端

4→1

UI 樣式庫收斂

SDGs 2·12

對應永續目標

07 / LESSONS

把舊專案變成能公開展示的作品集,最關鍵的往往不是重畫畫面,而是先讓它「能獨立運作」並「機敏資訊乾淨」——解耦後端與抽離設定,比視覺翻新更早要處理。

設計 token 先行,web 與 app 才能共享同一套視覺語言;一致性來自系統,而不是逐頁手刻。

08 / SCREENS

以下畫面皆為示範(mock)資料,不含任何真實使用者資料。

環飽首頁:惜食主標、搜尋列與平台減碳影響力數字 — 消費者首頁(Eco-Fresh 設計系統)

逛剩食頁:分類篩選、排序與剩食福袋商品卡(原價/優惠價/取貨倒數) — 逛剩食(篩選與剩食福袋卡片)

店家後台營運總覽:營收/訂單 KPI、近 7 日圖表與剩食售出佔比 — 店家後台儀表板(recharts 圖表)

四時煮食時 — AI 食療推薦與健康管理平台