Full-Stack Social Media Platform
A complete social network built from scratch — covering community feeds, groups, rich-content blogging, real-time chat with voice and video, a notification system, tiered membership, and a full content moderation admin panel.
What it is
A full-stack social media platform built from scratch — no off-the-shelf community plugins, no third-party social layer. The platform runs on Next.js with the App Router, TypeScript throughout, and PostgreSQL managed via Prisma ORM. It covers five core pillars: a community activity feed with post threading, topic-based groups with role-based access, long-form blogging with a rich content editor, multi-room real-time chat with voice and video, and a notification system that tracks activity across all surfaces. Every piece of user-generated content flows through an admin moderation layer before becoming publicly visible.
Technical Architecture
The frontend is a Next.js App Router application with strict TypeScript. Authentication is handled by NextAuth.js v5 using JWT sessions — the session object carries the user's ID, email, username, display name, avatar URL, site role, and membership tier, available server- and client-side. The database layer is PostgreSQL with Prisma ORM, spanning roughly 20 models. Real-time chat runs over Socket.io with messages persisted to the database; voice and video use LiveKit with token-based room auth issued by a dedicated API route. Styling is Tailwind CSS 4 with CSS custom properties for theming, and next-themes handles light/dark mode switching.
Engineering: Auth & Permission Layers
The permission model operates at two levels simultaneously. At the site level, users are either MEMBER or ADMIN. At the group level, each user has a separate role — ADMIN (group creator, full control), MOD (can delete posts, lock comments, kick members), or MEMBER — scoped to each group they belong to. Content visibility rules layer on top: unapproved content is hidden from all non-admins, Friends-only posts are gated to mutual friends, and Invite-Only Secret groups are invisible to non-members. Making all of this work cleanly through NextAuth.js JWT sessions required careful design of what data lives in the token versus what gets fetched per-request.
Engineering: Real-Time & Media Pipeline
The real-time layer combines Socket.io for text messaging and LiveKit for voice and video rooms. Both require the user's authenticated identity, which means bridging the NextAuth.js session into both systems without re-login. For LiveKit, this means issuing signed room tokens via a server-side API route. The media upload pipeline is separate: eight distinct upload endpoints handle different content types — post images, blog cover images, blog inline blocks, chat attachments, user avatars, user banners, and group assets — each storing metadata as JSON on the relevant database record. User avatar and banner uploads enter a pending approval queue rather than going live immediately.
Engineering: Content Moderation at Scale
Every surface where users can create content has a corresponding moderation path. Posts with image attachments are held pending admin review; text-only posts auto-approve for speed. Blog posts, testimonials, new groups, group posts, and group name/description edits all enter separate approval queues. The admin panel exposes ten distinct queues through a sticky sidebar, each with a confirmation modal before any approve or deny action executes. The report system lets members flag posts — admins can dismiss the report or delete the post, resolving all associated reports simultaneously. Building this required consistent patterns across very different content types without duplicating logic.
What it demonstrates & next steps
This project demonstrates the ability to design and ship a complete, multi-surface product — not isolated features, but a coherent system where auth, data modeling, real-time infrastructure, media pipelines, and moderation all work together under one product. It reflects full-stack depth: TypeScript across the stack, a 20-model Prisma schema, two real-time systems, and an admin layer covering every content type. Remaining active work includes: Stripe integration for membership payments, direct messaging, mobile-first layout refinements, database query profiling as content volume grows, and expanding admin analytics.