skip to content>_lesfer

Mar 18, 2025 · learning

Socially

A full-stack social platform clone with post feeds, likes/comments, follow graph, notifications, profile editing, and Clerk-authenticated user sync.

  • Next.js
  • TypeScript
  • Clerk
  • Prisma
  • PostgreSQL
  • Tailwind CSS
  • UploadThing
  • Radix UI
  • React Hot Toast
  • Docker
Repository

> details

I built this solo to practice end-to-end social product mechanics: auth synchronization, relational modeling, feed interactions, and notification workflows.

Highlights

  • Implemented Clerk authentication and session middleware, with server-side user synchronization into local Prisma user records.
  • Designed and implemented relational data model for users, posts, comments, likes, follows, and notifications.
  • Built create-post workflow with optional image uploads via UploadThing and immediate feed revalidation.
  • Implemented feed retrieval with author details, comment threads, like state, and aggregate interaction counts.
  • Added like/comment/follow actions with transactional notification creation for social activity signaling.
  • Implemented notifications inbox and mark-as-read behavior.
  • Built profile pages with follower/following counts, posts/liked tabs, and profile update support.
  • Added follow/unfollow flows plus recommendation-style "who to follow" surface based on current graph state.
  • Implemented responsive navigation surfaces for desktop/mobile usage.

Overview

Socially is a full-stack social app clone focused on core network mechanics: posting, engagement, following, and notifications.

I used it to implement the complete product loop rather than isolated UI screens.

Auth And Identity Sync

User auth is handled by Clerk, while application-level user data is persisted in Postgres through Prisma.

On first auth, users are synced into the local database so social relationships and content ownership remain under app control.

Social Graph And Content Model

The schema covers posts, comments, likes, follows, and notifications with proper relation constraints.

This supports common social actions while keeping query patterns manageable for feed and profile views.

Feed And Interaction UX

The home feed loads posts with nested author and engagement context. Users can create posts, attach images, like/unlike, and comment.

Actions trigger cache revalidation so content and counters stay fresh.

Notification Workflow

Likes, comments, and follows produce notification entries for affected users. A notifications page supports review and mark-as-read handling.

Profile Surface

Profiles include user metadata, follow controls, and content tabs (posts and liked posts). This gives each user a persistent social identity area.

Why This Project Matters

Socially demonstrates practical full-stack execution for social products: auth bridging, relational consistency, and action-driven UX updates across multiple surfaces.