How to Build a Simple CMS with Lovable

1Create a headless CMS with Supabase. Set up these tables:
2
3- categories: id (uuid pk), name (text unique not null), slug (text unique not null), description (text), color (text, hex color for UI badges), post_count (int default 0), created_at
4- posts: id (uuid pk), title (text not null), slug (text unique not null), body (text, markdown), excerpt (text, max 300 chars), featured_image_url (text), author_id (uuid references auth.users), category_id (uuid references categories), status (text check in ('draft', 'published', 'archived'), default 'draft'), published_at (timestamptz, set when status becomes 'published'), meta_title (text), meta_description (text), created_at, updated_at
5
6RLS:
7- posts SELECT: allow anon and authenticated for status = 'published'
8- posts INSERT/UPDATE/DELETE: allow authenticated users only
9- categories SELECT: allow anon and authenticated
10- categories INSERT/UPDATE/DELETE: allow authenticated only
11
12Create a trigger on posts that auto-generates slug from title (lowercase, spaces to hyphens, remove special chars) if slug is empty on INSERT.
13Create a trigger that sets updated_at = now() on every UPDATE.
14Create a trigger that updates categories.post_count on post INSERT/UPDATE/DELETE.

1Build the CMS admin page at src/pages/Posts.tsx.
2
3Layout:
4- Page header with 'Content' title and a 'New Post' Button (primary)
5- Tabs component with three triggers: All, Draft, Published. Each tab filters the posts query by status.
6- Below tabs: a search Input that filters by title (client-side on fetched data)
7- DataTable (TanStack Table) with columns: Checkbox (bulk select), Title (clickable, opens editor), Category (Badge with category color), Status (Badge: draft=gray, published=green, archived=orange), Published At (date or '—'), Updated At (relative time), Actions (Edit Button + Delete AlertDialog trigger)
8
9Behavior:
10- Clicking a row title OR the Edit button opens a full-screen Sheet (not a Dialog — posts need space)
11- Sheet contains the post editor (covered in the next step)
12- Bulk select shows a floating action bar at the bottom: 'Publish X posts', 'Archive X posts', 'Delete X posts'
13- Delete uses an AlertDialog to confirm before calling supabase.from('posts').delete()
14
15Fetch posts with category name via join: supabase.from('posts').select('*, categories(name, color)')

1Build a PostEditor component at src/components/PostEditor.tsx. It receives a post object (or null for new) and an onSave callback.
2
3Form fields (react-hook-form + zod):
4- Title (Input, required, triggers slug preview below it)
5- Slug (Input, pre-filled from title, editable, validated unique format)
6- Category (Select populated from categories table)
7- Status (Select: Draft, Published, Archived)
8- Excerpt (Textarea, max 300 chars, show char count)
9- Body (Textarea with monospace font, full markdown, min 300px height)
10- Meta Title (Input, show char count, warn if >60)
11- Meta Description (Textarea, show char count, warn if >155)
12- Featured Image: a file input that accepts image/*, uploads to Supabase Storage bucket 'cms-images' at path posts/{postId}/{filename}. After upload, store the public URL in featured_image_url. Show a preview thumbnail if URL exists.
13
14On save:
15- If status changed to 'published' and published_at is null, set published_at = new Date().toISOString()
16- Upsert to posts table
17- Call onSave() to refresh the DataTable
18
19Add a 'Preview Markdown' toggle that switches the body Textarea to a rendered markdown preview div.

1Build a categories management page at src/pages/Categories.tsx.
2
3Layout:
4- Header with 'Categories' title and 'Add Category' Button
5- Grid of Cards, one per category
6- Each Card shows: category name (large), slug (small monospace), description, a colored Badge with post_count, Edit icon Button, Delete icon Button
7
8Add Category Dialog (react-hook-form + zod):
9- Name (Input, required)
10- Slug (Input, auto-filled from name, editable)
11- Description (Textarea)
12- Color (a row of preset color swatches the user clicks to select, stores hex string)
13
14Delete behavior:
15- If post_count > 0, show an AlertDialog warning: 'This category has X posts. Choose a replacement category before deleting.'
16- Show a Select to pick a replacement category
17- On confirm: UPDATE posts SET category_id = replacementId WHERE category_id = deletedId, then DELETE the category

1// supabase/functions/cms-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 supabase = createClient(
16    Deno.env.get('SUPABASE_URL') ?? '',
17    Deno.env.get('SUPABASE_ANON_KEY') ?? ''
18  )
19
20  const path = url.pathname.replace('/functions/v1/cms-api', '')
21
22  if (path === '/posts' || path === '/posts/') {
23    const category = url.searchParams.get('category')
24    const search = url.searchParams.get('q')
25    const page = parseInt(url.searchParams.get('page') ?? '1')
26    const limit = Math.min(parseInt(url.searchParams.get('limit') ?? '10'), 50)
27    const from = (page - 1) * limit
28
29    let query = supabase
30      .from('posts')
31      .select('id, title, slug, excerpt, featured_image_url, published_at, categories(name, slug)', { count: 'exact' })
32      .eq('status', 'published')
33      .order('published_at', { ascending: false })
34      .range(from, from + limit - 1)
35
36    if (category) query = query.eq('categories.slug', category)
37    if (search) query = query.textSearch('search_vector', search)
38
39    const { data, count, error } = await query
40    if (error) return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: cors })
41    return new Response(JSON.stringify({ data, meta: { page, limit, total: count } }), { headers: cors })
42  }
43
44  const slugMatch = path.match(/^\/posts\/([\w-]+)$/)
45  if (slugMatch) {
46    const { data, error } = await supabase
47      .from('posts')
48      .select('*, categories(name, slug, color)')
49      .eq('slug', slugMatch[1])
50      .eq('status', 'published')
51      .single()
52    if (error || !data) return new Response(JSON.stringify({ error: 'Not found' }), { status: 404, headers: cors })
53    return new Response(JSON.stringify({ data }), { headers: cors })
54  }
55
56  return new Response(JSON.stringify({ error: 'Not found' }), { status: 404, headers: cors })
57})