How to Build a URL Shortener App with Lovable

1Create a URL shortener schema in Supabase:
2
3Tables:
4- links: id, user_id (references auth.users), short_code (text, unique), target_url (text), title (text, optional), expires_at (timestamptz, nullable), is_active (bool default true), click_count (int default 0), created_at
5- link_clicks: id, link_id, clicked_at, referrer (text, nullable), country (text, nullable), user_agent_hint (text, nullable)
6
7RLS:
8- links: users can SELECT/INSERT/UPDATE/DELETE their own rows (user_id = auth.uid()). Service role can SELECT all (for redirect function).
9- link_clicks: service role only for INSERT and SELECT. Users can SELECT clicks for their own links via a view: CREATE VIEW my_link_clicks AS SELECT lc.* FROM link_clicks lc JOIN links l ON lc.link_id = l.id WHERE l.user_id = auth.uid().
10
11SQL function generate_short_code() RETURNS text:
12- Generates a random 6-char code from characters [a-z0-9]
13- Uses a loop with up to 3 retries if the code already exists in the links table
14- Returns the unique code
15
16SQL function increment_click_count(p_link_id uuid) RETURNS void:
17- UPDATE links SET click_count = click_count + 1 WHERE id = p_link_id
18
19Add index: CREATE INDEX idx_links_short_code ON links(short_code);
20Add index: CREATE INDEX idx_clicks_link_date ON link_clicks(link_id, clicked_at DESC);

1// supabase/functions/redirect/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
5serve(async (req: Request) => {
6  const url = new URL(req.url)
7  const code = url.searchParams.get('code') ?? url.pathname.split('/').pop()
8
9  if (!code) {
10    return new Response('Missing short code', { status: 400 })
11  }
12
13  const supabase = createClient(
14    Deno.env.get('SUPABASE_URL') ?? '',
15    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
16  )
17
18  const { data: link } = await supabase
19    .from('links')
20    .select('id, target_url, expires_at, is_active')
21    .eq('short_code', code)
22    .single()
23
24  if (!link || !link.is_active) {
25    return new Response('Link not found', { status: 404 })
26  }
27
28  if (link.expires_at && new Date(link.expires_at) < new Date()) {
29    return new Response('Link has expired', { status: 410 })
30  }
31
32  // Log click asynchronously — do not await
33  const referrer = req.headers.get('referer') ?? null
34  const country = req.headers.get('cf-ipcountry') ?? null
35  const ua = req.headers.get('user-agent')?.slice(0, 200) ?? null
36
37  Promise.all([
38    supabase.from('link_clicks').insert({
39      link_id: link.id,
40      clicked_at: new Date().toISOString(),
41      referrer,
42      country,
43      user_agent_hint: ua,
44    }),
45    supabase.rpc('increment_click_count', { p_link_id: link.id }),
46  ]).catch(() => { /* silently ignore analytics errors */ })
47
48  return new Response(null, {
49    status: 301,
50    headers: { Location: link.target_url },
51  })
52})

1Build the URL shortener dashboard at src/pages/Dashboard.tsx.
2
3Requirements:
4- Header with app name and a 'Create Link' Button
5- 'Create Link' opens a Dialog with a form (react-hook-form + zod):
6  - Target URL Input (required, must be a valid URL)
7  - Custom alias Input (optional, only alphanumeric/hyphens, 3-30 chars)
8  - Title Input (optional, for display in the dashboard)
9  - Expires at DatePicker (optional, using shadcn/ui Calendar in a Popover)
10  - On submit: if custom alias provided, check uniqueness in links table. Otherwise call generate_short_code() RPC. Insert the link row. Show a success Toast with the short URL.
11- Links DataTable with columns:
12  - Title / Target URL (two-line cell: title bold, target URL truncated in muted text)
13  - Short URL (monospace, with a Copy icon Button that copies to clipboard and shows a check icon for 1s)
14  - Clicks (number, right-aligned)
15  - Status Badge: 'Active' (green), 'Expired' (red), 'Expiring Soon' (yellow, within 7 days)
16  - Expiry (relative date or 'Never')
17  - Actions: View Stats (opens a Sheet), Toggle active (Switch), Delete (with AlertDialog confirmation)
18- Clicking 'View Stats' opens a Sheet from the right showing the click chart from step 4

1Build a LinkAnalytics component at src/components/LinkAnalytics.tsx.
2
3Props: linkId: string, shortCode: string
4
5Requirements:
6- On mount, fetch link_clicks WHERE link_id = linkId AND clicked_at >= 30 days ago from my_link_clicks view
7- Aggregate client-side into a clicks_by_day array: [{ date: '2024-01-15', clicks: 12 }, ...] for the last 30 days (fill missing days with 0)
8- Render a Recharts BarChart: XAxis shows date labels (show every 7th label to avoid clutter), YAxis shows click count, Bars are blue, Tooltip shows exact date and count
9- Below the chart, show total clicks in the period as a large stat
10- Country breakdown: group clicks by country code. Show top 5 countries as a list with country flag emoji, country code, click count, and a percentage progress bar. Show 'Unknown' for null country.
11- Recent clicks: last 10 clicks as a compact list showing time (relative), country, and referrer domain (extract from referrer URL)
12- Show Skeleton placeholders while loading