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)

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Build a full-stack social media app using Next.js 15, featuring dark/light themes, custom authentication with Lucia, real-time form validation via React Hook Form, and data fetching and caching through React Query. The app includes features like infinite loading, optimistic updates, file uploads, responsive design, and a full-fledged communication system powered by Stream's chat SDK.

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