Overview
Connectly is a modern, Twitter/X-style social networking platform engineered with the latest robust web technologies. It offers a fully responsive UI with dynamic theming, authenticated user sessions via Clerk, persistent highly-relational data in PostgreSQL through Prisma, and seamless image uploads powered by UploadThing.
The application heavily leverages the Next.js App Router, React Server Components, and Server Actions to deliver a fully server-driven, lightning-fast architecture.
Server-First Architecture
Pages are rendered as React Server Components by default. Client components are scoped strictly to interactive UI elements (post composers, like buttons, theme toggles) keeping the bundle size minimal and time-to-interactive exceptionally fast.
Core Platform Features
Identity Management
- Clerk Integration — Bulletproof sign-up, sign-in, and session management middleware.
- Identity Syncing — Automatic synchronization of Clerk external identities and local PostgreSQL records on a user's first authenticated visit.
- Dynamic Profiles —
/profile/[username]routing providing personalized bios, locations, dynamic follower/following counts, and an edit-profile gateway.
Intelligent Alerts
- Dedicated Feed — A standalone
/notificationshub tracking all interactions involving the user. - Atomic Tracking — Automatic database triggers for
LIKE,COMMENT, andFOLLOWactions. - Optimized Retrieval — Indexed heavily by
(userId, createdAt)ensuring notification fetching does not bottleneck database performance as social networks scale continuously.
Technology Stack
Next.js 15 & React 19
Leveraging App Router, Turbopack, and Server Actions for a robust server-driven full-stack foundation.
Database & ORM
PostgreSQL structured beautifully by Prisma 6 and Prisma Accelerate for global connection pooling.
Authentication Flow
Clerk ecosystem (@clerk/nextjs) handling heavily integrated middleware
route protection easily.
UX & Styling
Tailwind CSS v4, shadcn/ui components, Radix UI primitives, and
next-themes dark mode utilities.
Server Action Methodology
Rather than relying heavily on traditional API routes, Connectly utilizes Next.js Server Actions to securely process mutations right from component structures.
Identity Synchronization syncUser() executes on primary rendering to
mirror the external Clerk identity (clerkId) completely into the
application's PostgreSQL database securely, maintaining native relational
bounds.
Session Resolution Every server action invokes securely the strict
getDbUserId() to seamlessly resolve the current user's database id from
the active Clerk session silently in the background workspace.
Transactional Executions Database mutations like toggleLike() are
executed atomically. Like row insertion and Notification record deployment occur completely simultaneously ensuring zero database-sync ghost records.
Aggressive Cache Invalidations Following successful server action
executions, revalidatePath() is invoked proactively, instructing Turbopack
architecture to dump cached copies of the UI and re-transmit fresh server
component data sequentially.
Relational Architecture Diagram
The foundational schema located within the core prisma/schema.prisma is optimized heavily for deep relational social network queries:
- User: Maintains unique handles linked natively to
clerkId. Serves as the primary master root relationship matrix for all interaction points. - Post: Relational bridging mapping back to an author utilizing
onDelete: Cascadeparameters to ensure pristine database states uniformly if an author deletes their global account. - Component Entities: Leverages composite unique keys
(userId, postId)efficiently to structurally prevent duplicated user engine likes bridging API fault discrepancies. - Followings: Employs a comprehensive self-relation model directly utilizing uniquely named relationship trees effectively.
Project Directory Ecosystem
Frequently Asked Questions
Connect and Share
Ready to start networking actively? Experience the platform firsthand by visiting the Live Application to see Next.js 15, Clerk, and Prisma in action together.
