Build A Full-Stack Social Media App With Next.js 15 (React Query, Lucia Auth, TypeScript, Tailwind)

Build and deploy a full-stack social media app like Twitter or Facebook with Next.js 15.

Features and technologies:
-Next.js 15
-Server actions and server components
-TanStack React Query
-Optimistic updates
-Infinite scrolling feeds
-File uploads with drag & drop and copy-paste support (UploadThing)
-Like system
-Follow system
-Comment system
-Notification system
-DM system (powered by Stream)
-Bookmarks
-Lucia authentication (username/password & Google OAuth2)
-Postgres DB with Prisma ORM
-Hashtags & mentions
-Full-text search
-Advanced caching & revalidation
-Mobile-responsive layout with Tailwind CSS & Shadcn UI components
-Dark theme, light theme, and system theme
-Real-time form validation with React Hook Form & Zod
-TipTap editor
-Deploy on Vercel & set up cron job
-IDE setup with Prettier & plugins

Starting code: https://github.com/codinginflow/nextjs-15-social-media-app/tree/0-Starting-point
IMPORTANT: To install the starting code dependencies, use “npm i –legacy-peer-deps” (without the quotation marks).

Create a free Stream account: https://getstream.io/chat/?utm_source=youtube&utm_medium=referral&utm_content=&utm_campaign=codinginflow

Dependencies install command:
npm i lucia @lucia-auth/adapter-prisma prisma @prisma/client @tanstack/react-query @tanstack/react-query-devtools @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder @tiptap/pm uploadthing @uploadthing/react arctic date-fns ky next-themes react-cropper react-image-file-resizer react-intersection-observer react-linkify-it stream-chat stream-chat-react –legacy-peer-deps

Dev dependencies install command:
npm i -D prettier eslint-config-prettier prettier-plugin-tailwindcss –legacy-peer-deps

Shadcn components add command:
npx –legacy-peer-deps shadcn-ui@latest add button dialog dropdown-menu form input label skeleton tabs textarea toast tooltip

Project files:
Shadcn custom theme (global.css): https://github.com/codinginflow/nextjs-15-social-media-app/blob/0-Starting-point/src/app/globals.css
Assets/images: https://github.com/codinginflow/nextjs-15-social-media-app/tree/0-Starting-point/src/assets
Favicon: https://github.com/codinginflow/nextjs-15-social-media-app/blob/0-Starting-point/src/app/favicon.ico

Full source code: https://github.com/codinginflow/nextjs-15-social-media-app

Part 2: https://www.youtube.com/watch?v=1nKETjqJluI

⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs
✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbestpractices
💌 Join my newsletter for regular web dev tips: https://codinginflow.com/newsletter
💬 Join our developer community on Discord: https://codinginflow.com/discord

📣 Follow Coding in Flow on social media:
Twitter: https://twitter.com/codinginflow
Instagram: https://instagram.com/codinginflow
TikTok: https://tiktok.com/@codinginflow
Facebook: https://facebook.com/codinginflow

Timestamps:
0:00 – Project overview
16:54 – Project & IDE setup (create-next-app, Shadcn UI, Prettier Tailwind plugin, Prisma, extensions)
40:52 – DB setup (Vercel Postgres + Prisma ORM)
46:02 – Lucia Auth setup (username, email, password login)
2:35:11 – Navbar, SessionProvider, user button
3:17:41 – Dark mode (next-themes)
3:24:00 – Responsive sticky sidebar/bottom bar
3:34:21 – Creating posts (TipTap editor)
3:52:06 – Loading posts server-side (server component)
4:08:42 – Trending topics sidebar (unstable_cache, Suspense)
4:35:25 – React Query introduction (useQuery, QueryClient, QueryClientProvider, ReactQueryDevTools)
4:52:59 – Ky setup
4:57:46 – useInfiniteQuery (infinite loading, cursor-based pagination, react-intersection-observer)
5:22:29 – React Query cache mutation (useMutation, setQueriesData vs invalidateQueries)
5:41:21 – Deleting posts
6:08:50 – Follow feature (React Query optimistic updates)
6:53:47 – Following feed (Shadcn UI customization)
7:01:21 – User profile page (generateMetadata, loading.tsx, not-found.tsx)