Marketplace

Overview

The marketplace is a peer-to-peer service marketplace where sellers list professional services and buyers browse, compare, and purchase them using Stripe payments.

Module path: src/lib/modules/marketplace/ Route: /marketplace

Key Concepts

Concept	Description
Service	A professional offering listed by a seller with pricing tiers
Package	A pricing tier (basic/standard/premium) with price, delivery time, revisions
Favorites	Users can bookmark services for quick access
Comparison	Side-by-side comparison of up to 10 services
Provider	Seller info attached to services (name, avatar, location)

Browsing & Discovery

The marketplace page displays services with:

• Category/subcategory filtering
• Search by keyword
• Favorites toggle to show only bookmarked services
• Service cards with quick view, compare, favorite, and message buttons

Types

File: src/lib/modules/marketplace/types/marketplace.ts

interface MarketplaceService {
  // Service fields from hub
  hubId: string;
  hubHandle: string;
  hubName: string;
  hubLogo: string;
  hubOwnerId: string;
}

interface ExtendedService {
  isFavorite?: boolean;
}

interface Provider {
  displayName: string;
  avatarUrl: string;
  userName: string;
  location: string;
  profileId: string;
}

type PackageTier = 'basic' | 'standard' | 'premium';

State Management

marketplaceManager

File: src/lib/modules/marketplace/stores/marketplace-manager.svelte.ts

marketplaceManager.allServices;        // All services with creator info
marketplaceManager.filteredServices;   // Filtered by category/search/favorites
marketplaceManager.categories;         // Unique categories
marketplaceManager.subcategories;      // Subcategories for selected category

marketplaceManager.setCategory(category);
marketplaceManager.setSearchQuery(query);
marketplaceManager.toggleFavoritesOnly();
marketplaceManager.clearFilters();

favoritesManager

File: src/lib/modules/marketplace/stores/favorites-manager.svelte.ts

favoritesManager.favorites;      // Array of favorite services
favoritesManager.count;           // Total count
favoritesManager.isFavorite(id);  // Check if favorited
favoritesManager.toggleFavorite(service);

Firestore path: users/{userId}/favorites/{serviceId}

Components

Component	Purpose
service-card.svelte	Service display with actions
quick-view.svelte	Full service details modal
order-summary.svelte	Checkout summary before payment
comparison.svelte	Side-by-side service comparison

Purchase Flow

1. User browses and selects a service package
2. Quick View modal shows service details and package selection
3. User selects tier and enters requirements
4. Order Summary dialog shows before payment
5. checkoutService.createMarketplaceCheckout() creates Stripe session
6. User redirected to Stripe Checkout
7. On success, redirected to /marketplace/order-success/{sessionId}

Stripe Integration

• Direct Charges model via Stripe Connect
• Platform fee: 5% of order amount
• Checkout sessions stored in: users/{buyerId}/checkout_sessions/{sessionId}
• Seller receives payment minus platform fee directly to their Connect account