venu-822006/vr

Purpose and Entrypoints

VR Vegetables is a local vegetable-delivery e-commerce system with a React/Next.js customer UI and a Node/Express API plus background worker. The browser entry is pages/index.jsx, bootstrapped through pages/_app.jsx; the application UI is centered in src/App.jsx. Backend processes start from backend/server.js (HTTP API) and backend/worker.js (asynchronous jobs).

Frontend Application Shell

src/App.jsx coordinates the storefront’s major states: browsing, authentication, cart/checkout, account access, and owner operations. The Next wrapper at pages/index.jsx exposes this React application, while pages/_document.jsx controls document-level markup. Shared presentation and global UI behavior are composed from src/components/Header.jsx, src/components/BottomNav.jsx, and src/styles/styles.js.

Storefront and Product Discovery

Catalog presentation is client-driven from local product data in src/data/products.js, with labels/content centralized in src/data/constants.js and src/data/translations.js. Product browsing flows through category selection, search, and card rendering: src/components/CategoryTabs.jsx, src/components/SearchSuggestions.jsx, and src/components/ProductCard.jsx. Product imagery is served from public/images.

Cart and Checkout Boundary

The purchasing flow accumulates product selections in the client UI, presents them through src/components/CartDrawer.jsx, and transitions into src/components/Checkout.jsx. src/components/PaymentOption.jsx encapsulates payment-choice presentation. This is the primary boundary where frontend state must invoke the Express API for order creation and downstream processing rather than treating local UI state as authoritative.

Identity, Customer, and Owner Modes

Authentication and persisted session behavior are isolated under src/utils/auth.js, src/utils/session.js, and src/utils/storage.js; customer profile handling is in src/utils/customerProfile.js. Customer-facing account operations are rendered by src/components/AccountPage.jsx. A separate owner authorization path, src/utils/ownerAuth.js, gates administrative functionality in src/components/OwnerDashboard.jsx.

Backend API and Asynchronous Processing

backend/server.js is the API boundary between the browser and durable services, expected to handle application requests, database access, and queue submission. backend/worker.js consumes BullMQ jobs independently of HTTP request lifetimes. Operational data scripts—backend/seed_images.js and backend/reset_login_data.js—support initial content and login-data maintenance.

Runtime, Infrastructure, and External Services

Production separates the Next.js frontend (Vercel) from Node API and worker processes (Render), configured for deployment by render.yaml. Supabase PostgreSQL is the durable database, and Upstash Redis supports cache and BullMQ queues. Local parity services—PostgreSQL, Redis, and MinIO/S3-compatible object storage—are orchestrated by docker-compose.yml; backend containerization is defined in backend/Dockerfile. Browser push/service-worker behavior is represented by src/sw.js and src/utils/push.js.