Customer Home Screen & Listing Flow #149
Description
Build a customer-centered home screen that allows users to discover nearby food listings, explore via list or map view, and view details to claim or purchase meals. Inspired by best practices in food-rescue and food ordering apps.
Screen Layout & Structure
🔍 Top Bar / Header
- App logo or brand title.
- Location display (e.g. “Ahmedabad, 10 km radius”) with possibility to change manually.
- Refresh button to reload feed.
🍱 Listing Feed (Default View)
- Scrollable vertical feed of available meals.
- Each listing card includes:
- Thumbnail image
- Food name & short description
- Price badge (Free or ₹ price)
- Restaurant name + distance indicator
- Expiry or pickup timing (e.g. “Expires in 1 hr”) :contentReference[oaicite:2]{index=2}
🗺️ Map View (Toggle)
- Toggle to switch between list and map presentations.
- Map shows markers for restaurants with listings.
- Clicking marker reveals listing summary and View Detail CTA.
📄 Listing Detail Screen
- Full-size image carousel or single hi-res image.
- Details: description, available quantity, pricing/free badge.
- Restaurant metadata: name, profile image, distance.
- CTA: Claim (free) or Buy (paid) with confirmation dialog (pickup code/QR).
- Disable CTA if listing is no longer available—reflect real-time status.
- Prevent race conditions when multiple users attempt to claim the same listing :contentReference[oaicite:3]{index=3}.
🕒 Free/Paid Claim Flow & Order History
- Confirm user claim or purchase with summary screen.
- Show a pick-up code/QR.
- Maintain order history tab:
- Listing name, restaurant, date/time, status (Completed / Canceled).
- Placeholder for future reorder or feedback functionality.
✅ Functional Requirements
- Fetch listings based on user’s live or manual location.
- Maintain view state across toggles (list vs. map).
- Claim/purchase operations sync with backend/Firebase immediately.
- Avoid overselling: disable actions on backend conflict.
- Cache past listings for offline access with future syncing.
- Instant visual feedback upon actions.