NEXT_POST — Modern Social Media Platform (Next.js + Prisma + Clerk)

NEXT_POST is a full-stack social media platform built with Next.js App Router, TypeScript, Prisma, PostgreSQL (Neon), Clerk Authentication, UploadThing, TailwindCSS, and Shadcn UI. Users can create posts, upload images, follow others, like/comment, and receive realtime notifications.

This project is designed with server components, server actions, API route handlers, and modern Next.js patterns — optimized for performance, revalidation, caching, and DX.

✨ Features 👤 User Features Secure authentication via Clerk Edit profile (name, bio, avatar, website, location) Dark/Light mode (using next-themes) Follow / Unfollow Users View follower & following lists

📝 Posts & Media Create posts with text + multiple images Upload images using UploadThing Like & Unlike posts Comment on posts View posts from people you follow (Home Feed)

🔔 Realtime Notifications Users receive realtime alerts when someone: follows them likes their post comments on their post (Notification system built with database listeners + live updates.)

🧩 Modern Next.js App Router Features loading.tsx, error.tsx, not-found.tsx Dynamic / Static routes Server Components + Client Components Route Handlers for API Server Actions with form handling Optimistic UI updates

🗄️ Database Layer (Prisma + Postgres) Using Neon PostgreSQL Prisma ORM with relational models: User Profile Post Media Comment Like Follow Notification

🎨 UI & Styling Shadcn UI (Radix UI + Tailwind) TailwindCSS lucide-react icons Mobile responsive & theme-aware styling

🛠️ Tech Stack Frontend Next.js 14 (App Router) React 18 TypeScript TailwindCSS Shadcn UI next-themes

Backend Next.js Route Handlers Server Actions Prisma ORM PostgreSQL (Neon DB)

Realtime notifications Auth & Uploads Clerk (Auth, User Management) UploadThing (File Uploads)

Utilities date-fns clsx / class-variance-authority react-hot-toast

📦 Dependencies @clerk/nextjs @prisma/client @uploadthing/react lucide-react next-themes react-hot-toast tailwind-merge tailwindcss-animate prisma dotenv

(Full list included in package.json)

🏗️ Project Setup 1️⃣ Clone the repository git clone https://github.com/Tajuddin80/Next_Post_Platform/ cd NEXT_POST

2️⃣ Install dependencies npm install

3️⃣ Set environment variables

Create .env file:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= CLERK_SECRET_KEY= DATABASE_URL= UPLOADTHING_TOKEN=

4️⃣ Push Prisma schema npx prisma db push

(Optional) open Prisma Studio: npx prisma studio

5️⃣ Run development server npm run dev

📁 Folder Structure (simplified) src/ ├── app/ │ ├── (auth)/ │ ├── posts/ │ ├── api/ │ ├── layout.tsx │ └── page.tsx ├── components/ ├── lib/ ├── hooks/ ├── styles/ └── prisma/ └── schema.prisma

🔔 Realtime Notification Flow

User performs action (follow / like / comment) Server action creates DB entry in Notification Realtime broadcaster notifies subscribed user UI updates instantly (toast + notification panel)

🚀 Deployment

You can deploy easily to: Vercel (recommended) Neon for Postgres Clerk Dashboard for auth config UploadThing for file uploads Just set the same .env variables in Vercel.

🙌 Contribution

Feel free to fork this repo and improve it! PRs are welcome.