Build a Social Dashboard

Create a social feed with posts, likes, and comments.

Step 1: Database Schema

Design Prisma schema

⏱️ 3-4 hours

🎬 Video Walkthrough

📝 Code

prisma

model Post {
  id        String   @id @default(cuid())
  content   String   @db.Text
  authorId  String
  author    User     @relation(fields: [authorId], references: [id])
  likes     Like[]
  comments  Comment[]
  createdAt DateTime @default(now())
}

💡 Hints (2 available)

Hint 1 (unlocks after 5min)

Model User, Post, Comment, Like

Hint 2 (unlocks after 10min)

Add relations between models

⚠️ Common Pitfalls:

Add indexes on foreign keys
Use @db.Text for long content
Define cascade deletes

Step 2: Authentication

Add NextAuth.js

⏱️ 4-5 hours

🎬 Video Walkthrough

📝 Code

typescript

export const authOptions = {
  providers: [GoogleProvider({
    clientId: process.env.GOOGLE_CLIENT_ID!,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET!
  })],
  adapter: PrismaAdapter(prisma)
}

💡 Hints (2 available)

Hint 1 (unlocks after 5min)

Install next-auth and adapter

Hint 2 (unlocks after 10min)

Configure OAuth providers

⚠️ Common Pitfalls:

Configure OAuth redirect URLs
Set up database adapter
Add session strategy

Step 3: Create Posts

Build post creation form

⏱️ 5-6 hours

🎬 Video Walkthrough

📝 Code

typescript

const post = await prisma.post.create({
  data: {
    content,
    authorId: session.user.id
  }
})

💡 Hints (2 available)

Hint 1 (unlocks after 5min)

Use Server Actions for mutations

Hint 2 (unlocks after 10min)

Add optimistic updates

⚠️ Common Pitfalls:

Validate content length
Check authentication
Sanitize user input

Step 4: Feed & Pagination

Display post feed with infinite scroll

⏱️ 4-5 hours

🎬 Video Walkthrough

📝 Code

typescript

const posts = await prisma.post.findMany({
  take: 10,
  skip: cursor,
  include: { author: true, _count: { select: { likes: true, comments: true } } },
  orderBy: { createdAt: "desc" }
})

💡 Hints (2 available)

Hint 1 (unlocks after 5min)

Use cursor-based pagination

Hint 2 (unlocks after 10min)

Include author and counts

⚠️ Common Pitfalls:

Use cursor-based pagination
Optimize queries with select
Add loading states

Step 5: Likes & Comments

Add interaction features

⏱️ 3-4 hours

🎬 Video Walkthrough

📝 Code

typescript

await prisma.like.create({
  data: { postId, userId }
})

💡 Hints (2 available)

Hint 1 (unlocks after 5min)

Use unique constraint for likes

Hint 2 (unlocks after 10min)

Implement optimistic updates

⚠️ Common Pitfalls:

Prevent duplicate likes
Handle optimistic updates
Update counts efficiently

Step 6: Real-time Updates

Add live updates with polling

⏱️ 3-4 hours

🎬 Video Walkthrough

📝 Code

typescript

const { data } = useSWR("/api/posts", fetcher, { refreshInterval: 3000 })

💡 Hints (1 available)

Hint 1 (unlocks after 5min)

Use SWR or React Query

⚠️ Common Pitfalls:

Balance refresh rate
Handle stale data
Add revalidation

Step 7: Deploy

Deploy to Vercel with Postgres

⏱️ 2-3 hours

🎬 Video Walkthrough

📝 Code

bash

vercel --prod

⚠️ Common Pitfalls:

Set DATABASE_URL
Run migrations
Configure OAuth

Study Timer

🎯 Focus

25:00

Stay focused!

Total Study Time

💡 Work: 25 min • Break: 5 min

⚙️ Technologies

Next.jsPrismaPostgreSQL