Build A Full-Stack Social Media App With Next.js 15 - Part 2/2

Published: 21 July 2024
on channel: Coding in Flow

24,393

927

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

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

Create a free Stream account: https://getstream.io/chat/?utm_source...

Project files:
globals.css with Stream customization: https://github.com/codinginflow/nextj...
GoogleSignInButton.tsx: https://github.com/codinginflow/nextj...

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

⭐ 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 - User tooltip & react-linkify-it
30:26 - Update user profile & upload avatar (UploadThing, react-cropper, react-image-file-resizer)
1:42:48 - Post media uploads (image & video)
2:38:48 - Drag & drop and copy-paste uploads
2:46:07 - Cron job to delete orphaned uploads (Vercel cron)
2:57:52 - Post details page
3:14:58 - Likes feature (optimistic updates)
3:35:14 - Bookmarks feature
3:50:27 - Comments feature (with infinite loading)
4:49:02 - Notifications feature (Prisma transactions)
5:39:06 - Direct messages feature (Stream Chat)
7:20:36 - Google signin (OAuth2, Lucia)
7:48:20 - Search feature (+ rewrites)
8:01:51 - Deployment (Vercel, custom install command)