How to Build Social media feed with V0

1// Paste this prompt into V0's AI chat:
2// Create a Supabase schema for a social media feed:
3// 1. profiles table: id (uuid PK references auth.users), username (text UNIQUE), display_name (text), avatar_url (text), bio (text)
4// 2. posts table: id (uuid PK), author_id (uuid FK to profiles), content (text), image_url (text nullable), likes_count (int DEFAULT 0), comments_count (int DEFAULT 0), created_at (timestamptz)
5// 3. likes table: id (uuid PK), post_id (uuid FK), user_id (uuid FK), UNIQUE(post_id, user_id)
6// 4. comments table: id (uuid PK), post_id (uuid FK), author_id (uuid FK), content (text), created_at (timestamptz)
7// Add index on posts.created_at for cursor-based pagination.
8// RLS: authenticated users can create posts/likes/comments, public can read.
9// Enable Realtime replication on the posts table.
10// Seed 20 sample posts with varied timestamps.

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3
4const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function GET(req: NextRequest) {
10  const { searchParams } = new URL(req.url)
11  const cursor = searchParams.get('cursor')
12  const limit = 20
13
14  let query = supabase
15    .from('posts')
16    .select('*, profiles(username, display_name, avatar_url)')
17    .order('created_at', { ascending: false })
18    .limit(limit + 1)
19
20  if (cursor) {
21    query = query.lt('created_at', cursor)
22  }
23
24  const { data: posts, error } = await query
25
26  if (error) {
27    return NextResponse.json({ error: error.message }, { status: 500 })
28  }
29
30  const hasMore = (posts?.length ?? 0) > limit
31  const items = hasMore ? posts!.slice(0, limit) : posts!
32  const nextCursor = hasMore ? items[items.length - 1].created_at : null
33
34  return NextResponse.json({ posts: items, nextCursor })
35}

1'use client'
2
3import { useEffect, useState, useCallback, useOptimistic } from 'react'
4import { createClient } from '@/lib/supabase/client'
5import { Card, CardContent } from '@/components/ui/card'
6import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
7import { Button } from '@/components/ui/button'
8import { Skeleton } from '@/components/ui/skeleton'
9import { Separator } from '@/components/ui/separator'
10import { Heart } from 'lucide-react'
11import { toggleLike } from '@/app/actions/feed'
12
13type Post = {
14  id: string
15  content: string
16  image_url: string | null
17  likes_count: number
18  comments_count: number
19  created_at: string
20  profiles: { username: string; display_name: string; avatar_url: string }
21}
22
23export function FeedList({ initialPosts }: { initialPosts: Post[] }) {
24  const [posts, setPosts] = useState<Post[]>(initialPosts)
25  const [cursor, setCursor] = useState<string | null>(
26    initialPosts.length > 0 ? initialPosts[initialPosts.length - 1].created_at : null
27  )
28  const [loading, setLoading] = useState(false)
29  const supabase = createClient()
30
31  useEffect(() => {
32    const channel = supabase
33      .channel('feed')
34      .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'posts' }, (payload) => {
35        setPosts((prev) => [payload.new as Post, ...prev])
36      })
37      .subscribe()
38    return () => { supabase.removeChannel(channel) }
39  }, [supabase])
40
41  const loadMore = useCallback(async () => {
42    if (!cursor || loading) return
43    setLoading(true)
44    const res = await fetch(`/api/feed?cursor=${cursor}`)
45    const data = await res.json()
46    setPosts((prev) => [...prev, ...data.posts])
47    setCursor(data.nextCursor)
48    setLoading(false)
49  }, [cursor, loading])
50
51  return (
52    <div className="max-w-2xl mx-auto space-y-4">
53      {posts.map((post) => (
54        <Card key={post.id}>
55          <CardContent className="p-4">
56            <div className="flex items-center gap-3 mb-3">
57              <Avatar>
58                <AvatarImage src={post.profiles?.avatar_url} />
59                <AvatarFallback>{post.profiles?.display_name?.[0]}</AvatarFallback>
60              </Avatar>
61              <div>
62                <p className="font-semibold">{post.profiles?.display_name}</p>
63                <p className="text-sm text-muted-foreground">
64                  {new Date(post.created_at).toLocaleDateString()}
65                </p>
66              </div>
67            </div>
68            <p className="mb-3">{post.content}</p>
69            {post.image_url && (
70              <img src={post.image_url} alt="" className="rounded-lg mb-3 w-full" />
71            )}
72            <Separator className="my-3" />
73            <div className="flex gap-4">
74              <form action={toggleLike}>
75                <input type="hidden" name="postId" value={post.id} />
76                <Button variant="ghost" size="sm" type="submit">
77                  <Heart className="w-4 h-4 mr-1" /> {post.likes_count}
78                </Button>
79              </form>
80              <Button variant="ghost" size="sm">
81                {post.comments_count} comments
82              </Button>
83            </div>
84          </CardContent>
85        </Card>
86      ))}
87      {loading && <Skeleton className="h-40 w-full" />}
88      {cursor && (
89        <Button variant="outline" className="w-full" onClick={loadMore} disabled={loading}>
90          Load more
91        </Button>
92      )}
93    </div>
94  )
95}

1'use server'
2
3import { createClient } from '@/lib/supabase/server'
4import { revalidatePath } from 'next/cache'
5
6export async function createPost(formData: FormData) {
7  const supabase = await createClient()
8  const { data: { user } } = await supabase.auth.getUser()
9  if (!user) return { error: 'Not authenticated' }
10
11  const content = formData.get('content') as string
12  const imageUrl = formData.get('imageUrl') as string | null
13
14  const { error } = await supabase.from('posts').insert({
15    author_id: user.id,
16    content,
17    image_url: imageUrl || null,
18  })
19
20  if (error) return { error: error.message }
21  revalidatePath('/feed')
22  return { success: true }
23}
24
25export async function toggleLike(formData: FormData) {
26  const supabase = await createClient()
27  const { data: { user } } = await supabase.auth.getUser()
28  if (!user) return { error: 'Not authenticated' }
29
30  const postId = formData.get('postId') as string
31
32  const { data: existing } = await supabase
33    .from('likes')
34    .select('id')
35    .eq('post_id', postId)
36    .eq('user_id', user.id)
37    .maybeSingle()
38
39  if (existing) {
40    await supabase.from('likes').delete().eq('id', existing.id)
41    await supabase.rpc('decrement_likes', { p_post_id: postId })
42  } else {
43    await supabase.from('likes').insert({ post_id: postId, user_id: user.id })
44    await supabase.rpc('increment_likes', { p_post_id: postId })
45  }
46
47  revalidatePath('/feed')
48}
49
50export async function addComment(formData: FormData) {
51  const supabase = await createClient()
52  const { data: { user } } = await supabase.auth.getUser()
53  if (!user) return { error: 'Not authenticated' }
54
55  const postId = formData.get('postId') as string
56  const content = formData.get('content') as string
57
58  await supabase.from('comments').insert({
59    post_id: postId,
60    author_id: user.id,
61    content,
62  })
63
64  await supabase.rpc('increment_comments', { p_post_id: postId })
65  revalidatePath('/feed')
66}

1// Paste this prompt into V0's AI chat:
2// Build two components for a social media feed:
3// 1. A post composer component at the top of the feed with:
4//    - shadcn/ui Textarea for post content
5//    - Avatar of the current user next to the textarea
6//    - Image upload button (optional)
7//    - Post Button that calls createPost Server Action
8//    - Character count indicator
9// 2. A user profile page at app/profile/[username]/page.tsx with:
10//    - Server Component that fetches the user's profile and posts
11//    - Avatar, display_name, username, and bio at the top
12//    - Post count, likes received total
13//    - Their posts displayed in Card components identical to the feed
14//    - Use Tabs to switch between Posts and Liked posts
15// Use Supabase for data and shadcn/ui for all components.