How to Build a Blog Backend with Lovable

1Create a headless blog with Supabase. Set up these tables:
2
3- tags: id (uuid pk), name (text unique not null), slug (text unique not null), color (text, hex), created_at
4- posts: id (uuid pk), title (text not null), slug (text unique not null), body (text, markdown), excerpt (text), cover_image_url (text), author_id (uuid references auth.users), status (text check in ('draft', 'published'), default 'draft'), published_at (timestamptz), read_time_minutes (int), created_at, updated_at
5- post_tags: post_id (uuid references posts on delete cascade), tag_id (uuid references tags on delete cascade), PRIMARY KEY (post_id, tag_id)
6
7RLS:
8- posts: anon SELECT where status = 'published', authenticated SELECT all, authenticated INSERT/UPDATE/DELETE
9- tags: anon SELECT, authenticated INSERT/UPDATE/DELETE
10- post_tags: anon SELECT, authenticated INSERT/DELETE
11
12Create a trigger on posts BEFORE INSERT that:
131. Generates slug from title: lowercase, non-alphanumeric to hyphens, trim hyphens
142. If slug already exists, append -2, -3, etc. until unique
15
16Create a trigger BEFORE UPDATE that sets updated_at = now().
17
18Create a generated column: read_time_minutes GENERATED ALWAYS AS (greatest(1, round(array_length(regexp_split_to_array(trim(coalesce(body,'')), '\s+'), 1) / 200.0))) STORED.

1Build a PostEditor component at src/components/PostEditor.tsx used for both new posts and editing existing ones. Accept props: post (Post | null), onSave callback.
2
3Form fields (react-hook-form + zod):
4- Title (Input required — slug preview appears beneath it in small text)
5- Status (Select: Draft / Published)
6- Tags (multi-select using a Command popover with Checkboxes for each tag, showing selected tags as Badges below)
7- Excerpt (Textarea, max 250 chars, show char count)
8- Body (Textarea, monospace, minimum height 400px, placeholder: 'Write in markdown...')
9- Cover Image: file input (image/* only). On file select:
10  1. Upload to Supabase Storage bucket 'blog-images' at path posts/{post.id || 'new'}/{filename}
11  2. Get public URL
12  3. Store in cover_image_url field
13  4. Show a thumbnail preview
14
15On save:
16- If status changes to 'published' and published_at is null, set published_at = new Date().toISOString()
17- Upsert post
18- Delete existing post_tags for this post, then insert new ones
19- Show a toast: 'Post saved'
20
21Add a 'Preview' toggle that renders the body markdown in a div using a simple markdown parser.

1Build the main blog admin page at src/pages/Blog.tsx.
2
3Layout:
4- Page header 'Posts' with a 'New Post' Button that opens PostEditor in a Sheet
5- Tag filter row: a horizontal list of Badge buttons, one per tag plus an 'All' Badge. Clicking a tag filters the DataTable.
6- Search Input that filters by title client-side
7- DataTable (TanStack Table) with columns:
8  - Title (clickable text, opens editor Sheet)
9  - Tags (row of small Badges)
10  - Status (Badge: draft=gray, published=green)
11  - Read Time (e.g. '3 min read')
12  - Published At (date string or '—')
13  - Actions (Edit Button, Delete AlertDialog)
14
15Fetch with tags: supabase.from('posts').select('*, post_tags(tags(id, name, color))')
16
17Delete confirmation AlertDialog: 'Are you sure? This cannot be undone.' On confirm, delete the post (post_tags will cascade delete due to the FK constraint).

1// supabase/functions/blog-api/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 cors = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
8  'Content-Type': 'application/json',
9}
10
11serve(async (req: Request) => {
12  if (req.method === 'OPTIONS') return new Response('ok', { headers: cors })
13
14  const url = new URL(req.url)
15  const path = url.pathname.replace('/functions/v1/blog-api', '')
16  const supabase = createClient(
17    Deno.env.get('SUPABASE_URL') ?? '',
18    Deno.env.get('SUPABASE_ANON_KEY') ?? ''
19  )
20
21  if (path === '/posts' || path === '/posts/') {
22    const tag = url.searchParams.get('tag')
23    const q = url.searchParams.get('q')
24    const page = parseInt(url.searchParams.get('page') ?? '1')
25    const limit = Math.min(parseInt(url.searchParams.get('limit') ?? '10'), 50)
26    const from = (page - 1) * limit
27
28    let query = supabase
29      .from('posts')
30      .select('id, title, slug, excerpt, cover_image_url, published_at, read_time_minutes, post_tags(tags(name, slug, color))', { count: 'exact' })
31      .eq('status', 'published')
32      .order('published_at', { ascending: false })
33      .range(from, from + limit - 1)
34
35    if (tag) query = query.eq('post_tags.tags.slug', tag)
36    if (q) query = query.textSearch('search_vector', q)
37
38    const { data, count, error } = await query
39    if (error) return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: cors })
40    return new Response(JSON.stringify({ data, meta: { page, limit, total: count } }), { headers: cors })
41  }
42
43  const slugMatch = path.match(/^\/posts\/([\w-]+)$/)
44  if (slugMatch) {
45    const { data, error } = await supabase
46      .from('posts')
47      .select('*, post_tags(tags(*))')
48      .eq('slug', slugMatch[1])
49      .eq('status', 'published')
50      .single()
51    if (error || !data) return new Response(JSON.stringify({ error: 'Not found' }), { status: 404, headers: cors })
52    return new Response(JSON.stringify({ data }), { headers: cors })
53  }
54
55  if (path === '/tags') {
56    const { data, error } = await supabase.from('tags').select('*').order('name')
57    if (error) return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: cors })
58    return new Response(JSON.stringify({ data }), { headers: cors })
59  }
60
61  return new Response(JSON.stringify({ error: 'Not found' }), { status: 404, headers: cors })
62})