Social Media App

Full-stack social network with SSR, Server Actions, and cursor-based pagination.

Live Demo · GitHub · ~2,800 LOC

---

Stack

Features

• Server rendering with sub-2s page loads via Next.js 14 App Router and Server Components
• Server Actions for all mutations — type-safe, no API route boilerplate
• Authentication via Clerk with automatic user sync to PostgreSQL
• Prisma ORM on Neon serverless PostgreSQL — 6 models, cursor-based pagination, cascade deletes
• Optimistic UI for likes — instant feedback, rollback on network error
• @Mention system with autocomplete, clickable profile links, and notification creation
• Notification system for likes, comments, follows, and mentions with unread badge
• Image uploads to CDN via UploadThing (post images and profile pictures)
• Customizable profiles: name, bio, location, website, avatar
• Dark and light mode via next-themes, mobile-responsive with adaptive navigation

Quick Start

git clone https://github.com/Seb-fd/social-media-app.git
cd social-media-app
npm install
npx prisma db push && npm run dev

Requires environment variables for Clerk, Neon database URL, and UploadThing.

Architecture

All page data is fetched in Server Components with direct Prisma queries — no API hop. Mutations use Server Actions with revalidatePath for cache invalidation. The database schema (6 Prisma models: User, Post, Comment, Like, Follows, Notification) enforces referential integrity with cascade deletes and composite unique constraints on likes and follows. Notifications are created inline within action handlers and polled every 10 seconds via an unread badge component. The @mention system extracts @username patterns from content, resolves them to user IDs server-side, and creates mention notifications.