The Challenge
Three Portals. One Unified Ecosystem.
Yarns & Wools needed more than a standard e-commerce site. As a multi-brand textile platform, they required a complete digital ecosystem:
- A consumer storefront controllable without developers.
- A self-service portal where independent brands can register, upload, and manage their own products and inventory.
- A super admin system to oversee the entire platform, approve brands, and manage content and global policies.
Every portal talks to the same Firebase backend in real time. When brands update their stock, it reflects on the storefront instantly. When admins approve a brand, their catalogue goes live immediately.
Architecture Breakdown
Portal 1: Consumer Storefront — yarnsandwool.com
- Fully CMS-Controlled Landing Page: Every section (hero banners, spotlight products, promotional content, promises, newsletter) is editable by the super admin without touching code.
- Brand Discovery Sub-Pages: Each approved brand receives a dedicated branded sub-page featuring their full product catalogue, brand story, and filtered shop experience.
- Shop & Category Browsing: Multi-attribute filtering by brand, category, price range, and fabric type with real-time stock status and high-res image galleries.
- Cart & Checkout Flow: Full cart state management, shipping calculations, checkout workflow, order confirmation, and customer order history.
- Policies & Legal Pages: Shipping, returns, and terms pages fully managed dynamically from the admin CMS.
- WhatsApp & Support Integration: Direct customer support link, newsletter opt-in, and responsive layouts across all mobile, tablet, and desktop viewports.
Portal 2: Brand Portal — Self-Service Management
- Brand Registration & Onboarding: Brands apply to join with their profile, logo, description, and contact info, routed directly to the super admin for review.
- Product & Variant Management: Add, edit, and delete products with image uploads, rich descriptions, tiered pricing, variants (size, colour), and category assignment.
- Independent Category Management: Brands create and manage their own product categories, isolated cleanly per brand in the marketplace.
- Real-Time Stock & Inventory Control: Manage stock levels per variant, receive low-stock alerts, and toggle product visibility on/off instantly.
- Brand Profile Management: Update brand story, cover banners, logo, and public storefront presentation.
- Order Visibility: Real-time order feeds for items placed for their products with customer fulfilment details.
Portal 3: Super Admin Panel — Full Platform Control
- Brand Approval Workflow: Review incoming brand applications, approve or reject with feedback, and toggle storefront visibility.
- Landing Page CMS: Real-time control over the consumer storefront: hero banners, spotlight product slots, promotional campaigns, and brand ordering with zero code required.
- Policy & Content Management: Update shipping policies, return rules, terms & conditions, and legal pages on the fly.
- Platform-Wide Product Oversight: View and manage all products across all brands, override visibility, flag issues, and maintain catalogue quality.
- Order & Customer Management: Unified order history, customer records, and fulfilment tracking across all brands in a single dashboard.
- Global Platform Settings: Manage shipping thresholds, exchange policies, featured brands, promotional banners, and site-wide announcements.
Tech Stack & Decisions
- Frontend: Next.js (App Router), React, TypeScript
- Styling: Tailwind CSS, responsive design
- Backend & Database: Firebase (Firestore, Auth, Storage)
- Real-Time Layer: Firestore live listeners (instant synchronization across all 3 portals)
- Authentication: Firebase Auth with multi-role access control (Super Admin, Brand, Customer)
- Deployment: Vercel (Frontend & SSR)
Why Firebase
- Real-Time Sync: When a brand updates inventory or pricing in their portal, the consumer storefront updates instantly without caching lag.
- Multi-Role Security: Firestore Security Rules enforce strict data isolation between brands, admins, and customers at the database level.
- Optimized Storage & CDN: Firebase Storage delivers fast product photography and brand assets globally.
- Zero Maintenance Overhead: Handles high-traffic flash sales and spikes without server provisioning overhead.
The Outcome
Yarns & Wools launched as a production multi-brand e-commerce marketplace running with zero developer dependency for day-to-day operations. The super admin updates banners and approves brands, brands manage their catalogue independently, and customers enjoy a frictionless shopping experience.