PRING grocery app -- 2
Budget: ₹1,000 – ₹5,000 INR
## 1. The Gateway (Sign-In & Smart Routing)
The app features a single, universal login screen used by everyone. There are no options to log in with Google, Apple, or email—it is strictly WhatsApp-only.
* **The Interface:** The screen displays the Pring logo, a text field locked with a "+91" country code prefix where the user types their WhatsApp number, and a large button labeled "Verify via WhatsApp OTP".
* **The Behind-the-Scenes Smart Routing:** When that button is pressed, the app runs a hidden condition check:
* **If the number typed matches your unique admin phone number:** The app instantly skips the customer verification process and opens a secret "Admin Passcode Screen." This screen presents a secure 6-digit numeric pin-pad layout where you enter your master access code.
* **If the number belongs to anyone else:** The app treats them as a standard customer. It instantly triggers an API call to send a 6-digit verification code directly to their WhatsApp chat and opens a standard OTP entry grid page.
---
## 2. The Customer Experience
Once logged in, a customer navigates through a highly optimized, localized grocery shopping flow. All pricing throughout these screens is strictly displayed in Indian Rupees (₹).
### Home Dashboard & Search Active State
* **Automatic Location Detection:** As soon as the home page loads, the app accesses the phone's native GPS hardware to grab its coordinates. It passes these coordinates through Google Maps to automatically display the text at the top of the screen, indicating the detected location in Kengeri, Bengaluru.
* **Category Navigation:** Below the location bar is a horizontal scrolling row of clean, circular category badges ("Fresh Fruits", "Vegetables", "Dairy & Eggs", etc.). Tapping a category instantly filters the main product feed below.
* **Active Search Page:** Tapping the search bar transitions the user to a clean, dedicated search screen. This screen actively queries your database index as they type, keeping the main home screen from getting cluttered.
* **Product Feed & Sticky Cart:** The main feed is a 2-column grid of product cards. Each card contains the product image, name, unit sizing (e.g., "500g", "1kg"), an availability indicator, and a prominent "+" button. At the very bottom of the screen, a persistent green bar floats over the content, tracking the cart live: `[3 Items] • View Cart • ₹380`. Tapping this bar opens the Cart page.
### Cart, Google Maps Address Manager, & Order History
* **Interactive Cart Engine:** On the cart page, users see their items with minus and plus buttons (`- 1 +`). Clicking these buttons adjusts the quantity variables in the device's local memory, which recalculates the item total, adds a fixed ₹25 delivery charge, and updates the Grand Total instantly on screen.
* **Google Maps Address Hub:** Below the cart summary is an interactive map box with a draggable pin. Users can drag the pin to pinpoint their exact building. This address is saved as a custom card (like "Home" or "Work") in their profile, featuring a trash icon so they can delete saved locations instantly.
* **Order History & One-Tap Reorder:** This section lists all past orders chronologically. Each card shows the placement date, total price paid, and a clear "Order Status Tracker" timeline. Crucially, it features a prominent "Reorder" button. Tapping it copies all the items from that past order back into the active cart and redirects the user straight to the checkout screen.
---
## 3. The Admin Dashboard
Once you pass the secret passcode screen using your unique phone number, you enter the operational control center of Pring. This interface completely strips away consumer profile elements, notifications, and unnecessary clutter to maximize efficiency.
### Live Order Queue Panel
* This screen is a split-pane dashboard that updates automatically in real time using open database listeners.
* **The Left Side:** A continuous scrolling list of active incoming orders. Each order card highlights when new, showing the customer's name, WhatsApp phone number, pinned delivery address, itemized grocery list, payment method (like UPI or Cash on Delivery), and the total order value.
* **The Right Side (WhatsApp Status Hub):** When you tap an active order, this panel opens up. It features quick-reply status pill buttons labeled "Order Received", "Packing Items", "Out for Delivery", and "Delivered", alongside a custom text box for typing direct notes to the customer.
### Real-Time Inventory Manager
* Accessed via an internal tab, this grid displays your entire product catalog. Instead of being static images, every component on this card is an editable text input or variable switch:
* **Editable Text Fields:** You can click directly into the fields on any card to update the Product Name, Description, Price (₹), and Sizing Unit dynamically.
* **Order Threshold Controls:** Each card contains distinct "Min Qty" and "Max Qty" input blocks. This prevents customers from ordering fewer than your wholesale minimums or clearing out your stock past your set limits.
* **Real-Time Availability Toggle:** A simple boolean switch field labeled "In Stock / Out of Stock". Flipping this switch off instantly hides the product from the customer's home feed in real time without refreshing the app.
* **Add & Delete Controls:** Each card has a red "Delete Product" trash can icon that instantly removes the item document from the database. At the bottom right corner of the dashboard sits a floating green "+" button; tapping it slides open a blank template form to input details and publish a brand-new product instantly.
---
## 4. The Automated WhatsApp Notification System
Because you want communication handled seamlessly via WhatsApp instead of push notifications, a background system bridges your database activity directly to the Meta WhatsApp Cloud API.
1. **The Admin Alert:** The exact second a customer clicks "Confirm Order" in their app, a new order document is generated in the cloud. A background database trigger instantly detects this new document and shoots an automated WhatsApp message directly to your personal WhatsApp phone number: "New Pring Order Received! Order #1043. Total: ₹495. Open your admin dashboard immediately."
2. **The Live Customer Tracking:** While you are processing orders in your Admin Dashboard, clicking any of your quick-status pill buttons triggers a background update.
* Tapping `[Out for Delivery]` updates the database status field to "Out for Delivery". The customer's active order tracking page updates on their screen instantly.
* Simultaneously, the app automatically sends a pre-approved template message directly to the customer's WhatsApp number: "Good news! Your Pring order #1043 has been packed and is now out for delivery!"
* Tapping `[Delivered]` sends a final automated WhatsApp follow-up: "Your Pring order #1043 has been successfully delivered. Thank you for shopping with us!"
The app features a single, universal login screen used by everyone. There are no options to log in with Google, Apple, or email—it is strictly WhatsApp-only.
* **The Interface:** The screen displays the Pring logo, a text field locked with a "+91" country code prefix where the user types their WhatsApp number, and a large button labeled "Verify via WhatsApp OTP".
* **The Behind-the-Scenes Smart Routing:** When that button is pressed, the app runs a hidden condition check:
* **If the number typed matches your unique admin phone number:** The app instantly skips the customer verification process and opens a secret "Admin Passcode Screen." This screen presents a secure 6-digit numeric pin-pad layout where you enter your master access code.
* **If the number belongs to anyone else:** The app treats them as a standard customer. It instantly triggers an API call to send a 6-digit verification code directly to their WhatsApp chat and opens a standard OTP entry grid page.
---
## 2. The Customer Experience
Once logged in, a customer navigates through a highly optimized, localized grocery shopping flow. All pricing throughout these screens is strictly displayed in Indian Rupees (₹).
### Home Dashboard & Search Active State
* **Automatic Location Detection:** As soon as the home page loads, the app accesses the phone's native GPS hardware to grab its coordinates. It passes these coordinates through Google Maps to automatically display the text at the top of the screen, indicating the detected location in Kengeri, Bengaluru.
* **Category Navigation:** Below the location bar is a horizontal scrolling row of clean, circular category badges ("Fresh Fruits", "Vegetables", "Dairy & Eggs", etc.). Tapping a category instantly filters the main product feed below.
* **Active Search Page:** Tapping the search bar transitions the user to a clean, dedicated search screen. This screen actively queries your database index as they type, keeping the main home screen from getting cluttered.
* **Product Feed & Sticky Cart:** The main feed is a 2-column grid of product cards. Each card contains the product image, name, unit sizing (e.g., "500g", "1kg"), an availability indicator, and a prominent "+" button. At the very bottom of the screen, a persistent green bar floats over the content, tracking the cart live: `[3 Items] • View Cart • ₹380`. Tapping this bar opens the Cart page.
### Cart, Google Maps Address Manager, & Order History
* **Interactive Cart Engine:** On the cart page, users see their items with minus and plus buttons (`- 1 +`). Clicking these buttons adjusts the quantity variables in the device's local memory, which recalculates the item total, adds a fixed ₹25 delivery charge, and updates the Grand Total instantly on screen.
* **Google Maps Address Hub:** Below the cart summary is an interactive map box with a draggable pin. Users can drag the pin to pinpoint their exact building. This address is saved as a custom card (like "Home" or "Work") in their profile, featuring a trash icon so they can delete saved locations instantly.
* **Order History & One-Tap Reorder:** This section lists all past orders chronologically. Each card shows the placement date, total price paid, and a clear "Order Status Tracker" timeline. Crucially, it features a prominent "Reorder" button. Tapping it copies all the items from that past order back into the active cart and redirects the user straight to the checkout screen.
---
## 3. The Admin Dashboard
Once you pass the secret passcode screen using your unique phone number, you enter the operational control center of Pring. This interface completely strips away consumer profile elements, notifications, and unnecessary clutter to maximize efficiency.
### Live Order Queue Panel
* This screen is a split-pane dashboard that updates automatically in real time using open database listeners.
* **The Left Side:** A continuous scrolling list of active incoming orders. Each order card highlights when new, showing the customer's name, WhatsApp phone number, pinned delivery address, itemized grocery list, payment method (like UPI or Cash on Delivery), and the total order value.
* **The Right Side (WhatsApp Status Hub):** When you tap an active order, this panel opens up. It features quick-reply status pill buttons labeled "Order Received", "Packing Items", "Out for Delivery", and "Delivered", alongside a custom text box for typing direct notes to the customer.
### Real-Time Inventory Manager
* Accessed via an internal tab, this grid displays your entire product catalog. Instead of being static images, every component on this card is an editable text input or variable switch:
* **Editable Text Fields:** You can click directly into the fields on any card to update the Product Name, Description, Price (₹), and Sizing Unit dynamically.
* **Order Threshold Controls:** Each card contains distinct "Min Qty" and "Max Qty" input blocks. This prevents customers from ordering fewer than your wholesale minimums or clearing out your stock past your set limits.
* **Real-Time Availability Toggle:** A simple boolean switch field labeled "In Stock / Out of Stock". Flipping this switch off instantly hides the product from the customer's home feed in real time without refreshing the app.
* **Add & Delete Controls:** Each card has a red "Delete Product" trash can icon that instantly removes the item document from the database. At the bottom right corner of the dashboard sits a floating green "+" button; tapping it slides open a blank template form to input details and publish a brand-new product instantly.
---
## 4. The Automated WhatsApp Notification System
Because you want communication handled seamlessly via WhatsApp instead of push notifications, a background system bridges your database activity directly to the Meta WhatsApp Cloud API.
1. **The Admin Alert:** The exact second a customer clicks "Confirm Order" in their app, a new order document is generated in the cloud. A background database trigger instantly detects this new document and shoots an automated WhatsApp message directly to your personal WhatsApp phone number: "New Pring Order Received! Order #1043. Total: ₹495. Open your admin dashboard immediately."
2. **The Live Customer Tracking:** While you are processing orders in your Admin Dashboard, clicking any of your quick-status pill buttons triggers a background update.
* Tapping `[Out for Delivery]` updates the database status field to "Out for Delivery". The customer's active order tracking page updates on their screen instantly.
* Simultaneously, the app automatically sends a pre-approved template message directly to the customer's WhatsApp number: "Good news! Your Pring order #1043 has been packed and is now out for delivery!"
* Tapping `[Delivered]` sends a final automated WhatsApp follow-up: "Your Pring order #1043 has been successfully delivered. Thank you for shopping with us!"