dr-vegetable

byVeerachar Veer Veerachar Veer

Building a cross-platform mobile application (Android and iOS) for Dr. Vegetable is an exciting venture! To make this vision a reality, you need a solid blueprint covering both the User App (Customer-facing) and the Admin Panel (Back-office management) for manual editing, pricing charts, and coupon controls. Phase 1: Customer App Features (Android & iOS) Authentication: Phone Number Login: Quick and secure OTP (One-Time Password) verification using services like Firebase Authentication or MSG91. Home Page: Search bar, categorized vegetable lists (leafy, roots, exotic, daily essentials), banner sliders for ongoing offers, and daily price highlights. Cart & Checkout: Add/remove items, quantity adjustments, and real-time total calculation. Delivery Rules Engine: Free Delivery: Automatically applied for orders ≥Rs. 200. Delivery Charge: Automatically added for orders <Rs. 200. Payment Gateway & Modes: COD (Cash on Delivery): Pay when the order arrives. UPI Integration: Direct triggers for Google Pay and PhonePe (via UPI intents). Post-Purchase Experience: Tracking ID: Real-time status updates (Order Placed → Packed → Out for Delivery → Delivered). Feedback & Complaints: Simple rating system for delivery/quality and a ticketing form for issue resolution. Discounts & Offers: Apply promo codes at checkout for instant price reductions. Phase 2: Admin Panel Features (Manual Control Dashboard) Since you requested manual editing capabilities for day-to-day operations, the Admin Web Dashboard or mobile-admin app should include: Price Chart Management: A separate master sheet/table where you can manually update daily vegetable prices (e.g., changing tomato price from Rs. 40 to Rs. 35) instantly across both Android and iOS apps. Offer & Discount Coupon Manager: Create custom coupon codes (e.g., DRVEG50), set minimum purchase limits, define discount percentages or flat amounts, and set expiry dates. Manual Banner & Template Control: Upload promotional banner designs and switch between UI layout templates for festive seasons or special sales. Order & Delivery Management: View incoming customer orders, assign delivery tracking IDs, and manage customer complaints. Phase 3: Recommended Technology Stack To build this efficiently for both Android and iOS with a robust backend: Frontend (Mobile App): Flutter or React Native (Allows you to write a single codebase that deploys smoothly to both Google Play Store and Apple App Store). Backend & Database: Node.js with Express or Firebase paired with MongoDB or PostgreSQL to handle user profiles, dynamic price charts, and cart logic. Payment Integration: Razorpay or Cashfree (Easily handles UPI apps like Google Pay, PhonePe, credit/debit cards, and COD tracking). Suggested Next Steps UI/UX Wireframes: Draft basic screen layouts for the Home Page, Cart, and Admin Dashboard. Database Schema Design: Structure how your dynamic vegetable price charts and coupon codes will be stored in the database. Would you like to start by outlining the database structure for the dynamic price chart and manual coupon system?

Landing
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for dr-vegetable

1. Introduction

Dr. Vegetable is a cross-platform mobile grocery application for Android and iOS, paired with a back-office admin panel, that lets Indian households order fresh vegetables with live, manually maintained daily prices. The product intent is a chore turned into a small pleasure: customers sign in with a phone number and OTP, browse categorized vegetables (leafy, roots, exotic, daily essentials) with daily price highlights and offer banners, build a cart with real-time totals, apply promo codes, and check out with Cash on Delivery or UPI (Google Pay / PhonePe via UPI intents). After purchase they receive a tracking ID with real-time status progression (Order Placed → Packed → Out for Delivery → Delivered), can rate delivery and quality, and can file complaint tickets.

The second audience is the store operator, who runs day-to-day operations from an admin panel: manually editing the daily vegetable price chart so changes appear instantly in both mobile apps, creating and managing discount coupons, uploading promotional banners and switching UI layout templates for festive seasons or sales, and viewing incoming orders, assigning delivery tracking IDs, and managing customer complaints.

This document is the system requirements blueprint for that product.

Page 1 of 27

2. System Overview

Dr. Vegetable is delivered as two first-party surfaces sharing one backend: a customer mobile app (Android and iOS) and an admin back-office panel. Both are served by a shared FastAPI backend process with a MariaDB database for application-owned persistent data, and a React application UI. The customer app is built with Flutter or React Native from a single codebase deployed to Google Play and the Apple App Store; the backend is Node.js with Express or Firebase paired with MongoDB or PostgreSQL, with Razorpay or Cashfree handling payments including UPI apps and COD tracking. The provisioned scaffold (shared FastAPI backend, MariaDB, React frontend) is the runnable inventory; the source-recommended stack is preserved as the stated technology direction.

Current actors are the Customer and the Admin / Store Operator. Current behavior covers phone-OTP authentication, the home page with search, categorized lists, banner sliders and daily price highlights, cart and checkout with the delivery rules engine (free delivery at ≥ Rs. 200, delivery charge below Rs. 200), COD and UPI payment modes, promo codes, order tracking with a tracking ID and four status stages, delivery/quality ratings, complaint tickets, and the admin capabilities for price chart management, coupon management, banner and template control, and order/delivery/complaint management.

Page 2 of 27

2a. Product Interpretation and Delivery Boundary

The customer experience is a first-party mobile application for Android and iOS. Customers establish identity with a phone number verified by OTP before shopping; the anonymous entry surface (Landing) explains the app and routes to Login, and protected customer destinations (Home Page, Cart, Checkout, Order Tracking, Feedback, Complaints) require an established customer session. The admin back office is a first-party web dashboard whose destinations (Admin Dashboard, Price Chart, Coupons, Banners & Templates) are restricted to the authenticated store operator.

All product state — prices, coupons, banners, templates, orders, tracking IDs, ratings, and complaints — is owned and persisted by the application backend and database. Payment processing for UPI (Google Pay, PhonePe) and card flows is delegated to the payment gateway (Razorpay or Cashfree); COD is recorded by the application and settled on delivery. OTP delivery is delegated to the authentication provider (Firebase Authentication or MSG91). No future-horizon features are defined in this document; everything described is current scope.

2b. Source Content Inventory

Not applicable — no reference directive with content_source was supplied.

2c. Page Content and Component Coverage

Page 3 of 27

Landing

  • Information/state: Anonymous public entry. Product name "Dr. Vegetable", a short explanation of the vegetable-delivery app and its admin back office, and the value proposition (fresh vegetables, live daily prices, fast delivery). No customer or admin data is shown.
  • Primary actions: "Get started" / "Sign in" routing to Login.
  • Supporting actions: Link to admin sign-in (routes to Login with the admin path).
  • Domain entities: None persisted; static marketing content only.
  • Component responsibilities: Hero block with headline and produce imagery; entry CTA capsule; brief feature highlights (search, categories, daily prices, free delivery at Rs. 200).
  • States: Loading (static, minimal); empty (n/a); success (renders); error (fallback static content if remote content fails); recovery (retry fetch).
Page 4 of 27

Login

  • Information/state: Phone-number entry field, OTP entry step, verification status, error messaging. Anonymous access; establishes the session used by protected destinations.
  • Primary actions: Enter phone number, request OTP, enter OTP, verify and continue to Home Page (customer) or Admin Dashboard (store operator).
  • Supporting actions: Resend OTP; edit phone number; switch between customer and admin sign-in path.
  • Domain entities: Customer account (phone number), Admin / Store Operator account, OTP challenge, session.
  • Component responsibilities: Phone input capsule; OTP input; verify button; resend control with cooldown; error banner.
  • States: Loading (OTP request/verify in progress); empty (no phone entered); success (verified, routed onward); error (invalid phone, incorrect/expired OTP, provider failure); recovery (resend OTP, re-enter number).
Page 5 of 27

Home Page

  • Information/state: Search bar, categorized vegetable lists (leafy, roots, exotic, daily essentials), banner slider of ongoing offers, daily price highlights. Reflects the admin's current price chart, active banners, and active layout template.
  • Primary actions: Search vegetables; browse categories; view daily price highlights; add items to cart.
  • Supporting actions: Swipe banner slider; open a vegetable's detail/price; open Cart.
  • Domain entities: Vegetable, category, price entry, banner, layout template, cart.
  • Component responsibilities: Pill search field; category chips with produce thumbnails; banner slider; daily price highlight ticker; product cards with add-to-cart.
  • States: Loading (fetching prices/banners); empty (no results for search, or no highlights); success (content rendered); error (fetch failure with retry); recovery (retry, fall back to cached content).
Page 6 of 27

Cart

  • Information/state: Line items with quantities and unit prices, real-time total, delivery-rule indicator (free delivery at ≥ Rs. 200 vs. delivery charge below Rs. 200).
  • Primary actions: Add/remove items; adjust quantities; view real-time total; proceed to Checkout.
  • Supporting actions: Clear item; continue shopping.
  • Domain entities: Cart, cart line item, vegetable, price entry, delivery rule.
  • Component responsibilities: Line-item rows with pill quantity steppers; running total; delivery-rule status; checkout CTA.
  • States: Loading (price refresh); empty (empty cart message); success (totals computed); error (price fetch failure); recovery (retry, remove unavailable item).
Page 7 of 27

Checkout

  • Information/state: Order summary, delivery charge or free-delivery status per the rules engine, promo code field and applied discount, payment mode selection (COD, UPI with Google Pay and PhonePe intents), final payable total, order placement result with tracking ID.
  • Primary actions: Apply promo code; select COD or UPI; trigger Google Pay / PhonePe via UPI intent; place order; receive tracking ID.
  • Supporting actions: Remove applied promo code; edit cart; retry failed payment.
  • Domain entities: Order, promo code, discount, delivery charge, payment mode, payment transaction, tracking ID.
  • Component responsibilities: Summary panel; promo input; payment-mode selector; UPI intent launchers; place-order button; confirmation with tracking ID.
  • States: Loading (applying promo, processing payment, placing order); empty (cart emptied/invalid); success (order placed, tracking ID shown); error (invalid/expired promo, payment failure, order failure); recovery (retry payment, re-apply code, return to cart).
Page 8 of 27

Order Tracking

  • Information/state: Tracking ID and real-time status progression: Order Placed → Packed → Out for Delivery → Delivered. Revisitable for past and current orders.
  • Primary actions: View current status; refresh status.
  • Supporting actions: Open Feedback (after Delivered); open Complaints.
  • Domain entities: Order, tracking ID, status event.
  • Component responsibilities: Status timeline; tracking ID display; refresh control; links to Feedback and Complaints.
  • States: Loading (fetching status); empty (no orders); success (status shown); error (fetch failure); recovery (retry, show last known status).

Feedback

  • Information/state: Completed order context; simple rating inputs for delivery and quality.
  • Primary actions: Submit delivery rating; submit quality rating.
  • Supporting actions: Add optional comment; view submitted rating.
  • Domain entities: Order, delivery rating, quality rating.
  • Component responsibilities: Rating controls for delivery and quality; submit button; confirmation.
  • States: Loading (submitting); empty (no completed order eligible); success (rating recorded); error (submit failure); recovery (retry).
Page 9 of 27

Complaints

  • Information/state: Complaint ticket form and list of the customer's tickets with status.
  • Primary actions: File a complaint ticket; view ticket status/resolution.
  • Supporting actions: Add details to an existing ticket; view admin response.
  • Domain entities: Complaint ticket, order reference, ticket status, resolution.
  • Component responsibilities: Ticket form; ticket list; status display.
  • States: Loading (submitting/fetching); empty (no tickets); success (ticket filed, status shown); error (submit/fetch failure); recovery (retry).

Admin Dashboard

  • Information/state: Incoming customer orders, delivery tracking ID assignment, customer complaints queue. Restricted to the authenticated store operator.
  • Primary actions: View incoming orders; assign delivery tracking IDs; manage (view/respond/resolve) customer complaints.
  • Supporting actions: Filter orders by status; open a complaint.
  • Domain entities: Order, tracking ID, complaint ticket, customer.
  • Component responsibilities: Orders table; tracking-ID assignment control; complaints panel; status chips.
  • States: Loading (fetching orders/complaints); empty (no orders/complaints); success (lists rendered); error (fetch/assign failure); recovery (retry).
Page 10 of 27

Price Chart

  • Information/state: Master sheet/table of vegetables with current daily prices, editable by the admin; changes propagate instantly to both Android and iOS apps.
  • Primary actions: Edit a vegetable's price (e.g., tomato Rs. 40 → Rs. 35); save.
  • Supporting actions: Search/filter the table; view last-updated indicator.
  • Domain entities: Vegetable, price entry, update timestamp.
  • Component responsibilities: Editable price table; save control; live-update indicator.
  • States: Loading (fetching chart); empty (no vegetables); success (price saved and propagated); error (save failure); recovery (retry, revert unsaved edit).
Page 11 of 27

Coupons

  • Information/state: Coupon list and creation form with code (e.g., DRVEG50), minimum purchase limit, discount percentage or flat amount, and expiry date.
  • Primary actions: Create coupon; set minimum purchase limit, discount type/value, expiry date; save.
  • Supporting actions: Edit/deactivate an existing coupon; view coupon status.
  • Domain entities: Coupon, minimum purchase limit, discount (percentage or flat), expiry date.
  • Component responsibilities: Coupon form; coupon table; status/expiry display.
  • States: Loading (fetching coupons); empty (no coupons); success (coupon created/updated); error (validation or save failure); recovery (retry, correct fields).

Banners & Templates

  • Information/state: Uploaded promotional banner designs and the currently active UI layout template; template options for festive seasons or special sales.
  • Primary actions: Upload a banner design; switch the active UI layout template.
  • Supporting actions: Preview a banner/template; remove a banner.
  • Domain entities: Banner, layout template, active-template setting.
  • Component responsibilities: Upload control; banner gallery; template selector; active-state indicator.
  • States: Loading (fetching banners/templates); empty (no banners uploaded); success (upload/switch applied); error (upload/switch failure); recovery (retry).
Page 12 of 27

3. Functional Requirements

Customer authentication

  • As a Customer, I should log in with my phone number verified by OTP so that I can access shopping features. (explicit) — Trigger: phone number entry; Result: OTP sent via Firebase Authentication or MSG91, verified, session established; Failure: invalid phone or incorrect/expired OTP with resend recovery; Continuation: routed to Home Page. Access: anonymous Login surface.

Home browsing

  • As a Customer, I should see a search bar, categorized vegetable lists (leafy, roots, exotic, daily essentials), banner sliders for ongoing offers, and daily price highlights on the Home Page so that I can find and compare vegetables. (explicit) — Trigger: opening Home Page; Result: current prices, active banners, and active layout template rendered; Failure: fetch failure with retry; Continuation: search, browse, or add to cart. Access: authenticated customer.

Cart management

  • As a Customer, I should add and remove cart items, adjust quantities, and see a real-time total so that I control my order. (explicit) — Trigger: add/remove/quantity change; Result: totals recomputed in real time; Failure: price fetch failure with retry; Continuation: proceed to Checkout. Access: authenticated customer.
Page 13 of 27

Delivery rules engine

  • As a Customer, I should have free delivery automatically applied for orders ≥ Rs. 200 and a delivery charge automatically added for orders < Rs. 200 so that delivery cost is transparent. (explicit) — Trigger: cart total crossing the Rs. 200 threshold; Result: delivery charge applied or waived automatically; Failure: rule evaluation error surfaced with retry; Continuation: reflected in Checkout total. Access: authenticated customer.

Payment modes

  • As a Customer, I should pay by COD or UPI with direct triggers for Google Pay and PhonePe via UPI intents so that I can pay conveniently. (explicit) — Trigger: payment-mode selection at Checkout; Result: COD recorded, or UPI intent launched via Razorpay/Cashfree; Failure: payment failure with retry; Continuation: order placed with tracking ID. Access: authenticated customer.

Order tracking

  • As a Customer, I should receive a tracking ID with real-time status updates (Order Placed → Packed → Out for Delivery → Delivered) so that I know where my order is. (explicit) — Trigger: order placed; Result: tracking ID issued and status progression visible on Order Tracking; Failure: status fetch failure with last-known-state fallback; Continuation: revisit tracking, then Feedback/Complaints after delivery. Access: authenticated customer.

Feedback and complaints

  • As a Customer, I should submit a simple rating for delivery and quality and file a complaint ticket for issue resolution so that I can report problems and give feedback. (explicit) — Trigger: completed order (rating) or issue (complaint); Result: rating recorded and/or ticket filed with status; Failure: submit failure with retry; Continuation: view ticket status/resolution. Access: authenticated customer.
Page 14 of 27

Promo codes

  • As a Customer, I should apply promo codes at checkout for instant price reductions so that I save on my order. (explicit) — Trigger: promo code entry at Checkout; Result: discount applied instantly to total; Failure: invalid/expired code or unmet minimum with error; Continuation: place order with discounted total. Access: authenticated customer.

Admin price chart management

  • As an Admin / Store Operator, I should manually update daily vegetable prices in a master sheet/table so that changes reflect instantly across both Android and iOS apps. (explicit) — Trigger: editing a price (e.g., tomato Rs. 40 → Rs. 35); Result: saved price propagated instantly to both apps; Failure: save failure with retry/revert; Continuation: continue editing. Access: authenticated store operator.

Admin coupon management

  • As an Admin / Store Operator, I should create custom coupon codes (e.g., DRVEG50) with minimum purchase limits, discount percentages or flat amounts, and expiry dates so that I can run promotions. (explicit) — Trigger: coupon form submission; Result: coupon saved and available at Checkout; Failure: validation/save failure with correction; Continuation: edit/deactivate. Access: authenticated store operator.

Admin banner and template control

  • As an Admin / Store Operator, I should upload promotional banner designs and switch between UI layout templates for festive seasons or special sales so that the app reflects current campaigns. (explicit) — Trigger: banner upload or template switch; Result: active banner/template applied to the customer app; Failure: upload/switch failure with retry; Continuation: preview and adjust. Access: authenticated store operator.
Page 15 of 27

Admin order and delivery management

  • As an Admin / Store Operator, I should view incoming customer orders, assign delivery tracking IDs, and manage customer complaints so that orders are fulfilled and issues resolved. (explicit) — Trigger: new order or complaint; Result: order visible, tracking ID assigned, complaint managed to resolution; Failure: fetch/assign failure with retry; Continuation: monitor status. Access: authenticated store operator.

Identity establishment (prerequisite)

  • As a Customer or Admin / Store Operator, I should verify my phone number by OTP before shopping or entering the back office so that my session is bound to me. (required_inference) — prerequisite for all protected destinations; anonymous Login entry; failure/recovery via resend.

Order placement prerequisite

  • As a Customer, I should place an order at checkout before a tracking ID and status progression become available. (required_inference) — prerequisite linking Checkout to Order Tracking.

Completed-order prerequisite for ratings

  • As a Customer, I should have a completed (Delivered) order before submitting delivery and quality ratings. (required_inference) — prerequisite linking Order Tracking to Feedback.

4. User Personas

Page 16 of 27

Customer

A shopper ordering fresh vegetables for an Indian household on Android or iOS. Their product context is a daily or frequent grocery need where prices change daily and delivery speed and cost matter. Their primary goal is to find the right vegetables at the current day's price, build a cart, pay conveniently (COD or UPI), and know when the order arrives. Distinct accepted responsibilities: phone-OTP sign-in; searching and browsing categorized vegetables and daily price highlights; adding/removing items and adjusting quantities with real-time totals; applying promo codes; selecting COD or UPI (Google Pay/PhonePe); tracking the order through four status stages; rating delivery and quality; filing complaint tickets. Relevant inputs/decisions: phone number and OTP, search terms, quantities, promo codes, payment mode, ratings, complaint details. Interactions with other participants: receives tracking ID and status updates driven by the Admin's tracking-ID assignment; receives complaint resolution from the Admin; benefits from the Admin's price, coupon, and banner updates. Observable success: vegetables arrive with correct pricing and delivery charges, and any issue is resolved via a ticket.

Page 17 of 27

Admin / Store Operator

The store owner or operator running day-to-day back-office work. Their product context is a manual-control dashboard where they keep prices current and manage promotions and fulfillment. Their primary goal is to keep the live price chart accurate, run coupon and banner campaigns, and fulfill orders and resolve complaints. Distinct accepted responsibilities: manually editing the daily vegetable price chart so changes appear instantly in both apps; creating and managing coupons with minimum purchase limits, discount values, and expiry dates; uploading promotional banners and switching UI layout templates; reviewing incoming orders, assigning delivery tracking IDs, and managing customer complaints. Relevant inputs/decisions: price values, coupon parameters, banner assets, template selection, tracking IDs, complaint responses. Interactions with other participants: their price/coupon/banner changes reach Customers instantly; their tracking-ID assignments drive Customer order status; their complaint handling resolves Customer issues. Observable success: prices and campaigns are live and correct, orders carry tracking IDs, and complaints reach resolution.

Page 18 of 27

5. Core User Flows

Customer: Sign in and shop

  1. Customer opens the app on the Landing page (anonymous) and taps "Get started".
  2. On Login, enters phone number and requests OTP; OTP is delivered via Firebase Authentication or MSG91.
  3. Enters OTP and verifies; session established; routed to Home Page.
  4. On Home Page, searches or browses categorized vegetables (leafy, roots, exotic, daily essentials), views banner slider and daily price highlights reflecting the admin's current prices.
  5. Adds items to Cart, adjusts quantities, sees real-time total; delivery rule applies automatically (free at ≥ Rs. 200, charge below).
  6. Proceeds to Checkout; applies a promo code for instant reduction; selects COD or UPI (Google Pay/PhonePe intent).
  7. Places order; receives tracking ID. Failure: invalid OTP → resend; payment failure → retry; invalid promo → correct code.

Customer: Track order and give feedback

  1. Customer opens Order Tracking and views tracking ID and status (Order Placed → Packed → Out for Delivery → Delivered).
  2. After Delivered, opens Feedback and submits delivery and quality ratings.
  3. If an issue arises, opens Complaints and files a ticket; later revisits to view status/resolution.
Page 19 of 27

Admin / Store Operator: Update prices

  1. Admin signs in via Login (admin path) and reaches Admin Dashboard.
  2. Opens Price Chart, edits a vegetable price (e.g., tomato Rs. 40 → Rs. 35), saves.
  3. Change propagates instantly to both Android and iOS apps; customers see updated daily price highlights.

Admin / Store Operator: Manage coupons and banners

  1. Admin opens Coupons, creates a code (e.g., DRVEG50) with minimum purchase limit, discount percentage or flat amount, and expiry date; saves.
  2. Admin opens Banners & Templates, uploads a promotional banner and switches the active UI layout template for a festive season or sale.
  3. Customers see the new banner/template and can apply the coupon at Checkout.

Admin / Store Operator: Fulfill orders and resolve complaints

  1. Admin opens Admin Dashboard and views incoming customer orders.
  2. Assigns a delivery tracking ID to an order; the customer's Order Tracking reflects the status progression.
  3. Reviews customer complaints, responds, and resolves; the customer sees the resolution in Complaints.

6. Visuals Colors and Theme

Muse: Karim Rashid — sensual pop minimalism for a vegetable market that feels like a treat.

Page 20 of 27
  • Mode: Light.
  • Colors: background #FFF4F1 (blush-cream ground); surface #FFFFFF (glossy white capsules); text #1E1B2E (ink-plum); primary #FF4F9A (bubblegum pink, ~15% of any screen for primary actions); accent #B6F24A (lime, reserved for savings, free-delivery threshold met, live price ticks); muted #8A8296 (lavender-grey metadata). Pink and lime never sit as text on each other; both pair with ink or white.
  • Typography: Headings Comfortaa 700, tight (-0.02em), display clamp(40px, 9vw, 72px), section heads 36px desktop / 27px mobile; body Quicksand, 16px, 1.6 line-height; section labels Quicksand 700 uppercase 12px, 0.14em tracking; prices always Quicksand 700 tabular. Scale 1.333 modular: 64/48/36/27/20/16/14.
  • Shape language: Capsules everywhere — pill buttons, pill search field, pill category chips, pill quantity steppers. Cards 28px radius, glossy white, single soft shadow 0 12px 32px rgba(30,27,46,0.08), no border. Section boundaries curve with a 48px-radius wave/arc. Product thumbnails in perfect circles. One organic blob per screen maximum, as background colour, never behind text.
  • Layout: Mobile-first single column at 375px with 20px gutters; 768px two-column split (sticky category rail left, content right); 1280px 12-column grid with hero spanning 8 columns and a live price ticker card in the remaining 4. Admin panel uses the same capsule language with a denser 4-column table grid, pink row-hover, lime status chips. 32–48px vertical rhythm.
  • Imagery: Glossy 3D-rendered vegetable capsules and blobs (tomato as saturated red sphere with specular highlight, spinach as soft green blob) on blush grounds with long soft shadows; bright, cut-out, high-key product photography on white or blush. No stock people, no flat clip art; every produce image has candy-like gloss.
Page 21 of 27

7. Signature Design Concept

The public entry (Landing) is a full-bleed blush-cream canvas where a single oversized 3D tomato capsule (~60% of viewport height) floats right-of-centre with a long soft shadow, while the headline "Fresh. Fast. A little bit fun." stacks flush-left in Comfortaa 700 at clamp(40px, 9vw, 72px) over the left third. Beneath the headline a pill search field and a lime "Order in 10 minutes" pill sit on the blush ground. A thin pink arc sweeps behind the tomato and continues off the right edge. No centred stack, no gradient blob, no blue button — the colour block and the glossy subject are the hero. The entry CTA routes to Login. Readable text and controls stay whole at 375px, 768px, and 1280px; imagery and the pink arc may bleed off the edge.

Page 22 of 27

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

  • Focal subject: the oversized glossy 3D tomato capsule floating right-of-centre over the blush field, with the pink arc behind it.
  • Input→transformation→outcome thesis: on load, the tomato settles into place with a single soft spring while the headline and pills fade up flush-left; on scroll or tap of the entry CTA, the tomato scales gently and the arc sweeps, then the view transitions to Login. Only accepted behavior (entry to Login) is triggered.
  • Motion vocabulary: liquid and soft — cards scale 0.97→1 on press with a 220ms spring; add-to-cart flies a small circular thumbnail into the cart pill; the free-delivery progress bar fills with a glossy pink-to-lime sweep; banner slider uses a slow crossfade with a 6s dwell. Nothing loops endlessly; nothing bounces more than once.
  • Composed first frame: blush ground, tomato right-of-centre with long shadow, headline stacked flush-left, pill search and lime pill beneath, pink arc bleeding right.
  • Reduced-motion state: every spring becomes an instant state change; the banner slider becomes a swipeable row; the hero renders as a static composed frame.
Page 23 of 27

9. Non-Functional Requirements

  • Cross-platform delivery: The customer app must ship for both Android and iOS from a single codebase (Flutter or React Native). (explicit)
  • Instant price propagation: Admin price chart edits must reflect instantly across both Android and iOS apps. (explicit)
  • Delivery rule correctness: Free delivery applies automatically only at ≥ Rs. 200; a delivery charge applies automatically below Rs. 200. (explicit)
  • Manual pricing control: Vegetable prices are updated manually by the admin via the master sheet/table, not automated pricing. (explicit)
  • Payment security: UPI and card flows are handled by Razorpay or Cashfree; COD is recorded and settled on delivery. (explicit)
  • Authentication security: Phone-OTP verification via Firebase Authentication or MSG91; protected destinations require an established session. (explicit + required_inference)
  • Accessibility: Readable text and controls stay whole at 375px, 768px, and 1280px; reduced-motion mode provides a usable static arrangement. (direction)
Page 24 of 27

10. Tech Stack

  • Customer mobile app: Flutter or React Native (single codebase for Android and iOS). (explicit)
  • Admin panel: React application UI. (scaffold)
  • Backend: Shared FastAPI process for application APIs and domain modules; source-recommended Node.js with Express or Firebase is preserved as the stated direction. (scaffold + explicit)
  • Database: MariaDB for application-owned persistent data; source-recommended MongoDB or PostgreSQL preserved as stated direction. (scaffold + explicit)
  • Authentication: Firebase Authentication or MSG91 for phone-OTP. (explicit)
  • Payments: Razorpay or Cashfree for UPI (Google Pay, PhonePe), cards, and COD tracking. (explicit)
  • Deployment: docker-compose with backend, database, and frontend services; Kubernetes only if deployment requires it.
Page 25 of 27

11. Assumptions and Constraints

  • The customer app targets Android and iOS only; no web customer surface is in scope.
  • Admin back-office access is restricted to the authenticated store operator; customer destinations require an established customer session.
  • Prices are maintained manually by the admin; no automated pricing is in scope.
  • The Rs. 200 free-delivery threshold is a fixed rule as stated.
  • Payment gateway and OTP provider are external services (Razorpay/Cashfree; Firebase/MSG91); their internal behavior is provider-owned.
  • The provisioned scaffold (FastAPI backend, MariaDB, React frontend) is the runnable inventory; the source-recommended stack is the stated technology direction.
Page 26 of 27

12. Glossary

  • OTP: One-Time Password sent to a phone number for verification.
  • COD: Cash on Delivery — payment collected when the order arrives.
  • UPI: Unified Payments Interface; Google Pay and PhonePe are launched via UPI intents.
  • Tracking ID: Identifier issued on order placement used to follow status progression.
  • Delivery Rules Engine: Logic that applies free delivery at ≥ Rs. 200 and a charge below Rs. 200.
  • Promo Code: Customer-entered code (e.g., DRVEG50) giving an instant price reduction at checkout.
  • Coupon: Admin-created discount with minimum purchase limit, percentage or flat amount, and expiry date.
  • Layout Template: Switchable UI layout for festive seasons or special sales.
  • Store Operator: The admin persona managing the back office.
Page 27 of 27
Live
Landing design preview
Landing: Open admin sign-in link
Login: Enter phone number on admin path
Login: Request OTP
Login: Enter OTP and verify
Login: Resend OTP after failure
Admin Dashboard: View incoming orders
Admin Dashboard: Assign delivery tracking ID
Admin Dashboard: Review customer complaints
Admin Dashboard: Respond and resolve complaint
Price Chart: 1. Edit vegetable price
Price Chart: 2. Save price and confirm propagation
Price Chart: 3. Retry or revert failed save
Coupons: Create coupon code
Coupons: 1. Set minimum, discount and expiry
Coupons: 2. Save coupon
Coupons: 3. Correct validation error
Coupons: Edit or deactivate coupon
Banners & Templates: Upload promotional banner
Banners & Templates: Switch active layout template
Banners & Templates: Preview applied banner and template
Live
Landing design preview
Landing: Open admin sign-in link
Login: Enter phone number on admin path
Login: Request OTP
Login: Enter OTP and verify
Login: Resend OTP after failure
Admin Dashboard: View incoming orders
Admin Dashboard: Assign delivery tracking ID
Admin Dashboard: Review customer complaints
Admin Dashboard: Respond and resolve complaint
Price Chart: 1. Edit vegetable price
Price Chart: 2. Save price and confirm propagation
Price Chart: 3. Retry or revert failed save
Coupons: Create coupon code
Coupons: 1. Set minimum, discount and expiry
Coupons: 2. Save coupon
Coupons: 3. Correct validation error
Coupons: Edit or deactivate coupon
Banners & Templates: Upload promotional banner
Banners & Templates: Switch active layout template
Banners & Templates: Preview applied banner and template