twc-rumeo

byfree followers

Build a complete, functional, production-quality **mobile-first multi-vendor web app** called **RUMEO**, powered by **TWC WebCore**. ## PRODUCT RUMEO is a local commerce marketplace based on **BOPIS (Buy Online, Pick Up In Store)**. **Tagline:** Discover Local. Shop Online. Pick Up Nearby. Core flow: **Discover Store → Browse Catalogue → Order → Vendor Prepares → Customer Picks Up → Verify Code → Complete** RUMEO is NOT a delivery platform. Customers purchase online and collect orders directly from physical stores. Build a genuinely functional application with frontend, backend, database, authentication, authorization, CRUD, validation and persistent data. Do NOT create a static mockup. --- ## BRAND Primary brand: **RUMEO** Technology brand: **TWC WebCore** Parent brand: **TWC Group of Services** Use RUMEO prominently. Use "Powered by TWC WebCore" subtly in the footer and platform/vendor areas. Brand personality: * Modern * Friendly * Local * Trustworthy * Youthful * Indian startup feel Design a polished, premium but simple light UI. Avoid generic AI aesthetics, excessive gradients, glassmorphism, huge rounded cards and unnecessary animations. **Mobile-first is mandatory.** --- # USER ROLES ### CUSTOMER Discover stores, search products, browse catalogues, add to cart, checkout, choose pickup time, select payment method, track orders, view pickup code and order history. ### VENDOR Register business, manage store, categories, products, inventory and hours; receive/accept/reject orders; prepare orders; mark ready; verify pickup codes; view analytics; pause orders. ### ADMIN Approve/reject/suspend vendors, manage vendors/customers/orders, view platform analytics and settings. Implement secure role-based access and protected routes. --- # CUSTOMER MARKETPLACE ## Homepage Create a polished marketplace homepage. Hero: **Discover Local. Shop Online. Pick Up Nearby.** Supporting text: "Shop from stores around you, order online and collect your purchase directly from the shop." CTAs: **Explore Stores** **Become a Vendor** Include: * Search * Nearby stores * Popular stores * Popular categories * Recently added stores * How RUMEO Works * Vendor CTA * Trust section * Footer ## Store Discovery Create `/stores`. Features: * Search stores/products * Category filter * Location discovery * Open/closed status * Sorting Store cards: * Logo * Name * Category * Location * Open/closed * Preparation time * Product count * View Store --- # PUBLIC STORE Every approved vendor gets a storefront: `/store/[store-slug]` Display: * Logo * Cover image * Store name * Category * Description * Address * Phone * Hours * Open/closed status * Preparation time * Pickup instructions * Categories Products: * Image * Name * Description * Price * Availability * Stock * Quantity selector * Add to Cart Customers can browse without logging in but must authenticate at checkout. --- # CART A cart can contain products from **only one store**. If another store's product is added, show: "You already have items from another store." Options: **Clear Cart & Continue** **Keep Current Cart** Cart supports: * Quantity update * Remove item * Subtotal * Total * Store information --- # CHECKOUT Collect: * Name * Phone * Email * Pickup date * Pickup time/window Payment: * Pay Online * Pay At Store For MVP, **simulate payment only**. Do not integrate Razorpay yet, but structure payment logic for future integration. After checkout create: * Order ID * Unique pickup code, e.g. `RUMEO-4821` * Store details * Pickup time * Items * Total * Payment status * Order status Make the pickup code highly visible. --- # ORDER SYSTEM Statuses: **PLACED → ACCEPTED → PREPARING → READY FOR PICKUP → PICKED UP → COMPLETED** Also support **CANCELLED**. Prevent invalid state transitions. Customer `/orders`: * Active orders * Completed orders * Cancelled orders * Status timeline * Order details * Pickup code Internal notifications: * Order placed * Accepted * Preparing * Ready * Completed --- # PICKUP VERIFICATION Create `/vendor/pickup`. Vendor enters pickup code. Validate: * Code exists * Correct vendor * Order is ready * Not already collected If valid, show customer, order, items, total and payment status. Button: **Confirm Pickup** Then order becomes **PICKED UP → COMPLETED**. Prevent duplicate pickup verification. --- # VENDOR ONBOARDING Fields: * Owner name * Business name * Phone * Email * Category * Address * City * Pincode * Description * Logo * Cover image * Opening hours * Pickup instructions * Preparation time New vendors start as **PENDING APPROVAL**. Only approved vendors become public. --- # VENDOR DASHBOARD Create `/vendor/dashboard`. Show: * Today's orders * Pending orders * Ready for pickup * Today's sales * Products * Low stock Quick actions: Add Product | Orders | Catalogue | Inventory | Store Settings | Pickup ## Orders Tabs: New | Accepted | Preparing | Ready | Completed | Cancelled Actions: Accept | Reject | Start Preparing | Mark Ready | Verify Pickup ## Products Full CRUD. Fields: Name, description, category, price, compare-at price, image, SKU, stock, low-stock threshold, availability. Availability: Available | Low Stock | Out of Stock | Hidden ## Categories Create, edit, delete and reorder. ## Inventory Prevent overselling. Reserve inventory when an order is placed. Release inventory if cancelled. Finalize deduction when picked up. Show low-stock warnings. ## Store Settings Manage: Name, logo, cover, description, address, phone, hours, pickup instructions, preparation time and active/inactive status. Include **Pause New Orders**. --- # ADMIN DASHBOARD Create `/admin`. Metrics: * Total vendors * Approved vendors * Pending vendors * Customers * Orders * Orders today * Platform GMV * Estimated commission * Active stores Admin can: * Approve/reject vendors * Suspend/reactivate vendors * Search/filter vendors * View customers * View all orders * Filter orders by vendor/status/date * View analytics --- # DATABASE Use a proper relational database. Tables/entities: `users` `profiles` `vendors` `stores` `store_hours` `categories` `products` `inventory` `customers` `orders` `order_items` `payments` `pickup_codes` `notifications` Critical architecture: **ONE PLATFORM → MANY VENDORS → EACH VENDOR HAS ITS OWN STORE, CATALOGUE, INVENTORY AND ORDERS** Vendors must NEVER access another vendor's data. Customers can only access their own orders. Admins have platform-wide access. Implement server-side authorization and ownership checks. --- # AUTHENTICATION Implement: * Customer signup/login * Vendor signup/login * Admin login * Logout * Protected routes * Role-based redirects Do not rely only on client-side role checks. --- # MOBILE EXPERIENCE Mobile-first design. Bottom navigation: **Home | Stores | Orders | Cart | Profile** Requirements: * Touch-friendly controls * Sticky cart CTA where useful * Compact product cards * Easy checkout * No horizontal scrolling * Responsive dashboards * Tables become mobile-friendly cards * Fast navigation Desktop should enhance the mobile experience. --- # DEMO DATA Populate realistic Indian demo data. Create 5 stores: 1. Local Fashion Store 2. Gift & Accessories Store 3. Stationery Store 4. Mobile Accessories Store 5. Local Grocery Store Each needs logo, cover, categories, products, prices, inventory and hours. Also create sample customers/orders so dashboards look functional. --- # ROUTES Customer: `/` `/stores` `/store/[slug]` `/cart` `/checkout` `/orders` `/orders/[id]` `/profile` Vendor: `/vendor/onboarding` `/vendor/dashboard` `/vendor/orders` `/vendor/products` `/vendor/categories` `/vendor/inventory` `/vendor/pickup` `/vendor/store` `/vendor/settings` Admin: `/admin` `/admin/vendors` `/admin/customers` `/admin/orders` `/admin/analytics` --- # UI STATES Every major screen needs loading, empty, error and success states. Examples: * No stores found * No products * No orders * Vendor awaiting approval * Product unavailable * Invalid pickup code Use toast notifications for important actions. --- # FOOTER **RUMEO** Discover Local. Shop Online. Pick Up Nearby. Links: About | How RUMEO Works | For Vendors | Contact | Privacy | Terms Attribution: **Powered by TWC WebCore** **A TWC Group of Services product** --- # DO NOT BUILD YET Do not implement: * Delivery drivers * Delivery tracking * Live GPS * Real payment gateway * GST/accounting * Vendor subscriptions * Loyalty * Advanced coupons * AI chatbot * Recommendation engine * Multi-city logistics * Complex commission settlement Keep architecture extensible for future versions. --- # ACCEPTANCE TEST The following MUST work using the actual backend/database: 1. Vendor registers. 2. Admin approves vendor. 3. Vendor creates category. 4. Vendor adds product/inventory. 5. Product appears publicly. 6. Customer discovers store. 7. Customer adds product. 8. Customer checks out. 9. Order is saved to database. 10. Pickup code is generated. 11. Vendor receives order. 12. Vendor accepts. 13. Vendor prepares. 14. Vendor marks Ready. 15. Customer sees updated status. 16. Vendor enters pickup code. 17. System validates it. 18. Vendor confirms pickup. 19. Order becomes Completed. 20. Inventory updates. 21. Customer history updates. 22. Vendor analytics update. If something only looks functional but isn't connected to the backend/database, implement the real functionality. Build **RUMEO as a real multi-vendor SaaS web application powered by TWC WebCore**, not a static landing page.

Admin Dashboard
Admin Dashboard

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 8

System Requirements Document for twc-rumeo

1. Introduction

RUMEO is a mobile-first multi-vendor web application designed to facilitate local commerce through a BOPIS (Buy Online, Pick Up In Store) model. It aims to connect customers with local stores, allowing them to discover, shop online, and pick up their purchases in-store. The application is powered by TWC WebCore and is intended for a youthful, modern audience, emphasizing a friendly and trustworthy shopping experience.

2. System Overview

RUMEO provides a platform for customers to explore local stores, browse products, and place orders for in-store pickup. Vendors can manage their stores, products, and orders, while admins oversee platform operations. The application includes secure authentication, role-based access, and persistent data storage, ensuring a seamless and secure user experience.

2a. Product Interpretation and Delivery Boundary

RUMEO is a fully functional web application with a mobile-first design, built using TWC WebCore. It supports customer, vendor, and admin roles with distinct capabilities and access controls. The application excludes delivery services and advanced features like real payment gateways and AI chatbots, focusing on core BOPIS functionality. Future enhancements are supported by an extensible architecture.

Page 2 of 8

2b. Source Content Inventory

Not applicable as no explicit content_source directive is provided.

2c. Page Content and Component Coverage

Homepage

  • Hero Section: "Discover Local. Shop Online. Pick Up Nearby."
  • Search: Store and product search functionality.
  • Nearby Stores: Display of stores based on user location.
  • Popular Stores/Categories: Highlighted sections for popular choices.
  • Recently Added Stores: New store listings.
  • How RUMEO Works: Explanation of the BOPIS process.
  • Vendor CTA: Call to action for vendors to join.
  • Trust Section: Information on security and reliability.
  • Footer: Links to About, How RUMEO Works, For Vendors, Contact, Privacy, Terms, and attribution to TWC WebCore.

Store Discovery (/stores)

  • Search and Filters: Store/product search, category filters, location discovery.
  • Store Cards: Logo, name, category, location, open/closed status, preparation time, product count, and a "View Store" button.

Public Store (/store/[store-slug])

  • Store Information: Logo, cover image, name, category, description, address, phone, hours, open/closed status, preparation time, pickup instructions, categories.
  • Product Listings: Image, name, description, price, availability, stock, quantity selector, add to cart functionality.
Page 3 of 8

Cart

  • Single Store Limitation: Notification and options when adding products from different stores.
  • Cart Management: Quantity updates, item removal, subtotal, total, and store information.

Checkout

  • Customer Information: Name, phone, email, pickup date, and time/window.
  • Payment Options: Simulated "Pay Online" and "Pay At Store".
  • Order Summary: Order ID, pickup code, store details, pickup time, items, total, payment status, order status.

Orders (/orders)

  • Order Management: Active, completed, and cancelled orders, status timeline, order details, and pickup code display.

Vendor Dashboard (/vendor/dashboard)

  • Order Management: Today's orders, pending orders, ready for pickup, today's sales.
  • Product Management: CRUD operations for products, low stock warnings.
  • Store Settings: Manage store details, pause new orders.

Admin Dashboard (/admin)

  • Metrics and Management: Total vendors, approved/pending vendors, customers, orders, platform GMV, estimated commission, active stores.
  • Vendor and Order Management: Approve/reject vendors, suspend/reactivate vendors, search/filter vendors, view customers and orders, filter orders by vendor/status/date.
Page 4 of 8

3. Functional Requirements

  • As a Customer, I should be able to discover stores, search products, browse catalogues, add items to the cart, checkout, choose a pickup time, select a payment method, track orders, view pickup codes, and access order history. (explicit)
  • As a Vendor, I should be able to register my business, manage my store, categories, products, inventory, and hours, receive/accept/reject orders, prepare orders, mark them ready, verify pickup codes, view analytics, and pause orders. (explicit)
  • As an Admin, I should be able to approve/reject/suspend vendors, manage vendors/customers/orders, and view platform analytics and settings. (explicit)
  • The system should implement secure role-based access and protected routes. (explicit)
  • The application must support a mobile-first design with touch-friendly controls and responsive dashboards. (explicit)

4. User Personas

  • Customer: Engages with the platform to discover local stores, shop online, and pick up purchases in-store.
  • Vendor: Manages store operations, products, and orders, ensuring a smooth customer experience.
  • Admin: Oversees platform operations, vendor approvals, and analytics.

5. Core User Flows

Customer Flow

  1. Access the homepage and search for stores/products.
  2. Browse store catalogues and add products to the cart.
  3. Proceed to checkout, enter personal details, and select a pickup time.
  4. Choose a payment method and confirm the order.
  5. Receive an order confirmation with a unique pickup code.
  6. Track order status and pick up the order in-store using the pickup code.
Page 5 of 8

Vendor Flow

  1. Register and complete the onboarding process.
  2. Manage store settings, products, and inventory.
  3. Receive and process customer orders.
  4. Mark orders as ready for pickup and verify pickup codes.
  5. Access analytics and manage store operations.

Admin Flow

  1. Review and approve/reject vendor applications.
  2. Manage vendors, customers, and orders.
  3. Access platform analytics and generate reports.
Page 6 of 8

6. Visuals Colors and Theme

  • Muse: Haraldur Thorleifsson
  • Palette:
    • Background: #FFFFFF
    • Surface: #F7F7F7
    • Text: #333333
    • Primary: #FF6F61
    • Accent: #FFD700
    • Muted: #D3D3D3
  • Typography:
    • Headings: Sora — Bold
    • Body: Outfit
    • Scale: 1.333 modular, 48/36/24/18/16
  • Shape Language: Chunky rounded cards with strong color blocks
  • Layout: Fluid, mobile-first with clear sections
  • Motion: Lively entrance animations, hover pops, character loops

7. Signature Design Concept

The homepage features a bold primary color block with an oversized headline in Sora, supported by characterful illustrations at the corners. A sticky bottom navigation bar with vibrant icons ensures easy access to key sections. CTA buttons feature lively hover interactions, enhancing user engagement.

Page 7 of 8

8. Interaction Model & Motion Direction

  • Interaction Model: Animated
  • Motion Tempo: Expressive
  • Hero Dimensionality: Layered_2d
  • Landing Hero Motion Brief: The hero section features a bold primary color block with an oversized headline, supported by characterful illustrations. Interactive elements have lively hover animations, creating an engaging user experience.

9. Non-Functional Requirements

  • The application must be mobile-first, ensuring a seamless experience on mobile devices. (explicit)
  • Implement secure authentication and authorization mechanisms. (explicit)
  • Ensure data persistence and integrity across all operations. (explicit)

10. Tech Stack

  • Frontend: React (mobile-first design)
  • Backend: Python/FastAPI
  • Database: Relational database (e.g., PostgreSQL)
  • Authentication: JWT-based secure authentication
  • Deployment: Docker/docker-compose, Kubernetes for scalable deployment

11. Assumptions and Constraints

  • The application will not support delivery services or real payment gateways in the initial version.
  • The architecture is designed to be extensible for future enhancements.
Page 8 of 8

12. Glossary

  • BOPIS: Buy Online, Pick Up In Store
  • CRUD: Create, Read, Update, Delete
  • GMV: Gross Merchandise Value
  • MVP: Minimum Viable Product
  • TWC WebCore: Technology platform powering RUMEO

This document outlines the complete system requirements for the RUMEO application, ensuring a cohesive and functional multi-vendor marketplace experience.

Admin Dashboard design preview
Admin Dashboard: Review vendor applications
Admin Dashboard: Approve or reject vendor
Admin Dashboard: Manage customers and orders
Admin Dashboard: View platform analytics
Admin Dashboard design preview
Admin Dashboard: Review vendor applications
Admin Dashboard: Approve or reject vendor
Admin Dashboard: Manage customers and orders
Admin Dashboard: View platform analytics