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/nextj...
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...

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/nextj...
Assets/images: https://github.com/codinginflow/nextj...
Favicon: https://github.com/codinginflow/nextj...

Full source code: https://github.com/codinginflow/nextj...

Part 2:    • Build A Full-Stack Social Media App W...  

⭐ 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/reactbes...
💌 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:   / codinginflow  
Instagram:   / codinginflow  
TikTok:   / codinginflow  
Facebook:   / 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)