jade-website

As a vendor I want to use backend APIs to manage my profile, food items, and orders. Implement FastAPI endpoints: POST /vendors/onboard (submit onboarding form), PUT /vendors/{id}/profile (update profile), POST /vendors/{id}/items (add food item), PUT /vendors/{id}/items/{item_id} (update item), DELETE /vendors/{id}/items/{item_id}, GET /vendors/{id}/orders (list incoming orders), PUT /vendors/{id}/orders/{order_id}/status (update order status), GET /vendors/{id}/reviews. Integrate with MongoDB.

As a user I want to view a food provider's full profile and menu. Implement the Vendor Profile page based on the existing JSX design (v3): provider banner image, name, cuisine tags, Veg/Jain badge, star rating with review count, about section, menu items list (image, name, price, add-to-cart button), subscription plan cards (weekly/monthly with Subscribe CTA), save-to-wishlist/favourite toggle (heart icon), reviews section with star breakdown and user review cards. Links: from Explore, to Cart (add items), to Order Confirm (subscribe plan).

As a user I want to see my order confirmation after placing an order. Implement the Order Confirm page based on the existing JSX design (v3): animated success checkmark (green #4CAF50), order ID display, order summary (items, provider name, total paid, estimated delivery time), delivery address recap, WhatsApp notification CTA ('Track on WhatsApp'), 'Continue Exploring' button back to Home/Explore. Mobile-first responsive design.

As a user I want to use a backend API to subscribe to tiffin plans. Implement FastAPI endpoints: GET /plans (list weekly/monthly/custom tiffin plans with pricing), POST /subscriptions (create subscription for a user with plan id, vendor id, dietary preference, start date), GET /subscriptions/{user_id} (list active subscriptions), DELETE /subscriptions/{id} (pause/cancel). Integrate with MongoDB. Support veg/jain dietary filter per subscription.

As a guest I want to learn about Mitzy Foods' mission and team. Implement the About page based on the existing JSX design (v3): hero banner with tagline 'Empowering Local Foodpreneurs', mission section (connecting home chefs with customers, supporting women entrepreneurs), vision section (building trusted homemade food ecosystem), team/founder highlights, women empowerment 'Earn from Your Kitchen' campaign section, stats bar (cities, chefs, customers), Mithin Technoworld branding footer note. Warm beige background, orange/green accent highlights.

As a vendor I want to learn about partnership benefits on the Become Partner page. Implement the Become Partner page based on the existing JSX design (v3): hero section targeting home chefs and women entrepreneurs ('Earn from Your Kitchen' headline), benefits grid (flexible hours, weekly payouts, free onboarding, vendor dashboard), success stories/testimonials from existing partners, earnings calculator widget (estimated monthly income), simple onboarding teaser form (name, city, contact, cuisine type), prominent CTA 'Start Selling Today' (orange → green). Links: from Home Hero and NavBar, to Onboarding page.

As a user I want to see the Mitzy Foods homepage with all sections. Implement the Home page based on the existing JSX design (v2). Includes: NavBar (sticky, hamburger mobile), Hero (interactive map, typewriter animation, location search bar), TrustBar (500+ chefs, 10k customers stats), FoodCategories (Tiffin, Home Chefs, Cloud Kitchens cards with bounce hover), HowItWorks (3-step scroll-triggered glow animation), FeaturedProviders (provider cards with ratings, Order Now CTA), TiffinPlans (weekly/monthly/custom subscription cards, veg/jain toggle), BecomePartner (dual-tone orange+green CTA section), Testimonials (auto-play carousel), AppDownloadBanner, Footer (4-column, social links). All sections must be responsive mobile-first.

As a user I want to complete my order on the Checkout page. Implement the Checkout page based on the existing JSX design (v3): delivery address form (name, phone, address, locality, city, pincode), address save option, delivery schedule selector (deliver now or schedule later with date/time slot picker), order summary panel, payment method selection (UPI, card, COD), coupon/offers section, WhatsApp order integration option, 'Place Order' CTA (solid orange → green on hover). Form validation, loading state, and error handling. Links: from Cart, to Order Confirm on success.

As a user I want to use backend APIs to save favourites and leave reviews. Implement FastAPI endpoints: POST /wishlist (save provider to favourites), DELETE /wishlist/{provider_id} (remove), GET /wishlist/{user_id} (list favourites), POST /reviews (submit rating + review text for a provider), GET /reviews/{provider_id} (list reviews with pagination). Compute and update aggregate star rating on review submission. Integrate with MongoDB.

As a user I want to use backend APIs to manage my cart and place orders. Implement FastAPI endpoints: POST /cart/add (add item), PUT /cart/update (quantity), DELETE /cart/remove, GET /cart (fetch cart), POST /orders (place order from cart — saves address, payment method, items, total), GET /orders/{id} (fetch order status). Integrate with MongoDB. Support WhatsApp notification trigger on order placement.

As a user I want to review my selected items in the Cart before checkout. Implement the Cart page based on the existing JSX design (v3): list of added food items (image, name, quantity stepper, price per item, remove button), order summary panel (subtotal, delivery fee, taxes, total in ₹), promo code input field, 'Proceed to Checkout' CTA (solid orange), empty cart state with 'Explore Food' link back to Explore page. Cart state managed via React context or local state. Mobile-first responsive layout.

As a user I want to browse and filter food providers on the Explore page. Implement the Explore/Listings page based on the existing JSX design (v3): sidebar/top filter bar (location, veg/jain/both dietary toggle, price range slider, star rating filter), responsive grid of food provider cards (image 16:9, provider name, cuisine tags, Veg/Jain green badge, star rating + review count, starting price in ₹, Order Now button orange→green hover), pagination or infinite scroll, empty state UI. Page receives optional category pre-filter from Home FoodCategories click (query param). Links back to Home and forward to Vendor Profile.

As a vendor I want to complete my onboarding to start selling on Mitzy. Implement the Vendor Onboarding page based on the existing JSX design (v2): multi-step form (Step 1: personal info — name, phone, email; Step 2: kitchen details — cuisine type, speciality, city/locality, photos upload; Step 3: ID & verification — Aadhar/PAN, FSSAI license optional; Step 4: review & submit), progress stepper indicator, form validation per step, success confirmation screen with next steps. Warm beige background, orange accent steps. Links: from Become Partner, to Dashboard on approval.

As a guest I want the Mitzy Foods website to be discoverable via search engines and load fast. Implement SEO-friendly structure: page-level meta tags (title, description, Open Graph), structured data markup for food providers (schema.org), sitemap.xml generation, robots.txt, lazy loading for food images, image compression pipeline, code splitting per route, Lighthouse performance audit and fixes. Ensure mobile-first rendering scores.

As a vendor I want to manage my profile, listings, and orders from a Dashboard. Implement the Vendor Dashboard page based on the existing JSX design (v3): sidebar navigation (Profile Setup, Food Items, Orders, Reviews, Earnings), Food Items management (list items with image, name, price, availability toggle, add/edit/delete), Orders management (incoming orders list with status: new/preparing/delivered, order detail modal), Reviews & Ratings tracker (average stars, individual review cards), Earnings summary widget. Mobile-responsive with collapsible sidebar. Links: from Onboarding (post-approval).

As a user I want to switch between English and Gujarati on any page. Implement i18n support across the entire frontend: set up react-i18next or equivalent, create translation JSON files for English and Gujarati covering all page content (headings, labels, CTAs, error messages), add EN | ગુ language toggle in NavBar and Footer, persist language preference in localStorage, ensure all dynamic text uses translation keys.

As a user I want all pages to fetch and submit real data via backend APIs. Wire all frontend pages (Explore, Vendor Profile, Cart, Checkout, Order Confirm, Dashboard, Onboarding) to their respective FastAPI backend endpoints. Set up Axios/Fetch client with base URL config, request interceptors for auth tokens, error handling (toasts/alerts for API failures), and loading skeleton states. Replace all mock/static data with live API calls.