Project Status Report — But First Coffee Delivery App

Week 1 — Development Timeline

Jul 21 – Jul 27, 2026 · Sprint goal: close all P1 & P2 gaps, ship P3 OAuth

MON 21

Day 1 — Project Audit & Report

✓ Complete source code audit across all pages & contexts

✓ Generate & publish BFC Project Status Report

✓ Confirm working features (20) vs. pending (8)

✓ Define sprint priorities P1 → P4

TUE 22

Day 2 — P1: Delivery Fee & Options Card DONE

✓ Implement distance-based delivery fee tiers (flat ₱49 <3km, ₱79 3–7km, ₱99 7km+)

✓ Replace deliveryFee=0 in CartSummary with dynamic value from AddressContext

✓ Wire DeliveryCard onClick to a bottom-sheet modal (pickup vs. delivery toggle)

✓ Add order type field to POST /orders payload

WED 23

Day 3 — P1: Forgot Password Email DONE

✓ Confirm backend POST /auth/forgot-password endpoint is live on apigateway

✓ Implement forgotPasswordApi(email) in api/auth.ts

✓ Replace TODO comment in ForgotPassword.tsx with real API call & error handling

✓ Show distinct success vs. error states (invalid email, not registered)

THU 24

Day 4 — P2: Home Page — Search & Points DONE

✓ Replace Home SearchBar console.log with navigate("/menu", { state: { q } })

✓ Read search state in Menu.tsx and pre-fill the filter input on load

✓ Fetch GET /rewards on Home mount, pass real points to PointsCard

✓ Wire PointsCard onClick to navigate("/rewards")

FRI 25

Day 5 — P2: Nearby Stores + QA Pass DONE

✓ Create data/branches.ts with BFC branch list (lat/lng per branch)

✓ Sort branches by Haversine distance from AddressContext → render top 3

✓ Full QA: order flow end-to-end on mobile viewport (375px)

✓ Smoke-test all WebSocket events (order:updated, order:status)

SAT 26

Day 6 — Phase 2 Launched DONE

✓ Google / Facebook OAuth handoff and backend token exchange

✓ Phase 2 features scoped & shipped: Push Notifications, Vouchers, Missions, Tier Tracker, Frequency Tracker, Personalized Recs, Geofencing, But Firsts Milestones

SUN 27

Day 7 — Integration Test & Sprint Close DEPLOY

✓ Full regression test across all 28 features on staging

✓ Verify delivery fee calculation in a real end-to-end order

✓ Publish sprint close report — update feature status percentages

Week 2 — Development Timeline

Jul 28 – Aug 3, 2026 · Sprint goal: Post & Sharing, Manage Branches & Items

MON 28

Day 1 — Post & Sharing Features DONE

✓ Build post-creation screen for sharing coffee & delivery experiences

✓ Add photo upload support for posts (multipart/form-data)

✓ Implement social sharing: share order receipt & review via link

✓ Wire POST /posts endpoint and feed display on community tab

TUE 29

Day 2 — Manage Branches (CRUD & Status) DONE

✓ Build admin branch list with Create / Edit / Delete controls

✓ Add branch status toggle (open / closed / temporarily unavailable)

✓ Set service coverage radius per branch (km-based zone on map)

✓ Wire GET/POST/PATCH/DELETE /branches endpoints and reflect on customer app

WED 30

Day 3 — Manage Items (Catalog & Pricing) DONE

✓ Admin item catalog: add, edit, and delete menu items

✓ Manage pricing per item and size variants (S / M / L)

✓ Availability toggle — mark items in stock / out of stock per branch

✓ Image upload for menu items via PATCH /items/:id/image (CDN-backed)

THU 31

Day 4 — Admin Integration & QA Pass DONE

✓ Connect admin branch & item changes to live customer-facing menu

✓ Verify out-of-stock items are grayed out and unaddable to cart

✓ QA post & sharing flow end-to-end on mobile viewport

✓ Smoke-test branch switching reflected correctly in nearby-stores card

FRI 1

App Store Readiness — Still In Progress NEXT PHASE

Apply for DUNS Number (Dun & Bradstreet) for Apple Developer enrollment

Set up Apple Developer account and configure provisioning profiles

Prepare app store metadata: screenshots, description, privacy policy

SAT 2

Day 6 — Google / Facebook OAuth DONE

✓ Add Google Sign-In SDK and implement OAuth redirect + token exchange

✓ Add Facebook JS SDK and implement login flow via unified social endpoint

SUN 3

Day 7 — Week 2 Sprint Close DEPLOY

✓ Full regression test: post/sharing, branches, items, and admin flows

✓ Deploy Week 2 build to staging at bfc.webtour.ph

✓ Publish sprint close report — update feature status percentages

Week 3 — Development Timeline

Aug 4 – Aug 10, 2026 · Sprint goal: Phase 2 — Engagement, Loyalty & Community

MON 4

Day 1 — Push Notifications (News & Updates) PENDING

Implement FCM / Web Push — permission prompt on first open

Subscribe device token via POST /notifications/subscribe

Push news, promos, and order status updates to device

Add notification preferences toggle in Profile settings

TUE 5

Day 2 — In-app Vouchers PENDING

Voucher list tab under Rewards — fetch GET /vouchers

Apply voucher code at checkout — POST /vouchers/validate + /apply

Show voucher pill in CartSummary with discount deducted from total

Display expiry date and minimum-spend condition on each voucher card

WED 6

Day 3 — Rewarded Missions PENDING

Mission cards with progress bars (e.g. "Order 3 cold brews this week")

Fetch active missions via GET /missions, show progress + reward

Claim reward on completion — POST /missions/:id/claim

Auto-update mission progress after each order completes

THU 7

Day 4 — Frequency Tracker & Tier Tracker PENDING

Frequency Tracker: "3 visits remaining to redeem a reward" widget on Home/Rewards

Step-dot progress indicator against tier threshold — GET /rewards/frequency

Tier Tracker: Bronze → Silver → Gold → Platinum progress bar — GET /rewards/tier

Show points needed to unlock next tier and perks unlocked per tier

FRI 8

Day 5 — Personalized Recommendations & Rewards PENDING

"You might like" horizontal scroll on Home & Menu — GET /recommendations

Server-side ranked product list based on order history and preferences

Surface reward suggestions ("Redeem your points for a free Caramel Latte")

Wire one-tap add-to-cart from recommendation card

SAT 9

Day 6 — Location-based Notifications PENDING

Geofence push when user enters ~500m of a BFC branch

Haversine distance watch + FCM per-branch topic subscription

Pause geofence watch when browser tab is hidden; resume on focus

SUN 10

Day 7 — "But Firsts" Milestones & Sprint Close PENDING

Community feed for user milestones (first order, 10th visit, tier unlock)

Auto-post milestone card to feed with reward badge on achievement

Full regression test across all Week 3 Phase 2 features on staging

Deploy Week 3 build and publish sprint close report

Executive Summary

The But First Coffee (BFC) delivery app is a full-stack, mobile-first progressive web application built for the Philippines market. The core ordering pipeline — user authentication, menu browsing, cart management, order placement, and real-time order tracking — is fully operational. The platform successfully handles end-to-end order flows, WebSocket-driven live status updates, AI-assisted chat support, and geolocation-based address selection.

As of this audit, 26 of 28 Phase 1 features are fully operational; 2 admin screens (Stores, Settings) are UI-complete but pending API wiring. The storeadmin standalone staff PWA is fully shipped with 8 features. Phase 2 has 1 of 8 features live (community posts); 7 remain pending.

The customer app is at bfc.webtour.ph. The staff admin panel is at storeadmin.webtour.ph. Android APK available at bfc-docs.webtour.ph/app-debug.apk. Backend: apigateway.webtour.ph.

Status Breakdown

Total Features Scoped	28
✓ Implemented	26
⚠ Partial (UI done, no API save)	2
✗ Not Started	0
Overall Completion	93%

Module Progress

Authentication 100%

✓ Login & Register
✓ Guest mode
✓ JWT persistence
✓ Forgot password email
✓ Google / Facebook OAuth

Ordering Flow 100%

✓ Menu browse + search
✓ Cart CRUD (API-backed)
✓ Order placement
✓ Delivery fee calculation
✓ Pickup vs. delivery choice

Realtime & Alerts 100%

✓ Socket.io order updates
✓ Toast notifications
✓ Notification panel
✓ Sound alerts
✓ Dedup via seenKeys

Home Page 100%

✓ Banner & layout
✓ Bottom navigation
✓ Points card (live API)
✓ Search → Menu nav
✓ Nearby stores (dynamic)

Overall Project Completion 93% — 26 of 28 features complete

93% Complete

Complete (93%) Partial — Stores & Settings Admin (7%)

Implemented Features

26 features fully implemented and API-connected. 2 admin screens are UI-complete, pending API wiring.

🔐

User Login

Authentication

100%

Email/password login with JWT access + refresh tokens. Tokens persisted to localStorage. Auto-redirects authenticated users away from login page.

api/auth.ts store/authStore.ts

📝

User Registration

Authentication

100%

Full name, email, and password signup. Client-side validation (min 6 chars, password match check). Auto-login via JWT after successful registration.

pages/auth/Register.tsx

🧳

Guest Mode

Authentication

100%

Browse and order without an account. Guest flag stored in localStorage. Full app access granted with a guest user object (id: 0, name: "Guest").

store/authStore.ts

🛡️

Route Guards

Security

100%

ProtectedRoute redirects unauthenticated users to /login. GuestRoute redirects authenticated users away from auth pages back to home.

routes/ProtectedRoute.tsx routes/GuestRoute.tsx

☕

Menu Browsing

Core Ordering

100%

Responsive grid of all menu items across 9 categories. Category tabs + real-time client-side search filtering via useMemo. No page reload required.

pages/Menu.tsx data/menu.ts

🛒

Add to Cart Modal

Core Ordering

100%

Bottom-sheet modal with size selector (S/M/L + price delta), quantity input, and sugar-level customization (0–100%). Sends full metadata to cart API.

components/menu/AddToCartModal.tsx

🛍️

Shopping Cart

Core Ordering

100%

Full CRUD via REST API (GET, POST, PATCH qty, DELETE item, DELETE /cart). Cart badge shows live item count. Two-column layout on desktop.

context/CartContext.tsx api/cart.ts

📦

Order Placement

Core Ordering

100%

POST /orders with full item payload and total. Shows loading spinner during API call. Clears cart on success and redirects to Order History.

pages/Cart.tsx api/orders.ts

🧾

Order History & Status

Core Ordering

100%

Accordion list of past orders fetched from GET /orders. Expandable to show item thumbnails, prices, and quantities. Status badges: pending → confirmed → preparing → ready → delivered → cancelled.

pages/Orders.tsx

⚡

Real-time Order Updates

WebSocket

100%

Socket.io client connects to apigateway.webtour.ph, joins user room, listens for order:updated/update/status events. Deduplication prevents double notifications.

lib/socket.ts context/OrdersContext.tsx

🔔

Notifications Panel

UI Component

100%

Slide-in panel from right. Bell icon shows unread badge. Mark as read / mark all / clear all actions. Color-coded info/success/warning types.

components/layout/NotificationsPanel.tsx

🔊

Toast & Sound Alerts

UX Feature

100%

Ephemeral toast stack auto-dismisses after 4.5s. Ready/delivered orders trigger a celebratory sound; other updates play a softer chime via Web Audio API.

lib/sound.ts context/OrdersContext.tsx

🤖

AI Chat Assistant

AI Feature

100%

BFC Assistant — local AI chat server (Express.js, port 3002). Answers menu, price, and delivery questions. Chat modal with typing indicator, accessible from the header.

components/ai/AIChatModal.tsx server/index.js :3002

📍

Address Picker

Location

100%

Photon/OSM autocomplete (PH-biased bbox), 500ms debounce. Two-step flow: search results → map preview → confirm. Recent addresses saved in context.

components/location/AddressPickerModal.tsx

🗺️

GPS & Map Preview

Location

100%

Browser Geolocation API auto-fills address via Nominatim reverse geocoding. OpenStreetMap iframe embed previews the selected location with a marker. No API key needed.

AddressPickerModal → MapPreview + reverseGeocode

👤

User Profile & Avatar

User Management

100%

Profile page shows name, email, and avatar. Avatar upload via PATCH /users/:id/avatar (multipart/form-data). Full CDN URL built from relative path. Zustand store updated on success.

pages/Profile.tsx api/upload.ts

⭐

Rewards & Points

Loyalty

100%

GET /rewards returns total points + history. Points summary card (1 pt per ₱10 spent). Transaction history list with descriptions and timestamps.

pages/Rewards.tsx api/rewards.ts

🧭

Bottom Navigation

UI / Layout

100%

Fixed bottom nav: Home, Menu, Cart, Profile. Active route highlighting. Cart badge with live count. Max-width 1200px, centered on desktop.

components/layout/BottomNavigation.tsx

💾

Token Persistence

Security

100%

Access token, refresh token, and user object stored via a typed storage service wrapper. Axios interceptor attaches Bearer token to every API request automatically.

services/storage.ts api/axios.ts

Tech Stack & Architecture

Frontend

React 19 + TypeScript
Vite (build tool + dev proxy)
Tailwind CSS v4
Zustand (global auth state)
React Context (cart, orders, address, chat)
React Router v7
react-icons (Font Awesome 6)

Backend & APIs

Express.js AI server (port 3002)
apigateway.webtour.ph (REST + WS)
Axios (REST client + Bearer auth interceptor)
Socket.io Client v4
Local AI Chat Server (CLI, port 3002)

Third-party Services

Photon / Komoot (address autocomplete)
Nominatim / OSM (reverse geocoding)
OpenStreetMap (map embed iframe)
Browser Geolocation API
Unsplash (product images)

API Endpoints

POST	/auth/signin
POST	/auth/signup
GET	/orders
POST	/orders
GET	/cart
POST	/cart
PATCH	/cart/:id
DELETE	/cart · /cart/:id
GET	/rewards
PATCH	/users/:id/avatar
POST	/api/chat (port 3002)

App Routes

/	Home (protected)
/menu	Menu browse + search (protected)
/cart	Cart & checkout (protected)
/orders	Order history (protected)
/rewards	Points & rewards (protected)
/profile	User profile (protected)
/login	Login (guest-only)
/register	Register (guest-only)
/forgot-password	Reset (guest-only)

State Management

Zustand — authStore
user, tokens, login / register / logout / updateAvatar
CartContext
cart items, totalItems, totalPrice
OrdersContext
orders, socket, notifications, toasts
AddressContext
selected address, recent addresses, picker state
ChatContext
isChatOpen, openChat, closeChat

Phase 2 — In Progress

1 of 8 done

Community Posts shipped. FCM Push, Vouchers, Missions, Tier/Frequency Trackers, Personalized Recs & Geofencing pending.

☕

Community Posts Feed

Community · "But Firsts"

Done

API-backed posts feed with branch filter, star ratings, create-post modal, avatar display. Lives at /posts route.

GET /posts · POST /posts

pages/Posts.tsx · api/posts.ts

🔔

Push Notifications (FCM)

Engagement

Pending

FCM/Web Push for news, promos & order updates. Permission prompt on first open; notification preferences in Profile.

POST /notifications/subscribe

GET /notifications

🎟️

In-app Vouchers

Engagement

Pending

Voucher list under Rewards tab. Apply code at checkout — validates & deducts from cart total. Voucher pill in CartSummary.

GET /vouchers · POST /vouchers/validate

POST /vouchers/apply

🎯

Rewarded Missions

Loyalty

Pending

Mission cards with progress bars (e.g. "Order 3 cold brews this week"). Claim reward on completion.

GET /missions

POST /missions/:id/claim

📊

Frequency Tracker

Loyalty

Pending

"X more visits to redeem reward" widget on Home/Rewards. Step-dot progress indicator against tier threshold.

GET /rewards/frequency

→ { visits, threshold, remaining }

🏅

Tier Tracker

Loyalty

Pending

Visual progress bar Bronze → Silver → Gold → Platinum. Shows points needed & perks unlocked per tier.

GET /rewards/tier

→ { current, next, pointsNeeded, perks[] }

✨

Personalized Recs

Intelligence

Pending

"You might like" horizontal scroll on Home & Menu based on order history. Server-side ranked product list.

GET /recommendations

→ ranked product list

📍

Location Notifications

Intelligence

Pending

Geofence push when user enters ~500m of a branch. Haversine watch + FCM per-branch topic. Pauses when tab hidden.

POST /notifications/geofence

→ { deviceToken, branchId }

Week 1 — Development Timeline

Week 2 — Development Timeline

Week 3 — Development Timeline

Executive Summary

Module Progress

Implemented Features

Tech Stack & Architecture

Phase 2 — In Progress

StoreAdmin — Staff PWA

Android APK