How to Build a Personalization System with Lovable

1Create a behavioral personalization system schema in Supabase:
2
3- user_events: id, user_id (nullable, for anonymous events), session_id, event_name (text), properties (jsonb), page_url (text), created_at
4- segments: id, name, description, rules (jsonb array of condition groups), is_active (bool), recomputed_at, member_count (int, denormalized)
5- user_segment_memberships: id, user_id, segment_id, assigned_at, expires_at (nullable). Unique constraint on (user_id, segment_id).
6- content_slots: id, slot_key (text, unique, e.g. 'hero_heading'), description, default_content (jsonb)
7- content_variants: id, slot_key, segment_id (nullable, null = default), content (jsonb), priority (int default 0)
8- ab_tests: id, name, slot_key, traffic_split (jsonb, e.g. {"control": 50, "variant_a": 50}), status (draft|running|stopped|completed), started_at, ended_at
9- ab_test_variants: id, test_id, variant_key (e.g. 'control', 'variant_a'), content (jsonb), impressions (int default 0), conversions (int default 0)
10- user_ab_assignments: id, user_id, test_id, variant_key, assigned_at. Unique constraint on (user_id, test_id).
11
12RLS:
13- user_events: authenticated users can INSERT their own events (user_id = auth.uid()). Service role can SELECT all.
14- user_segment_memberships: users can SELECT their own memberships. Service role can INSERT/UPDATE/DELETE.
15- content_slots, content_variants, segments, ab_tests, ab_test_variants: public SELECT. Service/admin-only writes.
16- user_ab_assignments: users can SELECT/INSERT their own assignments.
17
18Create index: CREATE INDEX idx_events_user_name ON user_events(user_id, event_name, created_at DESC).

1Build a Segment editor page at src/pages/SegmentEditor.tsx.
2
3The rule structure as TypeScript types:
4type Condition = { attribute: 'event_count' | 'event_property' | 'user_property', event?: string, property?: string, operator: 'eq' | 'gt' | 'lt' | 'contains' | 'in', value: string | number, timeframe_days?: number }
5type ConditionGroup = { operator: 'AND', conditions: Condition[] }
6type SegmentRules = { operator: 'OR', groups: ConditionGroup[] }
7
8UI requirements:
9- Page header with segment name Input and description Textarea
10- Rule builder section shows condition groups as Cards
11- Each group Card has a header 'Group N' and an 'Add condition' Button
12- Each condition row has:
13  - Attribute Select: 'Did event', 'Event property', 'User property'
14  - When 'Did event': event name Input, operator Select (more than/less than/exactly), count Input, timeframe Select (last 7/30/90 days)
15  - When 'Event property': event name Input, property name Input, operator Select (equals/contains/is in), value Input
16  - A Remove button (X icon) for each condition
17- Between groups show an 'OR' Badge
18- 'Add Group' Button at the bottom adds a new empty ConditionGroup
19- 'Save Segment' Button that serializes the form state to SegmentRules JSONB and upserts to the segments table
20- Show a 'Preview Size' Button that calls a Supabase Edge Function evaluate-segment with the current rules and returns an estimated member count

1// supabase/functions/compute-segments/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
4
5const corsHeaders = { 'Content-Type': 'application/json' }
6
7serve(async (req: Request) => {
8  // Allow manual trigger via POST with optional segment_id filter
9  const body = req.method === 'POST' ? await req.json().catch(() => ({})) : {}
10  const segmentIdFilter = body.segment_id as string | undefined
11
12  const supabase = createClient(
13    Deno.env.get('SUPABASE_URL') ?? '',
14    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
15  )
16
17  // Fetch active segments
18  let query = supabase.from('segments').select('*').eq('is_active', true)
19  if (segmentIdFilter) query = query.eq('id', segmentIdFilter)
20  const { data: segments, error } = await query
21  if (error) return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: corsHeaders })
22
23  const results: Record<string, number> = {}
24
25  for (const segment of segments ?? []) {
26    try {
27      // Evaluate segment rules — simplified example for event_count conditions
28      const rules = segment.rules as { operator: string, groups: Array<{ conditions: Array<{ attribute: string, event?: string, operator: string, value: number, timeframe_days?: number }> }> }
29
30      // Get all users who qualify
31      const qualifyingUsers = await evaluateSegmentRules(supabase, rules)
32
33      // Get current members
34      const { data: currentMembers } = await supabase
35        .from('user_segment_memberships')
36        .select('user_id')
37        .eq('segment_id', segment.id)
38
39      const currentSet = new Set((currentMembers ?? []).map(m => m.user_id))
40      const newSet = new Set(qualifyingUsers)
41
42      // Add new members
43      const toAdd = qualifyingUsers.filter(uid => !currentSet.has(uid))
44      if (toAdd.length > 0) {
45        await supabase.from('user_segment_memberships').insert(
46          toAdd.map(uid => ({ user_id: uid, segment_id: segment.id, assigned_at: new Date().toISOString() }))
47        )
48      }
49
50      // Remove former members
51      const toRemove = [...currentSet].filter(uid => !newSet.has(uid))
52      if (toRemove.length > 0) {
53        await supabase.from('user_segment_memberships')
54          .delete()
55          .eq('segment_id', segment.id)
56          .in('user_id', toRemove)
57      }
58
59      const memberCount = qualifyingUsers.length
60      await supabase.from('segments').update({ member_count: memberCount, recomputed_at: new Date().toISOString() }).eq('id', segment.id)
61      results[segment.name] = memberCount
62    } catch (err) {
63      results[`${segment.name}_error`] = -1
64    }
65  }
66
67  return new Response(JSON.stringify({ computed: results }), { headers: corsHeaders })
68})
69
70async function evaluateSegmentRules(supabase: ReturnType<typeof createClient>, rules: any): Promise<string[]> {
71  // Simplified: handles event_count conditions only
72  const allUserIds = new Set<string>()
73  for (const group of rules.groups) {
74    const groupUserIds = await evaluateConditionGroup(supabase, group)
75    groupUserIds.forEach(id => allUserIds.add(id))
76  }
77  return [...allUserIds]
78}
79
80async function evaluateConditionGroup(supabase: ReturnType<typeof createClient>, group: any): Promise<string[]> {
81  let resultSet: Set<string> | null = null
82  for (const condition of group.conditions) {
83    const users = await evaluateCondition(supabase, condition)
84    const userSet = new Set(users)
85    resultSet = resultSet === null ? userSet : new Set([...resultSet].filter(x => userSet.has(x)))
86  }
87  return [...(resultSet ?? [])]
88}
89
90async function evaluateCondition(supabase: ReturnType<typeof createClient>, condition: any): Promise<string[]> {
91  const since = condition.timeframe_days
92    ? new Date(Date.now() - condition.timeframe_days * 86400000).toISOString()
93    : new Date(0).toISOString()
94
95  const { data } = await supabase.rpc('get_users_by_event_count', {
96    p_event_name: condition.event,
97    p_min_count: condition.value,
98    p_since: since,
99  })
100  return (data ?? []).map((r: any) => r.user_id)
101}

1Build two things:
2
31. A/B Test manager page at src/pages/AbTests.tsx:
4- List all ab_tests as Cards showing: name, status Badge (draft=gray, running=green, stopped=red), slot_key, traffic split as a horizontal progress bar
5- Each running test shows: total impressions, total conversions, conversion rate per variant as a Recharts BarChart
6- 'Create Test' Button opens a Dialog:
7  - Test name Input
8  - Content slot Select (from content_slots table)
9  - Variant configuration: add up to 4 variants each with a key (text) and percentage (number). Percentages must sum to 100 — show validation error if not
10  - Content editor per variant: a Textarea for the variant's content JSON
11- 'Start Test' and 'Stop Test' Buttons that update the status field
12
132. A hook at src/hooks/useAbTest.ts:
14- Accepts testId: string and userId: string
15- Looks up the test in ab_tests table
16- Checks user_ab_assignments for an existing assignment
17- If no assignment exists, uses a deterministic hash: variant index = sum(userId.charCodeAt(i)) % total_weight, maps to a variant based on traffic_split percentages
18- Inserts the assignment to user_ab_assignments
19- Logs an 'ab_test_impression' user_event
20- Returns the assigned variant's content
21- Export a logConversion(testId, userId) function that logs an 'ab_test_conversion' event

1Build two things:
2
31. Hook at src/hooks/usePersonalization.ts:
4- On mount, fetch the current user's segment IDs from user_segment_memberships WHERE user_id = auth.uid()
5- Also check user_ab_assignments for active tests
6- Expose a function getVariant(slotKey: string): ContentVariant that:
7  1. Fetches content_variants WHERE slot_key = slotKey
8  2. Among variants with a segment_id, finds those matching the user's segments
9  3. Returns the highest priority matching variant, or the default variant (segment_id IS NULL) as fallback
10  4. Caches results in a Map keyed by slotKey to avoid re-fetching on every render
11- Expose loading and error states
12
132. Demo page at src/pages/PersonalizedDemo.tsx:
14- Uses usePersonalization hook
15- Shows a hero section where the heading, subheading, and CTA text all come from getVariant('hero_heading'), getVariant('hero_subheading'), getVariant('hero_cta')
16- While loading, shows skeleton Skeletons for each section
17- Shows a debug panel (only in dev mode) listing the user's current segments as Badges
18- Add a 'Track Event' Button that calls supabase.from('user_events').insert({ event_name: 'demo_cta_click', user_id: user.id, properties: {} }) and shows a Toast confirmation