How to Build a Social Media Feed with Lovable

1Create a social media feed schema in Supabase. Tables:
2
31. profiles: id (references auth.users), username (text unique), display_name (text), bio (text), avatar_url (text), follower_count (int default 0), following_count (int default 0), post_count (int default 0), created_at
4
52. posts: id, user_id (references auth.users), body (text, max 280 chars via CHECK), image_url (text nullable), like_count (int default 0), comment_count (int default 0), created_at
6
73. likes: id, post_id (references posts), user_id (references auth.users), created_at, UNIQUE(post_id, user_id)
8
94. comments: id, post_id (references posts), user_id (references auth.users), parent_id (references comments, nullable), body (text), created_at
10
115. follows: id, follower_id (references auth.users), followee_id (references auth.users), created_at, UNIQUE(follower_id, followee_id), CHECK(follower_id != followee_id)
12
13RLS:
14- profiles: public SELECT, own UPDATE
15- posts: public SELECT, own INSERT/UPDATE/DELETE
16- likes: public SELECT, authenticated INSERT/DELETE own rows
17- comments: public SELECT, authenticated INSERT, own DELETE
18- follows: public SELECT, own INSERT/DELETE
19
20Indexes:
21- posts(user_id, created_at DESC)
22- follows(follower_id, followee_id)
23- likes(post_id, user_id)
24- comments(post_id, parent_id, created_at)
25
26Triggers:
27- After INSERT on likes: UPDATE posts SET like_count = like_count + 1
28- After DELETE on likes: UPDATE posts SET like_count = like_count - 1
29- After INSERT on comments: UPDATE posts SET comment_count = comment_count + 1
30- After INSERT on follows: UPDATE profiles SET follower_count = follower_count + 1 WHERE id = followee_id; UPDATE profiles SET following_count = following_count + 1 WHERE id = follower_id
31- After DELETE on follows: decrement both counts

1// src/hooks/useFeed.ts
2import { useCallback, useEffect, useRef, useState } from 'react'
3import { supabase } from '@/lib/supabase'
4import { useAuth } from '@/hooks/useAuth'
5
6type Post = {
7  id: string
8  user_id: string
9  body: string
10  image_url: string | null
11  like_count: number
12  comment_count: number
13  created_at: string
14  author: { username: string; display_name: string; avatar_url: string | null }
15  viewer_has_liked?: boolean
16}
17
18const PAGE_SIZE = 10
19
20export function useFeed() {
21  const { user } = useAuth()
22  const [posts, setPosts] = useState<Post[]>([])
23  const [loading, setLoading] = useState(false)
24  const [hasMore, setHasMore] = useState(true)
25  const [newPostCount, setNewPostCount] = useState(0)
26  const cursor = useRef<string | undefined>()
27  const bottomRef = useRef<HTMLDivElement>(null)
28
29  const fetchPage = useCallback(async (after?: string) => {
30    if (!user?.id || loading) return
31    setLoading(true)
32    const { data } = await supabase.rpc('get_feed', {
33      p_user_id: user.id,
34      p_cursor: after ?? new Date().toISOString(),
35      p_limit: PAGE_SIZE,
36    })
37    const rows = (data ?? []) as Post[]
38    if (after) {
39      setPosts((prev) => [...prev, ...rows])
40    } else {
41      setPosts(rows)
42    }
43    cursor.current = rows[rows.length - 1]?.created_at
44    setHasMore(rows.length === PAGE_SIZE)
45    setLoading(false)
46  }, [user?.id, loading])
47
48  useEffect(() => { fetchPage() }, [user?.id])
49
50  // Infinite scroll via Intersection Observer
51  useEffect(() => {
52    if (!bottomRef.current) return
53    const observer = new IntersectionObserver(
54      (entries) => { if (entries[0].isIntersecting && hasMore && !loading) fetchPage(cursor.current) },
55      { threshold: 0.1 }
56    )
57    observer.observe(bottomRef.current)
58    return () => observer.disconnect()
59  }, [hasMore, loading, fetchPage])
60
61  // Realtime new posts
62  useEffect(() => {
63    if (!user?.id) return
64    const channel = supabase
65      .channel(`feed:${user.id}`)
66      .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'posts' }, () => {
67        setNewPostCount((n) => n + 1)
68      })
69      .subscribe()
70    return () => { supabase.removeChannel(channel) }
71  }, [user?.id])
72
73  const loadNewPosts = async () => {
74    setNewPostCount(0)
75    await fetchPage()
76  }
77
78  return { posts, loading, hasMore, newPostCount, loadNewPosts, bottomRef }
79}

1Build a PostCard component at src/components/PostCard.tsx.
2
3Requirements:
4- Card layout with: Avatar + display_name + username + relative timestamp in the header
5- Post body text (break-words, whitespace-pre-wrap to respect line breaks)
6- If image_url exists: a full-width rounded image below the body (max-h-96 object-cover)
7- Action row at the bottom:
8  - Heart Button: filled red if viewer_has_liked, outline if not. Shows like_count. On click: optimistically toggle liked state and increment/decrement count, then call the Supabase INSERT or DELETE on likes.
9  - Comment Button: shows comment_count, clicking expands a CommentSection below the card
10  - Share Button: copies the post URL to clipboard and shows a brief 'Copied!' Toast
11- CommentSection (collapsible):
12  - Show last 3 comments with avatar, username, body
13  - 'View all N comments' link if comment_count > 3
14  - Comment input at the bottom: Textarea + Submit Button
15  - On comment submit: INSERT into comments, update local comment_count optimistically
16- PostCard takes a single post prop of type Post plus an onLikeToggle callback
17- Use React.memo to prevent re-renders when unrelated posts in the list update

1Build a ComposePost component at src/components/ComposePost.tsx.
2
3Requirements:
4- Card with the user's Avatar, a Textarea (placeholder: 'What's on your mind?'), and a footer row
5- Character counter: shows '280' counting down. Text turns amber at 50 remaining, red at 20 remaining. Disable submit when 0.
6- Image button: file input (accept='image/*') hidden, triggered by a camera icon Button. Shows thumbnail preview with an 'x' remove button.
7- Submit Button: disabled when body is empty or uploading. Shows a spinner during submission.
8- On submit:
9  1. If image selected: upload to Supabase Storage at path: posts/{userId}/{Date.now()}.{ext}. Get public URL.
10  2. INSERT into posts: { user_id, body, image_url }
11  3. On success: clear the form, optimistically prepend the new post to the feed list
12  4. On error: show a Toast with the error message
13- Use react-hook-form + zod for validation: body min 1 char, max 280 chars
14- After insert: call supabase.from('profiles').update({ post_count: increment }) — or handle this via a Postgres trigger

1Build user profile pages at src/pages/Profile.tsx.
2
3Requirements:
4- Fetch profile by username from URL param: /profile/:username
5- Profile header:
6  - Large Avatar (96px)
7  - Display name and @username
8  - Bio text
9  - Stats row: '{post_count} Posts', '{follower_count} Followers', '{following_count} Following' — each clickable opening a Sheet with the user list
10  - Follow/Unfollow Button: show 'Follow' if not following, 'Following' (with hover 'Unfollow') if following. On click: INSERT or DELETE from follows.
11  - If viewing own profile: replace Follow button with 'Edit Profile' Button opening a Dialog
12- Posts grid below the header: a grid of post cards filtered to this profile's posts, ordered by created_at DESC
13- Edit Profile Dialog: form for display_name, bio, and avatar upload. On save: UPDATE profiles.
14- useFollowStatus hook: checks if auth.uid() follows this profile_id via supabase.from('follows').select().eq('follower_id', userId).eq('followee_id', profileId).maybeSingle()
15- Optimistic follow toggle: flip local state on click, then fire the Supabase call in the background