About This Video

Build a robust, production-ready full stack social media application using modern web technologies! In this 4-hour hands-on tutorial, Codesistency walks you through the process of building a social platform from scratch with Next.js (App Router), React, Prisma ORM, Clerk for authentication, Neon for PostgreSQL hosting, Tailwind CSS, Shadcn UI, and UploadThing for image uploads. Perfect for intermediate developers or those looking to become full stack engineers, the tutorial balances solid architectural principles with fast-paced, real-world coding.

You'll learn how to spin up your Next.js project, implement authentication (Google & email), design responsive dark/light mode UIs with Shadcn and Tailwind, set up a PostgreSQL database with Prisma models for users, posts, comments, likes, follows, and notifications, and build a powerful social app featuring post creation, likes, comments, notifications, profile editing, suggested follows, and image uploads. The course also covers best practices for Next.js 14/15 (App Router, Server/Client Components, Actions & Route Handlers), deploying your app to Vercel, and connecting it to live services for authentication and data.

Key Points

• Comprehensive Next.js 2025 Stack Setup: Project bootstrapping, configuration, and directory/layout structure using the App Router.
• Authentication & Authorization: Seamless integration of Clerk for signups/logins via Google or email—including user profile/account management and database sync best practices.
• Database Modeling and Integration: Defining relational models (Users, Posts, Comments, Likes, Follows, Notifications) with Prisma ORM and Neon PostgreSQL, including Schemas, indexes, constraints, and relations.
• UI/UX Building: Leveraging Shadcn UI & Tailwind CSS to create modern, responsive layouts, dark/light mode switching, dialog modals, and accessibility.
• Core Social Features: Implementing CRUD for posts, handling likes/comments, profile management, follow suggestions, notifications system, and real-time UI updates. 2:00
• File Uploads: Adding image sharing via UploadThing, including drag-and-drop preview and backend processing.
• Deployment: End-to-end deployment to Vercel, including environment configuration, Prisma client generation, GitHub integration, and live production checks.
• Project-Based Practicality: Real-world development flow—project structure, error handling, loading UI, best practice directory patterns, and plenty of code organization tips.

Resources Mentioned

• Source Code (GitHub)
• Next.js Documentation
• Prisma Documentation
• Clerk Authentication
• Neon PostgreSQL
• Shadcn UI
• UploadThing
• 100 Hours Udemy Course

Chapters

• 00:00:00 - Demo App & Overview
• 00:02:57 - Setup & Authentication
• 00:22:11 - Shadcn & Dark/Light Mode
• 00:29:38 - Building Navbar
• 00:44:46 - Postgres & Prisma Setup
• 01:19:46 - Auth & DB Sync
• 01:32:13 - Sidebar & Profile Data
• 01:44:19 - Creating Posts
• 02:04:40 - Suggested Users ("Who to Follow")
• 02:25:40 - Like, Comment, Delete Posts
• 03:03:19 - Recap & Special Next.js Files
• 03:16:00 - Notifications Page
• 03:31:56 - User Profile Page
• 04:02:40 - Image Uploads with UploadThing
• 04:15:02 - Deployment & Final Testing

Whether you're learning full stack React or want a guided, state-of-the-art project, this video is a must-watch for ambitious web developers!