Hyperlocal Click & Collect Platform for Indore Kiranas
Zero Delivery Markups • 6-Minute Counter Packing • Direct Local Vyapari Counter Rates
KiranaPass Indore is a next-generation click-and-collect web application empowering Indore consumers to shop authentic grocery essentials directly from trusted neighborhood kirana stores (like Shree Ram General Store in Anand Bazar, Old Palasia).
Unlike dark-store quick-commerce apps that impose 15–25% price markups, handling fees, and surge delivery charges, KiranaPass offers:
- ₹0 Delivery & Platform Markups: Pay exact local counter MRPs benchmarked against Bada Bazaar Mandi rates.
- 6-Minute Express Bag Packing: Orders are packed before customer arrival and ready for drive-by or walk-in collection.
- Scannable 4-Digit PIN & QR Pass: Skip the billing queue with express handoff verification (
#KP-8921). - Merchant POS & Inventory Counter: Real-time counter terminal for dukandars with shelf location checklists, order alerts, and instant UPI direct settlements.
The application implements a 1-to-1 visual and interactive replica of the Stitch Click & Collect flow across all 12 modules:
- Discovery Home (
consumer_discovery_home): Hyperlocal hero search, voice search, category circles (Indori Namkeen, Atta & Oils, Detergents), verified partner cards, and interactive floating Quick Cart drawer. - Storefront Catalog (
storefront_digital_inventory): Shop profile, Ramu Bhaiya partner card, 6-min pack metric, and aisle-indexed shelf inventory (Rack B1, Rack B2, Aisle A3). - Express Checkout & Pickup Pass (
express_checkout_4_digit_pickup_pass): Preparation slot picker, bill summary highlighting savings, and perforated scannable 4-digit pickup pass ([4] [8] [2] [1]) with QR code. - Kirana Counter Merchant POS (
kirana_counter_merchant_pos): Counter terminal featuring store open/pause toggle, daily revenue tracker, customer walking ETA, shelf packing checklist, and encrypted PIN handover validator. - Multi-Store Price Comparison (
multi_store_price_comparison_search): Live cross-kirana rate engine (Fortune Sunflower Oil, Tata Tea) comparing local dukan rates against quick-commerce door-delivery totals. - Product Detail Shelf Spec Sheet (
product_detail_shelf_spec_sheet): Authentic Aakash Ratlami Sev 400g pouch showcase, 100% pure veg badge, FSSAI license, shelf coordinates (Rack B1 Eye Level), and app price bento comparison. - Indore Locality GPS Map (
indore_locality_gps_kirana_map): Neighborhood GPS selector across Old Palasia, Anand Bazar, Vijay Nagar, Bhanwarkuan, and Sudama Nagar with vector cartographic preview. - Lifetime Savings Hub (
order_history_lifetime_savings_hub): Gamified savings tracker (₹1,480 lifetime saved), Level 4 Smart Saver status, environmental impact (16 bags saved), and itemized past receipts. - Live Order Tracking Stepper (
live_order_status_stepper): 4-stage tracking stepper with real-time progress from store confirmation to counter bin collection. - Splash Value Onboarding (
splash_value_onboarding): Brand welcome emblem, swipeable 3-card value carousel, 140+ Indore kirana proof counter, and guest/mobile gateway. - Mobile Number OTP Verification (
mobile_number_otp_verification): 6-digit split PIN input grid, WhatsApp OTP fallback, 24-second resend countdown, and zero-spam pledge. - Merchant Dukan Registration KYC (
merchant_store_registration_kyc): 10-minute onboarding wizard, shopkeeper social proof, SLA selector, store UPI QR binding, and 5,000+ FMCG Indore Mandi auto-catalog loader.
Engineered with modern Crisp Light Mode typography and color tokens:
- Primary (Kirana Emerald):
#006948 - Primary Container:
#00855D - Secondary (Indore Saffron Gold):
#FEA619/#855300 - Surface:
#FAF8FF - Cards & Surfaces:
#FFFFFF/#EAEDFF - Typography:
- Headlines & Price Tags:
Plus Jakarta Sans(weights 600, 700, 800) - Body & Micro-labels:
Inter(weights 400, 500, 600) - Iconography:
Material Symbols Outlined(Google Fonts variable font)
- Headlines & Price Tags:
- Framework: React 19 + Vite 6
- Styling: Tailwind CSS v3 with custom tokens, spacing scale, and responsive grid layouts
- State Management: Reactive cart state, slot selection, and rapid screen switching
- Icons & Fonts: Google Fonts
Plus Jakarta Sans,Inter,Material Symbols Outlined - Static Assets: Stored in
public/assets/(kiranapass_logo.png,aakash_sev.png,ramu_bhaiya.png,palasia_map.png)
kiranapass/
├── public/
│ ├── assets/
│ │ ├── aakash_sev.png # Authentic Indori Namkeen packshot
│ │ ├── kiranapass_logo.png # Official KiranaPass vector emblem
│ │ ├── palasia_map.png # Vector cartographic map of Old Palasia
│ │ └── ramu_bhaiya.png # Kirana partner portrait
│ └── favicon.svg
├── src/
│ ├── components/
│ │ ├── BottomNav.jsx # Mobile bottom navigation bar
│ │ ├── CheckoutPass.jsx # Express checkout & 4-digit PIN ticket
│ │ ├── ConsumerHome.jsx # Discovery home screen
│ │ ├── Header.jsx # Top bar & 12-screen rapid switcher
│ │ ├── LiveStepper.jsx # Order status tracking stepper
│ │ ├── LocalityMap.jsx # Indore GPS locality selector & map
│ │ ├── MerchantKyc.jsx # Dukandar onboarding & KYC wizard
│ │ ├── MerchantPOS.jsx # Counter terminal POS & PIN verification
│ │ ├── Onboarding.jsx # Value onboarding carousel
│ │ ├── OtpLogin.jsx # 6-cell OTP login screen
│ │ ├── PriceCompare.jsx # Cross-kirana rate engine
│ │ ├── ProductDetailModal.jsx # Shelf specification modal
│ │ ├── SavingsHub.jsx # Lifetime savings dashboard & receipts
│ │ └── Storefront.jsx # Store inventory & aisle catalog
│ ├── App.jsx # Master application orchestrator
│ ├── index.css # Baseline CSS layers & font rules
│ └── main.jsx # Entry point
├── index.html # HTML shell with Google Fonts & icons
├── tailwind.config.js # Tailwind theme extension & color tokens
└── package.json
- Node.js 18+ or 20+
- npm, yarn, or pnpm
-
Clone the repository:
git clone https://github.com/29Sandesh/kiranapass.git cd kiranapass -
Install dependencies:
npm install
-
Launch development server:
npm run dev
Open
http://localhost:5173/in your browser. -
Build for production:
npm run build
Distributed under the MIT License. Built with ❤️ for Indore's Kirana Vyaparis.