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

Features and technologies:
-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

IMPORTANT: To install the starting code dependencies, use "npm i --legacy-peer-deps" (without the quotation marks).

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:

Project files:

📣 Follow Coding in Flow on social media:

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)

[codinginflow]

IMPORTANT: When you clone the starting repo, use "npm i --legacy-peer-deps" as the install command (without quotation marks). Otherwise you'll get an error.

[ebratz]

Congrats on sharing this dense content for free on YT and sharing the github repo without any paywall ! This helps a ton people who can't afford to pay get access to such valuable content!

[WebDevCody]

Liking and commenting to show support!

[calvingarrix]

I’m currently unemployed, and it has been incredibly challenging to find tutorials on technologies I’m familiar with that aren’t paywalled.
I truly appreciate you for uploading this tutorial. Thank you, and God bless!

[paulvickers]

Not sure what happened with crowdstrike today, but is going to be a day to remember, with possibly Florian's greatest ever tutorial release.

[pavelcistjakov]

I love how excited and proud you sound when doing a walkthrough! GG, dude!

[sealone]

I can tell this took tremendous amount of work and thank you so much. Your way of teaching is very organized and very clear. I really hope to see more and preferably drizzle and maybe zsa but for free this is incredible!

[AjaySingh-jzqx]

Lot of respect to this dude's hardwork and efforts

[SamyIsaac-mdgo]

Truly appreciate the effort you put into this app. Fantastic work.

[henriquecasals]

Thats just unreal, i have follow your great content fo some time now, and you never disapoint, but this is another level of tutorial content, thank you very much

[dreamsachiever]

this is so good. thanks for uploading such a comprehensive project

[paulvickers]

Thank you Florian, Been so excited for this, I have just come to realise I must have turned into a nerd.

[MrX-iqjn]

Really waiting for this project thanks ❤️

[MiladKhanmohammadi]

Absolutely incredible tutorial! 🌟 The step-by-step guidance on creating a social network was clear, concise, and extremely helpful. I learned so much from this video. Thank you for sharing your expertise and making it so accessible! Looking forward to more tutorials from you. 👍

[codeddesign]

As a Youtube Coder and a Developer, this is what i am currently struggling with, combining React Query, React Hook Form and Shadcn ( Copy and Paste from Docs is not enough). Im looking forward to this skill and it will help me with the current project that i am working on. I thank God that I got notified because i have subscribed

[EmilAndLina]

Thanks god it’s Friday 🎉 Thanks, Flo!

[destocot]

Only half way through but I appreciate you saying you don't know how x and x works makes the tutorial feel more real and relatable.

[Helza]

Great tutorial video, with clear explanations on why you actually do stuff and an easy voice to listen too. Double 👍, subbed and liked.

[namesas]

Great tutorial as always. thank you Flo.

[dominik_]

Bro I only watched the introduction, but im downloading this immediately. FE is just passion not work for me, but I love tutorials that are thorough.