System Requirements Document for product-price-compare

1. Introduction

product-price-compare is a consumer price-comparison and shopping product for Indian electronics and appliance buyers. It is modeled on the BOB ride website (justbobit.com) as analyzed from the user-supplied link, and it applies the marketplace and e-commerce platform conventions of Flipkart, Amazon, Vijay Sales, and Croma.

The product's intent, derived from the BOB ride reference, is relief from fragmentation: BOB ride's own words are "Skip the app chaos" and "Ride easy," with the tagline "Bob compares all major ride apps to help you instantly find the cheapest or fastest ride, without switching apps or wasting time." The same intent is transposed to shopping: instead of hopping between four store apps and websites to check prices on a phone, laptop, television, or appliance, the shopper sees the four stores' prices side by side in one place, instantly identifies the cheapest or fastest option, and completes the purchase without switching apps or wasting time.

The audience is everyday value-seekers and deal hunters in India who buy electronics and appliances across Flipkart, Amazon, Vijay Sales, and Croma — not enterprise procurement teams. The emotional register is warm, fast, human, and a little bit fun: a friendly co-pilot who did the boring comparison work, not a spreadsheet.

The product is delivered as a first-party web application with application-owned identity, a public anonymous entry surface, a browsable catalog, product detail pages, a cart, a protected checkout, and operational workspaces for catalog management and order fulfillment.

2. System Overview

product-price-compare is a web application with three active human roles and a set of first-party pages that carry their accepted work.

Current delivery. A responsive first-party web application. Anonymous visitors land on a public entry surface that explains the product and lets them search and browse. Shoppers browse a catalog of electronics and appliances, open a product detail page that stacks the four stores' prices, add items to a cart, and complete a protected checkout that creates an order. Store/Catalog Managers maintain the product listings that shoppers browse. Order Fulfillment Operators review incoming orders and move them through fulfillment.

Actors. The accepted active-human catalog is exactly three roles: Shopper, Store/Catalog Manager, and Order Fulfillment Operator. The four stores — Flipkart, Amazon, Vijay Sales, and Croma — are external store platforms whose prices and delivery estimates are compared; they are non-persona external actors, not users of this product.

Accepted behavior. Price comparison across the four named stores; catalog browsing with filters; product detail with a stacked four-store price comparison; cart retention; protected checkout that submits cart items as an order; catalog management (listing overview plus a focused add/update editor); order fulfillment review and processing; and shared returning verification through a single Login surface.

Ownership. All accepted human-facing work is owned by first-party pages. The four stores are external price and delivery sources; they are not destinations inside this product.

Narrow exclusions. This document does not add adjacent commerce capabilities that the source did not accept — no wishlist, no reviews or ratings, no coupons or promo codes, no loyalty program, no multi-address address book, no payment-gateway integration detail, no returns/refunds workflow, no shipping-carrier integration, no analytics dashboards, no admin user-management console, no notifications system, and no native mobile app. The BOB ride reference's "Download now" call to action is a fact about the reference site's own conversion flow; it is not carried over as a product capability here, because the accepted delivery shape for this product is a first-party web application with custom UI.

2a. Product Interpretation and Delivery Boundary

What this product is. A single place where a shopper types what they want to buy and immediately sees what it costs at Flipkart, Amazon, Vijay Sales, and Croma — with the cheapest option called out, the fastest delivery called out, and a clear path to buy. The comparison is the product; the shopping flow exists so that the comparison leads somewhere.

Delivery and access ownership. The product is a first-party web application. Its public entry surface, catalog, and product detail pages are reachable without signing in, so a first-time visitor can evaluate the product and see real prices before committing to anything. The cart is also reachable without signing in, so a shopper can assemble a basket while browsing. Checkout is protected: submitting a cart as an order is a durable commitment bound to a specific shopper, so it requires an established identity. Catalog management and order fulfillment are protected operational workspaces reachable only by provisioned operational users.

Identity. Identity is application-owned. A shopper who has no account establishes one through self-service enrollment at the point where protected checkout requires it; a returning shopper verifies through Login. Operational users (Store/Catalog Manager, Order Fulfillment Operator) do not self-enroll — they are provisioned or invited before they can reach their workspaces. Login is a shared returning-verification surface for all three roles.

Current vs. future. Everything described in this document is current. Section 10 records future ideas that are explicitly not part of the current build and must not appear in current pages or acceptance criteria.

2b. Source Content Inventory

The BOB ride reference (justbobit.com) is an authoritative content_source. The following facts were verified from its primary landing page and are preserved item by item.

Hero statements (verbatim):

• "Skip the app chaos"
• "Ride easy."

Tagline (verbatim):

• "Bob compares all major ride apps to help you instantly find the cheapest or fastest ride, without switching apps or wasting time."

Calls to action (verbatim):

• "Download now"

Domain context from the reference:

• Function: mobility aggregator / ride comparison tool.
• Audience: urban commuters seeking efficient, cost-effective ride-hailing choices.
• Brand voice: simple; relief from fragmentation; speed; value.

Structure reference from the reference:

• Layout: hero section with main messaging and a download button.
• Navigation: no visible menu or footer in the initial viewport.
• Sections: hero + tagline + CTA.

Feature reference from the reference:

• Core feature: instant fare comparison across major ride-hailing apps to find the cheapest or fastest ride.
• User flow: single-click "Download now" to obtain the app.
• Interactions: not visible beyond the CTA.

How these facts are used. The reference's structure (a hero that states the value proposition, a one-line explanation of what is being compared, and one clear primary action) and its brand voice (simple, relief from fragmentation, speed, value) are carried into this product's public entry surface. The reference's core feature pattern — compare many providers in one place, surface cheapest and fastest, remove the need to switch apps — is carried into this product's comparison behavior across Flipkart, Amazon, Vijay Sales, and Croma. The reference's literal ride-hailing subject matter and its "Download now" app-acquisition flow are not carried over, because the accepted product subject is electronics and appliance shopping across the four named stores and the accepted delivery shape is a first-party web application.

2c. Page Content and Component Coverage

The page inventory below is the final ordered page contract. Each page appears exactly once.

Landing

• Information and state. Anonymous public entry surface. Presents the product's value proposition in the reference's voice: a hero statement in the spirit of "Skip the app chaos" / "Ride easy," transposed to shopping; a one-line tagline explaining that the product compares Flipkart, Amazon, Vijay Sales, and Croma to instantly find the cheapest or fastest option without switching apps or wasting time; and a single clear primary action that begins a search. Also presents the four-store comparison as a concrete object — a stacked price card showing the same product's price at each of the four stores with the cheapest row highlighted — and a live price-drop ticker band.
• Primary actions. Enter a product query in the search bar and submit it; follow the primary action into the catalog; open a highlighted product from the ticker or the comparison card.
• Supporting actions. Read the tagline; read the four-store comparison card; read the scrolling price-drop ticker; reach Login.
• Domain entities. Product query; store (Flipkart, Amazon, Vijay Sales, Croma); store price; store delivery estimate; price drop.
• Component responsibilities. Hero headline block; search bar with submit control and live indicator; stacked four-store price card with cheapest-row highlight and cheapest badge; coral ticker band with horizontally scrolling price-drop items; store chip row (20px coloured dot plus uppercase store name); primary action control; link to Login.
• States. Loading: the price card and ticker show the custom flat character illustration (a shopper with a phone and a floating cart) in coral, lime, and cream, never a bare spinner or grey skeleton. Empty: if no price data is available, the card area shows the character illustration with a short line explaining that prices are being fetched. Success: the four-store card renders with the cheapest row filled and stamped. Error: if price data cannot be fetched, the card area shows the character illustration with a plain-language message and a retry control; the search bar remains usable. Recovery: retry re-attempts the fetch without leaving the page.

Catalog

• Information and state. Browsable grid of electronics and appliance products. Each product card shows product image on white, product name, the cheapest available price at display scale, the store offering that price as a chip, a price-delta badge reading "SAVE ₹…" when a saving against the highest store price exists, and a delivery estimate. A sticky filter rail on the left (desktop) or a pill bar (mobile) narrows the grid. The current query, active filters, and result count are visible.
• Primary actions. Open a product card to reach Product Details; apply or clear a filter; change the sort order; submit a new query.
• Supporting actions. Read the cheapest price and its store chip; read the price-delta badge; read delivery estimates; page through results.
• Domain entities. Product; product image; category; brand; price at each of the four stores; cheapest store; price delta; delivery estimate; filter; sort order; query.
• Component responsibilities. Search bar; sticky filter rail / mobile pill bar; sort control; product card grid (3 columns desktop, 1 column mobile); product card with image, name, cheapest price, store chip, price-delta badge, delivery estimate; result count; pagination or incremental load control; empty-state illustration block.
• States. Loading: the grid area shows the custom character illustration with a short line; the filter rail remains interactive. Empty: no products match the query or filters — the character illustration appears with a plain-language explanation and a control to clear filters. Success: the grid renders cards with cheapest price, store chip, and price-delta badge. Error: the grid area shows the character illustration with a plain-language message and a retry control; filters and search remain usable. Recovery: retry re-runs the same query and filters; clearing filters returns to the unfiltered grid.

Product Details

• Information and state. Focused view of one product. Two-column layout: sticky image gallery on the left; price-comparison stack on the right. The stack lists all four stores as rows, each with the store chip, that store's price, and that store's delivery estimate; the cheapest row is filled coral and stamped "CHEAPEST" in lime. The product's name, brand, category, and description are shown. A price-delta badge states the saving between the cheapest and the highest store price.
• Primary actions. Add the product to the cart; choose which store's offer to add.
• Supporting actions. Browse gallery images; read each store's price and delivery estimate; read the cheapest badge; read the price-delta badge; return to the catalog.
• Domain entities. Product; product image set; brand; category; description; store; store price; store delivery estimate; cheapest store; price delta; cart line.
• Component responsibilities. Sticky image gallery; product identity block; four-store price-comparison stack with per-row store chip, price, and delivery estimate; cheapest-row highlight and badge; price-delta badge; add-to-cart control with store selection; back-to-catalog control.
• States. Loading: the gallery and the price stack show the custom character illustration with a short line. Empty: if a store has no price for this product, that row shows an explicit "not available at this store" state rather than a blank or a zero. Success: all four rows render; the cheapest row is highlighted and stamped; add-to-cart is enabled. Error: if the price stack cannot be loaded, the stack area shows the character illustration with a plain-language message and a retry control; the gallery and product identity remain visible. Recovery: retry reloads the price stack in place; if the product itself cannot be found, the page offers a return to the catalog.

Cart

• Information and state. The shopper's retained selection before checkout. Lists each cart line with product image, product name, the chosen store, that store's price, and quantity. Shows a running total and, where applicable, the total saving achieved by choosing the cheapest store per line. Shows the custom character illustration when the cart is empty.
• Primary actions. Change the quantity of a line; remove a line; proceed to checkout.
• Supporting actions. Read per-line store and price; read the running total; read the total saving; return to the catalog to keep shopping.
• Domain entities. Cart; cart line; product; chosen store; store price; quantity; running total; total saving.
• Component responsibilities. Cart line list with image, name, store chip, price, quantity control, and remove control; running total block; total-saving block; proceed-to-checkout control; continue-shopping control; empty-cart illustration block.
• States. Loading: the line list area shows the custom character illustration with a short line. Empty: the character illustration appears with a plain-language explanation and a control to browse the catalog. Success: lines render with store chips, prices, quantities, and the running total. Error: if the cart cannot be loaded, the area shows the character illustration with a plain-language message and a retry control. Recovery: retry reloads the cart; removing a line or setting quantity to zero removes it and recomputes the total immediately.

Checkout

• Information and state. Protected purchase-completion surface. Requires an established shopper identity. Shows the order summary (each line with product, chosen store, price, quantity), the order total, and the delivery details the shopper supplies for this order. Confirms what is about to be committed before submission.
• Primary actions. Supply or confirm delivery details; submit the order.
• Supporting actions. Review the order summary; return to the cart to adjust; read the order total.
• Domain entities. Order; order line; product; chosen store; price; quantity; order total; delivery details; shopper identity.
• Component responsibilities. Order summary block; delivery-details form; order-total block; submit-order control; return-to-cart control; identity gate that routes an unauthenticated shopper to enrollment or Login and returns them to checkout afterward.
• States. Loading: the summary area shows the custom character illustration with a short line. Empty: if the cart is empty, checkout does not proceed and offers a return to the catalog. Success: the order is created and the shopper sees an order confirmation with an order reference and the next step. Error: if submission fails, the summary and delivery details are preserved, a plain-language message explains the failure, and a retry control is offered. Recovery: retry resubmits the same order without re-entering details; the shopper can also return to the cart, adjust, and return to checkout.

Products

• Information and state. Protected catalog-management overview for the Store/Catalog Manager. Lists the product listings that exist, with each listing's name, category, brand, current cheapest price and its store, and a status indicating whether the listing is complete and current. Supports finding a listing that needs maintenance.
• Primary actions. Open a listing in Product Editor; start adding a new product.
• Supporting actions. Search or filter the listing set; read each listing's status; read the cheapest price and store.
• Domain entities. Product listing; name; category; brand; store prices; cheapest store; listing status.
• Component responsibilities. Listing table or card list; search and filter controls; status indicator per listing; control to open Product Editor for an existing listing; control to start a new product in Product Editor.
• States. Loading: the listing area shows the custom character illustration with a short line. Empty: no listings exist yet — the character illustration appears with a plain-language explanation and a control to add the first product. Success: listings render with status. Error: the listing area shows the character illustration with a plain-language message and a retry control. Recovery: retry reloads the listing set.

Product Editor

• Information and state. Protected focused workspace for adding a product or updating an existing product's details. Holds the product's name, brand, category, description, and image set, plus the per-store price and delivery-estimate entries for Flipkart, Amazon, Vijay Sales, and Croma. Shows which fields are required and which are incomplete.
• Primary actions. Save the product; save changes to an existing product.
• Supporting actions. Add or replace product images; enter or update each store's price and delivery estimate; cancel and return to Products.
• Domain entities. Product; name; brand; category; description; image set; store; store price; store delivery estimate; validation state.
• Component responsibilities. Product identity fields; description field; image set control; four per-store price and delivery-estimate entry blocks, each with its store chip; validation feedback per field; save control; cancel control.
• States. Loading: the form area shows the custom character illustration with a short line while an existing product is fetched. Empty: a new product starts with empty fields and clearly marked required fields. Success: saving persists the product and returns the manager to Products with the listing visible and its status updated. Error: if saving fails, all entered values are preserved, the failing fields are marked, a plain-language message explains the failure, and a retry control is offered. Recovery: retry saves the same values; the manager can correct marked fields and save again.

Orders

• Information and state. Protected fulfillment workspace for the Order Fulfillment Operator. Lists incoming customer orders with each order's reference, the shopper it belongs to, its lines (product, chosen store, quantity), its total, and its current fulfillment state. Supports finding an order and moving it through fulfillment.
• Primary actions. Open an order; advance an order's fulfillment state.
• Supporting actions. Search or filter orders by state; read order lines and totals; read the shopper the order belongs to.
• Domain entities. Order; order reference; shopper; order line; product; chosen store; quantity; order total; fulfillment state.
• Component responsibilities. Order list with state indicator; search and filter controls; order detail view with lines and totals; fulfillment-state advance control; empty-state illustration block.
• States. Loading: the order list area shows the custom character illustration with a short line. Empty: no orders have been placed — the character illustration appears with a plain-language explanation. Success: orders render with their current fulfillment state, and advancing a state updates the list immediately. Error: the list area shows the character illustration with a plain-language message and a retry control; if advancing a state fails, the order's previous state is preserved and a retry control is offered. Recovery: retry reloads the list or re-attempts the state change.

Login

• Information and state. Shared returning-verification surface, reachable anonymously. Verifies an identity that already exists and returns the person to the protected work they were attempting. Also offers the path to self-service enrollment for a shopper who has no account yet. Does not itself grant access to any protected workspace.
• Primary actions. Verify an existing identity; continue to self-service enrollment.
• Supporting actions. Read the explanation of which protected work requires verification; return to the public catalog without verifying.
• Domain entities. Identity; credential; intended destination.
• Component responsibilities. Verification form; enrollment entry control; intended-destination handling so a verified person lands back on the protected page they came from; error feedback block.
• States. Loading: the form area shows the custom character illustration with a short line. Empty: not applicable — the form is always present. Success: verification succeeds and the person is returned to the protected destination they were attempting. Error: invalid credentials produce a plain-language message that does not reveal whether the identity exists; the form remains filled with the identifier and cleared of the secret. Recovery: the person can retry, or continue to self-service enrollment if they have no account.

3. Functional Requirements

Each requirement is a distinct story point with its provenance and observable acceptance.

FR-1 — Compare prices across the four stores. As a Shopper, I should see the price of a product at Flipkart, Amazon, Vijay Sales, and Croma side by side in one place, so that I can find the cheapest option without switching apps or wasting time. Provenance: explicit (reference feature: instant comparison across major apps to find the cheapest or fastest option, without switching apps). Lifecycle: initiated by the Shopper entering a query or opening a product; the four stores are the indispensable external participants whose prices are compared; the observable result is a four-row price stack with the cheapest row highlighted; failure is a price source that cannot be read, which is shown as an explicit unavailable row rather than a blank; continuation is opening the product or adding it to the cart. Acceptance: for a product with prices at all four stores, four rows render, each with its store chip, price, and delivery estimate, and the lowest price row is highlighted and stamped "CHEAPEST."

FR-2 — Identify the fastest option. As a Shopper, I should see each store's delivery estimate alongside its price, so that I can choose the fastest option when speed matters more than the lowest price. Provenance: explicit (reference feature: cheapest or fastest). Lifecycle: initiated by the Shopper viewing a product's price stack or a catalog card; the stores supply the estimates; the observable result is a delivery estimate on each store row and on each catalog card; failure is a missing estimate, shown as an explicit unknown rather than a blank; continuation is choosing that store's offer. Acceptance: every store row and every catalog card shows a delivery estimate or an explicit unknown state.

FR-3 — See the saving. As a Shopper, I should see how much I save by choosing the cheapest store, so that the value of comparing is visible at a glance. Provenance: explicit (reference brand voice: value; the product's core promise is finding the cheapest option). Lifecycle: initiated by the Shopper viewing a catalog card or a product's price stack; the observable result is a price-delta badge stating the saving between the cheapest and the highest store price; failure is a single-store availability, in which case no badge is shown rather than a misleading zero; continuation is adding the cheapest offer to the cart. Acceptance: when at least two stores have prices and they differ, a "SAVE ₹…" badge appears; when they do not differ, no badge appears.

FR-4 — Browse the catalog. As a Shopper, I should browse a catalog of electronics and appliances, so that I can discover products without knowing exactly what I want. Provenance: explicit (marketplace conventions of Flipkart, Amazon, Vijay Sales, and Croma). Lifecycle: initiated by the Shopper opening the catalog; the observable result is a grid of product cards each showing image, name, cheapest price, cheapest store chip, and delivery estimate; failure is a catalog that cannot be loaded, shown with a retry; continuation is opening a product. Acceptance: the catalog renders a 3-column grid on desktop and 1 column on mobile, and each card shows the cheapest price and its store chip.

FR-5 — Narrow the catalog. As a Shopper, I should filter and sort the catalog, so that I can reach the products I actually want. Provenance: explicit (marketplace conventions of the four named platforms). Lifecycle: initiated by the Shopper applying a filter or changing the sort order; the observable result is a narrowed, re-sorted grid with a visible result count; failure is a filter combination with no matches, shown as an empty state with a control to clear filters; continuation is opening a product or clearing filters. Acceptance: applying a filter updates the grid and the result count; clearing filters restores the unfiltered grid.

FR-6 — Inspect a product in detail. As a Shopper, I should open a product and see its full information and its four-store price comparison, so that I can decide before buying. Provenance: explicit (marketplace conventions; reference feature of comparing before choosing). Lifecycle: initiated by the Shopper opening a product card; the observable result is a two-column page with a sticky image gallery and a four-store price stack with the cheapest row highlighted; failure is a price stack that cannot be loaded, shown with a retry while the gallery and identity remain visible; continuation is adding to the cart. Acceptance: the page shows the product's name, brand, category, description, image set, and all four store rows with prices and delivery estimates.

FR-7 — Choose which store's offer to buy. As a Shopper, I should choose which store's offer to add to my cart, so that I can act on the comparison rather than being forced into one store. Provenance: explicit (the comparison exists so the shopper can pick the cheapest or fastest). Lifecycle: initiated by the Shopper selecting a store row on the product page; the observable result is that the chosen store and its price are recorded on the cart line; failure is a store whose offer is unavailable, which cannot be selected and is shown as unavailable; continuation is proceeding to the cart. Acceptance: the cart line records the chosen store and that store's price, and the cart shows the store chip for that line.

FR-8 — Retain a selection in the cart. As a Shopper, I should keep selected products in a cart before buying, so that I can assemble a basket while browsing. Provenance: explicit (marketplace conventions of the four named platforms). Lifecycle: initiated by the Shopper adding a product; the observable result is a cart line with image, name, chosen store, price, and quantity, plus a running total; failure is a cart that cannot be loaded, shown with a retry; continuation is proceeding to checkout. Acceptance: added products persist in the cart across navigation within the session, and the running total reflects all lines.

FR-9 — Adjust the cart. As a Shopper, I should change quantities and remove lines, so that the basket matches what I actually want. Provenance: explicit (marketplace conventions). Lifecycle: initiated by the Shopper changing a quantity or removing a line; the observable result is an immediately recomputed running total and total saving; failure is a change that cannot be persisted, which leaves the previous