13 / WORK / CASE STUDY

EcoBǎo Food-Surplus Marketplace

A marketplace matching shops’ surplus food with buyers — consumer and merchant portals. Recently refactored into a standalone front-end demo with a unified design system, opened up as a public portfolio piece.

TYPE: FULL STACK
SCOPE: Food-surplus platform · modernization
STACK: REACT · VITE · TAILWIND · REACT NATIVE · DJANGO · DRF
LINKS: LIVE

01 / PROBLEM

EcoBǎo is an ordering-and-matching marketplace built around food surplus — shops sell same-day unsold-but-fresh meals at a discount as “deals” or “surprise bags,” and buyers pick them up in a set window, cutting food waste. It spans three codebases: a React web frontend, a React Native (Expo) app and a Django REST backend, serving consumer and merchant sides. This round of work was about turning that student-era project into something presentable as a public portfolio piece.

02 / CONSTRAINTS

The web frontend was hard-wired to the backend: it hit an ngrok URL via axios, so the whole site went blank without a live server — impossible to demo standalone. To become a portfolio demo it had to run without any backend and deploy to static GitHub Pages hosting.
The existing frontend mixed four styling systems at once — MUI, Ant Design, Bootstrap and styled-components — producing inconsistent visuals and a heavy bundle.
All three repos were going public, but the backend hardcoded its SECRET_KEY, database credentials and mail settings in source — open-sourcing as-is would leak configuration.

03 / ARCHITECTURE

The web app was migrated from Create React App to Vite, the four UI libraries removed, and everything consolidated onto a single Tailwind design system. The visual language was rebuilt from a UX assessment into “Eco-Fresh”: emerald primary with a warm-amber food accent, Noto Sans/Serif TC for Chinese, tokens driven by CSS variables and shared across web and app, with dark mode and prefers-reduced-motion support.

To cut the backend dependency, a pure front-end mock API and seed dataset (stores, surplus items, campaigns, reviews, orders, members) was added — simulated latency plus localStorage persistence reproduce cart, checkout and pickup-code flows. Routing moved to HashRouter for GitHub Pages compatibility, with GitHub Actions building and deploying automatically.

The backend (Django 4 + DRF) had all sensitive settings — SECRET_KEY, database, mail and API keys — extracted into environment variables with an .env.example; requirements and a full README were added, test leftovers and unused modules removed, and accidentally-tracked __pycache__ and assets untracked. The Expo / React Native app adopted the shared design tokens and UI atoms, unifying navigation and styling.

04 / RESPONSIBILITIES

This modernization round — the web Vite migration and Eco-Fresh design system, the pure front-end mock/seed and GitHub Pages deployment, the backend secret-extraction and docs, and applying the shared design language to the app — was led and completed by me; the original platform was a team capstone and competition project from my studies.

05 / CHALLENGES → SOLUTIONS

CHALLENGE

The frontend was welded to the backend and went blank offline — no way to demo it on its own.

SOLUTION

Inserted a mock API layer between data and views with the same signatures as the real backend, but reading front-end seed and persisting through localStorage; cart, checkout, pickup codes and the merchant dashboard all run end-to-end with no backend, deployable as static files.

CHALLENGE

Four coexisting UI libraries left the visuals fragmented and expensive to maintain.

SOLUTION

Started from a UX assessment to define the Eco-Fresh tokens, then built a Tailwind component kit (buttons, cards, badges, dialogs, tabs, rating, skeletons…) and replaced pages one by one — ultimately dropping MUI/Antd/Bootstrap/styled-components down to a single design system.

CHALLENGE

The backend was going public, but sensitive settings were scattered through the source.

SOLUTION

Extracted SECRET_KEY, database, mail and keys into environment variables with an .env.example template, added .gitignore, requirements and a README, and untracked cache and assets that had been committed by mistake — so the repo can be open-sourced safely.

06 / SYSTEM FACTS

web · app · backend repos

consumer + merchant portals

4→1

UI libraries consolidated

SDGs 2·12

mapped SDG targets

07 / LESSONS

Turning an old project into a shippable portfolio piece is less about redrawing screens than making it run standalone with clean secrets — decoupling the backend and extracting configuration come before any visual refresh.

Design tokens first: only then can web and app share one visual language — consistency comes from the system, not from hand-styling each page.

08 / SCREENS

All screens below show demo (mock) data — no real user data.

EcoBǎo home: food-saving hero, search bar and platform impact stats — Consumer home (Eco-Fresh design system)

Browse page: category filters, sorting and surplus-bag product cards with original/deal price and pickup countdown — Browse surplus (filters and surprise-bag cards)

Store page: cover, rating and surplus-items tabs — Store page (rating and item tabs)

Merchant dashboard: revenue/order KPIs, 7-day charts and surplus-sold share — Merchant dashboard (recharts)

Four Times for Cook — AI Recipe & Health Platform