How to Build a Marketplace with Lovable

1Create a two-sided marketplace app with Supabase. Set up these tables:
2
3- sellers: id (uuid, references auth.users), stripe_account_id (text), stripe_onboarding_complete (bool default false), display_name, bio, avatar_url, commission_rate (numeric default 0.10), status (pending|approved|suspended), created_at
4- listings: id, seller_id (references sellers), title, description, price (numeric), stock_quantity (int), category (text), status (draft|active|paused|sold_out), created_at, updated_at
5- listing_images: id, listing_id (references listings), storage_path (text), position (int), is_primary (bool default false)
6- orders: id, buyer_id (references auth.users), seller_id (references sellers), status (pending|paid|shipped|delivered|disputed|refunded), stripe_payment_intent_id (text), subtotal (numeric), platform_fee (numeric), seller_payout (numeric), shipping_address (jsonb), created_at, updated_at
7- order_items: id, order_id, listing_id, quantity, unit_price
8- reviews: id, listing_id, order_id (unique — one review per order), reviewer_id (references auth.users), rating (int 1-5), body (text), created_at
9
10RLS:
11- sellers: users can read any approved seller, can insert/update their own seller row
12- listings: anyone can read active listings, sellers can CRUD their own listings
13- listing_images: same as listings
14- orders: buyers see their own orders (buyer_id = auth.uid()), sellers see orders where seller_id matches their seller row
15- reviews: anyone can read, only verified buyers can insert (enforce via Edge Function check)
16
17Create a Supabase Storage bucket called 'listings' (public reads, authenticated uploads).

1Create two Supabase Edge Functions:
2
31. supabase/functions/stripe-connect-onboard/index.ts
4Generates a Stripe Connect OAuth URL.
5Receives: { return_url: string } in body.
6Logic: call Stripe OAuth authorize URL with client_id from Deno.env.get('STRIPE_CONNECT_CLIENT_ID'), scope=read_write, state=user JWT sub claim, redirect_uri pointing to the callback function URL.
7Returns: { url: string }
8
92. supabase/functions/stripe-connect-callback/index.ts
10Handles the OAuth redirect from Stripe.
11Receives: code and state query params.
12Logic:
13- Exchange code for access_token and stripe_user_id via Stripe's token endpoint
14- Decode state to get user_id
15- Upsert sellers row: { id: user_id, stripe_account_id: stripe_user_id, stripe_onboarding_complete: true }
16- Redirect browser to /seller/dashboard?connected=true
17
18Store STRIPE_SECRET_KEY and STRIPE_CONNECT_CLIENT_ID in Cloud tab → Secrets.

1import { useCallback, useState } from 'react'
2import { useForm } from 'react-hook-form'
3import { zodResolver } from '@hookform/resolvers/zod'
4import { z } from 'zod'
5import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
6import { Input } from '@/components/ui/input'
7import { Textarea } from '@/components/ui/textarea'
8import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
9import { Button } from '@/components/ui/button'
10import { supabase } from '@/integrations/supabase/client'
11
12const schema = z.object({
13  title: z.string().min(5).max(120),
14  description: z.string().min(20).max(2000),
15  price: z.coerce.number().positive(),
16  stock_quantity: z.coerce.number().int().min(0),
17  category: z.string().min(1),
18})
19
20type ListingFormValues = z.infer<typeof schema>
21
22export function CreateListingForm({ sellerId }: { sellerId: string }) {
23  const [images, setImages] = useState<File[]>([])
24  const [uploading, setUploading] = useState(false)
25  const form = useForm<ListingFormValues>({ resolver: zodResolver(schema) })
26
27  const onDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
28    e.preventDefault()
29    const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith('image/'))
30    setImages((prev) => [...prev, ...files].slice(0, 8))
31  }, [])
32
33  const onSubmit = async (values: ListingFormValues) => {
34    setUploading(true)
35    const { data: listing } = await supabase
36      .from('listings')
37      .insert({ ...values, seller_id: sellerId, status: 'active' })
38      .select('id')
39      .single()
40    if (!listing) { setUploading(false); return }
41    for (let i = 0; i < images.length; i++) {
42      const path = `${sellerId}/${listing.id}/${Date.now()}-${images[i].name}`
43      await supabase.storage.from('listings').upload(path, images[i])
44      await supabase.from('listing_images').insert({
45        listing_id: listing.id,
46        storage_path: path,
47        position: i,
48        is_primary: i === 0,
49      })
50    }
51    setUploading(false)
52  }
53
54  return (
55    <Form {...form}>
56      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
57        <div
58          onDrop={onDrop}
59          onDragOver={(e) => e.preventDefault()}
60          className="border-2 border-dashed rounded-lg p-8 text-center text-muted-foreground cursor-pointer hover:border-primary transition-colors"
61        >
62          {images.length === 0 ? 'Drag images here or click to select' : `${images.length} image(s) selected`}
63        </div>
64        <FormField control={form.control} name="title" render={({ field }) => (
65          <FormItem><FormLabel>Title</FormLabel><FormControl><Input {...field} /></FormControl><FormMessage /></FormItem>
66        )} />
67        <FormField control={form.control} name="description" render={({ field }) => (
68          <FormItem><FormLabel>Description</FormLabel><FormControl><Textarea rows={5} {...field} /></FormControl><FormMessage /></FormItem>
69        )} />
70        <div className="grid grid-cols-2 gap-4">
71          <FormField control={form.control} name="price" render={({ field }) => (
72            <FormItem><FormLabel>Price ($)</FormLabel><FormControl><Input type="number" step="0.01" {...field} /></FormControl><FormMessage /></FormItem>
73          )} />
74          <FormField control={form.control} name="stock_quantity" render={({ field }) => (
75            <FormItem><FormLabel>Stock</FormLabel><FormControl><Input type="number" {...field} /></FormControl><FormMessage /></FormItem>
76          )} />
77        </div>
78        <FormField control={form.control} name="category" render={({ field }) => (
79          <FormItem><FormLabel>Category</FormLabel>
80            <Select onValueChange={field.onChange}>
81              <FormControl><SelectTrigger><SelectValue placeholder="Select category" /></SelectTrigger></FormControl>
82              <SelectContent>
83                <SelectItem value="electronics">Electronics</SelectItem>
84                <SelectItem value="clothing">Clothing</SelectItem>
85                <SelectItem value="home">Home & Garden</SelectItem>
86                <SelectItem value="art">Art & Crafts</SelectItem>
87              </SelectContent>
88            </Select>
89          <FormMessage /></FormItem>
90        )} />
91        <Button type="submit" disabled={uploading} className="w-full">
92          {uploading ? 'Publishing...' : 'Publish Listing'}
93        </Button>
94      </form>
95    </Form>
96  )
97}

1Build a marketplace storefront page at src/pages/Marketplace.tsx.
2
3Requirements:
4- Header with a shadcn/ui Command component (open with Cmd+K or clicking a search bar).
5  On input change, query Supabase: .textSearch('listings_search_vector', query, { type: 'websearch' })
6  Show results as CommandItem rows with listing title, price, and seller name.
7  Clicking a result navigates to /listing/[id].
8- Category filter tabs below the header using shadcn/ui Tabs. 'All' plus one tab per category.
9  Switching tabs re-fetches listings with .eq('category', selected) filter.
10- Listing grid: 2 columns mobile, 3 tablet, 4 desktop. Each Card shows:
11  - Primary image from listing_images where is_primary = true (Supabase Storage public URL)
12  - Title (2-line clamp), price, seller display_name, average rating (from reviews aggregate), stock Badge
13  - 'Add to Cart' button
14- Infinite scroll: fetch 20 listings at a time using .range(offset, offset+19). Increment offset when the user scrolls near the bottom using an IntersectionObserver.
15- Sort dropdown: Newest, Price Low to High, Price High to Low, Top Rated

1Create a Supabase Edge Function at supabase/functions/create-payment-intent/index.ts.
2
3The function receives: { order_id: string } in the request body.
4Requires authentication (validate JWT).
5
6Logic:
71. Fetch the order with its order_items and seller from Supabase using service role key.
82. Calculate: subtotal, platform_fee = subtotal * seller.commission_rate, seller_payout = subtotal - platform_fee.
93. Create a Stripe PaymentIntent:
10   - amount: subtotal in cents (multiply by 100)
11   - currency: 'usd'
12   - application_fee_amount: platform_fee in cents
13   - transfer_data: { destination: seller.stripe_account_id }
14   - metadata: { order_id, seller_id }
154. Update the orders row: stripe_payment_intent_id = intent.id, platform_fee, seller_payout.
165. Return: { client_secret: intent.client_secret }
17
18In the frontend checkout page:
19- Load Stripe.js with your publishable key.
20- Call the Edge Function to get client_secret.
21- Mount a Stripe PaymentElement inside a shadcn/ui Card.
22- On payment confirmation, update order status to 'paid' and navigate to /order-confirmation/[orderId].

1Create a Supabase Edge Function at supabase/functions/submit-review/index.ts.
2
3Receives: { listing_id: string, order_id: string, rating: number, body: string }
4Requires authentication.
5
6Logic:
71. Get user_id from JWT.
82. Verify the order exists where id = order_id AND buyer_id = user_id AND status = 'delivered'.
93. Verify no existing review where order_id = order_id (one review per order).
104. Verify the order contains an order_item with listing_id = listing_id.
115. If all checks pass, insert review: { listing_id, order_id, reviewer_id: user_id, rating, body }.
126. Return { success: true }.
13
14In the frontend, after a review is submitted, re-fetch the listing's review aggregate.
15On the listing page, show:
16- Average rating as filled/half/empty Star icons
17- Review count in parentheses
18- List of reviews as Cards with reviewer avatar (from auth.users), rating, body, and relative date
19- 'Leave a Review' Button only shown if the current user has a delivered order for this listing and has not yet reviewed it