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

[@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.

[@omega.developer]

What if I use yarn instead?

[@rootbindev]

@@omega.developer yarn install --ignore-engines

[@wadoudazer6906]

if i want to use pnpm or bun ? and why we have problems with deps can you explain it please ?

[@rootbindev]

@@wadoudazer6906 he did explain it, because we use early access packages. for pnpm or bun just google for the equivalent to --legay-peer-deps

[@carlosterrazas8913]

@@wadoudazer6906 I work with pnpm in react projects. and I haven't had any problems. but with nextjs yes. and in full development I changed to npm due to lack of compatibility. I haven't tried bun, but well, it's in its infancy, it's very new. you should stick with npm until time does its job

[@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!

[@codinginflow]

Thank you so much!

[@JimohSegun]

Wow, amazing

[@adel.dev.account]

So generous ❤

[@younesLarfaoui-ru2cd]

thank you bro for that, i need those tutorials so much.

[@calvingarrix6582]

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!

[@WebDevCody]

Liking and commenting to show support!

[@codinginflow]

Thank you Cody 😎

[@markus_dev_cwb]

@@codinginflow 2 legends here! I follow them

[@codinginflow]

@@BemnetSolomon-os9ep add --legacy-peer-deps

[@LearnPayload]

You deserve at least a little something for all that work! I’ll be sure to check out more in the future.

[@codinginflow]

Wow, you're crazy, thank you! Are you building a channel too?

[@LearnPayload]

@@codinginflow no not yet… it’s mostly used for client demos.

[@paulvickers8059]

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

[@vic_octavian]

I didn't believe i can see video with such a valuable content on youtube for free. Thank you so much

[@destocot1729]

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.

[@codinginflow]

😅

[@aquib399]

Im currently learning Next.js, and i was desparate finding a video so that i could learn something, finally I have to say, this video has completely changed the way i used to code. I can't even explain how grateful thankful I am. learned so much, and even the things I thought I understood feel clearer now, specially the File management and React Query. The way you explained everything was incredible. worth every second. Thank you so much, brother! sharing this video to everyone in my contact list.

[@codinginflow]

I'm so happy to hear that man!

[@Sirioenelmic]

I haven't followed a tutorial for over a year, and so far I've been coding along for almost 2 hours and I don't regret it at all. Thank you very much for the content, you explain it very well (I hope to finish it)!

[@codinginflow]

You can do it 👍🏻

[@pavelcistjakov243]

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

[@szachgr43]

Dziękujemy.

[@codinginflow]

Thank you too 💚

[@AjaySingh-jz8qx]

Lot of respect to this dude's hardwork and efforts

[@TonyWilcock]

Thanks for this awesome tutorial! I'm at the 4:34 part and I cant see the hashtags in the trending topics section. I have no errors and even copied your code from your github page.

[@chethaz]

probably bc syntaxes might have been updated on newer package versions. try to use the starting code or copy the package.json from him

[@henriquecasals5533]

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

[@sealone777]

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!

[@Jaco_codeeza]

Thank you Florian. Im not done yet. 4hrs into the tutorial. Im coding along, but im also trying to destructor the web youve build so i can understand how everything fits together. Ive experienced alot of issues with other peoples tutorials. Sometimes it makes it hard to learn. But, your tutorial is fantastic. Im learning alot

[@sxrowi3660]

the way you explain the methodology for the code is awesome, vielen Dank. Tip, please collapse the 'Minimap' when recording, this gives additional width to see the code.

[@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. 👍

[@codinginflow]

Happy to hear that!

[@codeddesign]

As a KZbin 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

[@LearnPayload]

Nice work! Your work on the responsive layout was actually very very smart. A ton of work!

[@codinginflow]

You bet 😆

[@johnday2631]

As ALWAYS, an excellent video with expert advice and professional code. I’ve come to rely on your videos to confirm my own programming patterns. PLEASE continue the good work. EVERYONE, should follow this guy!

[@codinginflow]

Thank you man 💚

[@DeukamYann]

Man honestly, you are the best. The way you detailed your work. I hope i will make a step forward after working on this

[@yixie-hu2jm]

I have learned several tutorial about nextjs on youtube. your course is the bestest of the bestest.

[@codinginflow]

Thanks brother

[@yixie-hu2jm]

@@codinginflow but it is to difficult about follower and followering, ,, I am completely confused.........=_=

[@SamyIsaac-md8go]

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

[@dreamsachiever212]

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

[@MrX-iq5jn]

Really waiting for this project thanks ❤️

[@EmilAndLina]

Thanks god it’s Friday 🎉 Thanks, Flo!

[@kyawyanlinn4945]

I just subscribed and I am following this tutorial. I will be sure to come back and contribute from my salary once I land an entry level job. Thank you so much for this amazing tutorial

[@phil5293]

Wow. Dude, this is amazing. Best Next.js video out there. Thank you once again.

[@unclechuong0603]

What a 8-hour content, love your dedication

[@codinginflow]

16 hours actually 😅 There are 2 parts

[@Plaswin]

Great stuff, specially the react query cache invalidation. I've never seen someone tackle that part in such depth.

[@codinginflow]

Yea I always try to go the extra mile

[@the.uncharted_journey]

Liking for showing why not to use invalidate queries love ur explaination ❤

[@codinginflow]

Yup, those are important details!

[@spiralsage]

I really like the way you organise your projects and videos to make it easy to follow.

[@codinginflow]

That's why I need months to prepare them 😅

[@future2zero]

awesome tutorial Florian, do you think its possible to integrate payload cms in an addon video ?

[@codinginflow]

Thank you very much for the donation! This tutorial is finished but I'll consider payload cms for a future tutorial!

[@rootbindev]

I just finished 2 hours and 30 minutes! feels great to have completed 1% of the tutorial

[@Helza99]

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

[@codinginflow]

thank you 💚

[@AmrMagdyPRO]

Thanks to you bro I learned programming from you and worked I'm really grateful ❤❤ I support you 💪

[@kushagra4401]

Its really one of the best project video on yt I have came across, I love it focuses on best practices and advanced things which i want to follow, Thanks for this

[@codinginflow]

Glad you liked it 👍🏻

[@joeyAlibaba]

Thanks!

[@codinginflow]

Thank you brother

[@dominik_9619]

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.

[@NaifIT11]

You've done a great job🎉❤. Those who developed social apps not better than us

[@paulvickers8059]

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

[@michaelfrieze]

This is looking great!

[@Alalspsp]

Thank you for your hard work. I think it would have been the best project if the chat function wasn't third-party. However, it is definitely the best among all the videos posted on KZbin.

[@codinginflow]

Adding sponsors allows me to keep these videos free. Also, building a real-time chat from scratch would've added another 20h to this tutorial.

[@yashsolanki069]

The most awaited video is here finally. 👑 Can we use pages router for instead of folder based app router ?

[@codinginflow]

That would require a completely different structure

[@yashsolanki069]

@@codinginflow alright, will try some other day.

[@Lumiatti]

Love from India ⚡

[@nice-vf4rj]

Here, you dropped this 👑

[@codinginflow]

thank you 🤴

[@nice-vf4rj]

@@codinginflow any idea how to fix the next themes error?

[@sullyVids]

Bro, your tutorials are outstanding I took a quick look at the video and it’s very good and well organized. Congrats & Hope you the best :)

[@codinginflow]

@@sullyVids thank you! Now watch the whole thing!

[@sullyVids]

@@codinginflow ofc

[@tameramer1465]

Was für ein wunderbares Tutorial ❤

[@codinginflow]

Danke ❤️

[@Raghav_Bajpai_]

Fabulous Project 🚀 Great Work Sir 👍

[@rootbindev]

Okay I've completed 7 hours, this is a really nice course

[@codinginflow]

@@rootbindev also halfway through 👏

[@ustin91]

Your tutorials are great! Thank you!

[@MayankSharma-oi2yl]

Deeply respect you as a teacher and developer. Your coding videos are incredibly helpful and informative. They truly sparked my passion for game development using Unity (C#). When I wanted to learn Android development, your high-quality resources (both free and paid) were invaluable again. Your dedication and hard work are truly inspiring. You could have easily charged for this course, but you chose to make it free. Thank you for your generosity. "You truly made a positive impact on your students' lives. Thank you."

[@codinginflow]

Thank you for the kind words!

[@namesas]

Great tutorial as always. thank you Flo.

[@kozi-corner]

All the support Thank you for the detailed instructions

[@playlist-d3]

Awesome work man ❤ you gain my respect and subscribe 🙌 and please keep adding feature into this project like call , notification sound etc.

[@markus_dev_cwb]

This project is fantastic! Tks to share, i'm waiting the part 2...

[@codinginflow]

Part 2 will be out tomorrow!

[@markus_dev_cwb]

@@codinginflow Tks Man!

[@Ryuk19-n2t]

saving the timestamp 1:10:45 , to comeback again and continue

[@hiteshprajapati5856]

Great work! Thank you for sharing 😊 This is a great project.

[@Ironlionm4n]

Cant wait to start this one

[@kasunakalanka3666]

was waiting for this. thanks❤

[@AJPHIL-bt4me]

Gonna save this for Form validation Thank you😇

[@lycan2494]

i rmb watching this guy's mern tut back in january last year and buying his next course

[@codinginflow]

thank you 💚

[@maskedredstonerproz]

1:04:59 Due to how typescript works with the vertical bar for objects, I'm guessing that's because if they did { user: User | null, session: Session | null } it would permit any combination of real and null values, for example the user could be null, and the session could not be, or the opposite, not sure in what scenario that would happen but yeah, theoretically it would allow that, this is a way to get around allowing that, since in this case it is set as both have a value, or both are null (if anyone has any other reason that disproves | contradicts mine, go ahead, I'm mature enough to admit when I'm wrong, if I actually am)

[@codinginflow]

Yea I think you're right

[@oluwafemifaleye6845]

Wow well done 👍 you have done a great job ❤

[@Lumiatti]

Hats off to you sir!

[@hexvel]

Thank you very much Flow! you're the best ❤

[@adrianh.8723]

Thanks

[@codinginflow]

Thank you so much!

[@regrioz]

Thank you so much for this can't wait for the next project

[@codinginflow]

Almost ready 👍🏻

[@aabidjunani7]

Keep Going May Allah Bless You

[@codingjitsu]

Great work, thanks for sharing.

[@CodeWithMalinda]

This is huge. Thank you so much ❤

[@diegogarciaobando]

Too good to be free. You are amazing bro!

[@JeanBaptisteChabi]

Broooooooooo, I'm just in the demo and I'm fucking excited right now❤

[@Jjamirrke]

Happy to say you are my Mentor

[@Mr.Tom.handle]

Broo, perfect timing 🫵🫶

[@szachgr43]

Amazing tutorial mate

[@charlesokorobo508]

I am new to Web development, and I chose Svelte and SvelteKit as my Tech Stack. While your tutorials are in NextJS, I hope to follow it, and see how I can transpose the Next.JS Logic into a SvelteKit Logic, and be able to build my own version of this Social App with Svelte and SvelteKit. If you will however create a Svelte and SvelteKit version, I will appreciate so much. Thanks for this tutorial.

[@Miauwfy8bk]

at 2:42:35 you are using if(!session.user) my session does not contain user inside the session. It contains: id: string; expiresAt: Date; fresh: boolean; userId: UserId; I compared the relevant piece of codes and it seems like everything is the same but still there is no user inside session. Anyone encoutered same issue?

[@wisdomkids2024]

Your super man browwThanks po talaga

[@mnhtada12]

this is great project , thank you for ur effort♥♥

[@codinginflow]

Glad you like it!

[@ninoaarondacua5975]

Thank you so much for this.

[@tylerw4496]

2:50 lol I didn't get here yet and had to go diagnose the problem myself thinking I messed something up, turns out i was just following along too closely 😆

[@sadiiqsacidabdulahi2213]

that is hard work dedication bro thanks

[@shoaibshaikh3651]

please make a tutorial on a project of streaming platform like KZbin including every concept like video processing, hls, etc.

[@gamingwolf3385]

Yes , it is a good idea , Thank you a lot

[@itfab2]

Recently, I started studying Next.js. Will I be able to follow the project? Thank you for creating this content 😊

[@codinginflow]

yes

[@temitopedavid9508]

Great🎉 you always turn up

[@bilimlink]

Show my support for the valuable tutorial by subscribed your channel. ❤ You're great. Thanks, bro 👍

[@Okir09]

Amazing, thank you sir!

[@codinginflow]

My pleasure!

[@jeromesnail]

Hello, First of all, awsome tutorial, thank you so much! I have some issue around 4:57:00, ky is complaining about the url, and after some research it seems like ky is expecting an absolute url, but you're using a relative and it works for you... Any idea?

[@jeromesnail]

Found it, I forgot to return the value in the reviver of the json parse in kyInstance create...

[@niolopuag101]

Thank you for such an awesome video. Also wanted to ask if anyone had been having any issues with their assets folder not reading the images.

[@niolopuag101]

never mind i fixed it by added the image to the same file, removing the import and adding "src={require('@/app/(auth)/login/login-image.jpg')}" without the quotes. Great Video!!

[@Alalspsp]

While playing video 2:28:34, a hydration mismatch error occurs in my browser console window. Do I need to fix this error? Or should I just ignore it and proceed?

[@codinginflow]

What does the error say?

[@gdev12]

You just need to add "suppressHydrationWarning" in html tag like this. "".

[@Alalspsp]

@@codinginflow 4:34:50 // It's also in your video. console window. should I just ignore it and proceed?

[@RusselFury]

Lucia v3 will be deprecated and Lucia is now a learning resource on implementing auth from scratch. Is there any possibility that you will do a catch up how to use this new Lucia approach with Next and Prisma?

[@Alalspsp]

4:16 in video. Can't you make the post speed in the video a little faster? I want to make the response speed with the server faster so that the text I wrote appears on the screen as soon as I post it. I watched this video all the way through and even distributed it, but I'm having a hard time because of the delay in the post part. Any ideas would be great, so if anyone could give me some tips, that would be great. I paid for both Vercel and UploadThings servers, but I'm not satisfied with the speed.

[@codinginflow]

You can mutate the cache like we do for a delete operation

[@SepehrShapouri]

such an amazing tutorial, Im about 5 hours in and Im loving it, I have a few question however, first, what is the reason behind initializing queryClient in a context, aside from not generating multiple instances, I had seen that people usually do it like ` const client = new QueryClient() - {children},, and as for the second question, is it possible to call a server action directly inside of the useQuery queryFn? like queryFn:async()=>await getPosts, if it is possible, is making an endpoint better for this cause?

[@lucaserafini3579]

thanks, thanks, thanks, really awesome content. could you add a part about multilanguage?

[@tomich20]

Subscribing. This is amazing thanks

[@sahilthummar8237]

Please make this type of long video with fullstack on nextjs with server actions

[@codinginflow]

But this is full-stack next.js with server actions

[@sashaBejenari]

@codingflow At the minute 4:57:50 I did in this way(example below), because your example is fetched 4 times and I don't know if it is ok. I quess the second time is because of use strict usage. If someone know, please tell me. Also I installed axios to check how it works. THX for your videos.😇 queryKey: ["post-feed", "for-you"], // queryFn: async () => { // const response = // await axiosInstace.get("/api/posts/for-you"); // return response.data; // }, // queryFn: async () => { // const response = await kyInstance // .get("/api/posts/for-you") // .json(); // return response; // }, queryFn: kyInstance.get("/api/posts/for-you").json, });