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.
@@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
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!
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!
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.
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)!
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
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
As a UA-cam 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
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!
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.
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!
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. 👍
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
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."
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
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 UA-cam.
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?
Really nice tutorial! So with this approach you never fetch from the server and instead use react query to handle the cache and everything from the client, right?
Thank you, this is an awesome, video I like the way you built the "session provider" and "validateRequest". question: can this be done using Authjs. i looked at your authjs video and could not see it there.
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 😆
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?
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.
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.
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!!
Hi amazing tutorial. My question is you use cron jobs to delete not used images. Can you delete the images when you delete it on the server directly? Instead of creating cron jobs?❤❤
Hi, is there a particular reason why you decided to use API Routes instead of server actions? React query can take the server action function as the queryFn and it would allow you to collocate the action in the same directory as the component, following your pattern. Was it just a personal preference or do you think it does have a particular adventage?
@@codinginflow Yes I see most of the endpoints are for GET requests, I assume that's because next recommends using Server Actions for mutations only. Thank you
@@Luisllaboj19 Server actions are post endpoints. I tried using them for getting data but that was not a good idea because they run in succession and block navigation.
TBH, i love your effort, i love your content.. but the most hardest part in nextjs is sockets and this part is now third partied.. In the end, i understand your decisions but everything else you can already find on so many good nextjs channels.. I give a Like because to give out for free and how detailed it is.. But next time, just my thought dont skip the hard part with third party.. :]
Brother I have to submit it as a College project in Dec 2024, I have started it but Recently I came to know that Lucia auth is getting deprecated ???...Can I continue this project?
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?
Hi. I see you used React Query, I asked around the Next JS discord on how to use react query and they recommended me to just use server actions for the mutations instead. Is it much easier to implement Optimistic updates and infinite scrolling and refetching in react query?
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)
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.
What if I use yarn instead?
@@omega.developer yarn install --ignore-engines
if i want to use pnpm or bun ? and why we have problems with deps can you explain it please ?
@@wadoudazer6906 he did explain it, because we use early access packages. for pnpm or bun just google for the equivalent to --legay-peer-deps
@@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
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!
Thank you so much!
Wow, amazing
So generous ❤
thank you bro for that, i need those tutorials so much.
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!
I didn't believe i can see video with such a valuable content on youtube for free.
Thank you so much
Liking and commenting to show support!
Thank you Cody 😎
@@codinginflow 2 legends here! I follow them
@@codinginflow i have a fatal error while installing the srating code
please i need you help!!
@@BemnetSolomon-os9ep add --legacy-peer-deps
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.
😅
Not sure what happened with crowdstrike today, but is going to be a day to remember, with possibly Florian's greatest ever tutorial release.
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.
I'm so happy to hear that man!
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)!
You can do it 👍🏻
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
Lot of respect to this dude's hardwork and efforts
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
As a UA-cam 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
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!
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.
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!
Thank you man 💚
Man honestly, you are the best. The way you detailed your work. I hope i will make a step forward after working on this
I love how excited and proud you sound when doing a walkthrough! GG, dude!
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. 👍
Happy to hear that!
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
I just finished 2 hours and 30 minutes! feels great to have completed 1% of the tutorial
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.
Great stuff, specially the react query cache invalidation. I've never seen someone tackle that part in such depth.
Yea I always try to go the extra mile
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."
Thank you for the kind words!
I have learned several tutorial about nextjs on youtube. your course is the bestest of the bestest.
Thanks brother
@@codinginflow but it is to difficult about follower and followering, ,, I am completely confused.........=_=
Liking for showing why not to use invalidate queries love ur explaination ❤
Yup, those are important details!
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
Glad you liked it 👍🏻
You deserve at least a little something for all that work! I’ll be sure to check out more in the future.
Wow, you're crazy, thank you! Are you building a channel too?
@@codinginflow no not yet… it’s mostly used for client demos.
Nice work! Your work on the responsive layout was actually very very smart. A ton of work!
You bet 😆
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 UA-cam.
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.
Truly appreciate the effort you put into this app. Fantastic work.
Okay I've completed 7 hours, this is a really nice course
@@rootbindev also halfway through 👏
Thanks to you bro I learned programming from you and worked
I'm really grateful ❤❤
I support you 💪
Love from India ⚡
Wow. Dude, this is amazing. Best Next.js video out there. Thank you once again.
Really waiting for this project thanks ❤️
What a 8-hour content, love your dedication
16 hours actually 😅 There are 2 parts
this is so good. thanks for uploading such a comprehensive project
This is looking great!
Thanks god it’s Friday 🎉 Thanks, Flo!
You've done a great job🎉❤. Those who developed social apps not better than us
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 :)
@@sullyVids thank you! Now watch the whole thing!
@@codinginflow ofc
I really like the way you organise your projects and videos to make it easy to follow.
That's why I need months to prepare them 😅
i rmb watching this guy's mern tut back in january last year and buying his next course
thank you 💚
The most awaited video is here finally. 👑
Can we use pages router for instead of folder based app router ?
That would require a completely different structure
@@codinginflow alright, will try some other day.
Great tutorial video, with clear explanations on why you actually do stuff and an easy voice to listen too. Double 👍, subbed and liked.
thank you 💚
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?
Here, you dropped this 👑
thank you 🤴
@@codinginflow any idea how to fix the next themes error?
Really nice tutorial! So with this approach you never fetch from the server and instead use react query to handle the cache and everything from the client, right?
Hats off to you sir!
Was für ein wunderbares Tutorial ❤
Danke ❤️
Awesome work man ❤ you gain my respect and subscribe 🙌 and please keep adding feature into this project like call , notification sound etc.
Cant wait to start this one
Thank you, this is an awesome, video
I like the way you built the "session provider" and "validateRequest".
question: can this be done using Authjs. i looked at your authjs video and could not see it there.
We have both in my Next-auth video. But the provider is provided by Next-auth.
Gonna save this for Form validation Thank you😇
Your tutorials are great! Thank you!
Keep Going May Allah Bless You
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 😆
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?
Fabulous Project 🚀
Great Work Sir 👍
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.
Great tutorial as always. thank you Flo.
Happy to say you are my Mentor
saving the timestamp 1:10:45 , to comeback again and continue
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.
All the support
Thank you for the detailed instructions
Thank you Florian, Been so excited for this, I have just come to realise I must have turned into a nerd.
Broo, perfect timing 🫵🫶
This project is fantastic! Tks to share, i'm waiting the part 2...
Part 2 will be out tomorrow!
@@codinginflow Tks Man!
How can you share this masterpiece for FREE on youtube??...This is illegal 😂....Thanks so much sir ❤❤
please make a tutorial on a project of streaming platform like UA-cam including every concept like video processing, hls, etc.
Yes , it is a good idea , Thank you a lot
was waiting for this. thanks❤
Thank you so much for this can't wait for the next project
Almost ready 👍🏻
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.
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!!
Hi amazing tutorial. My question is you use cron jobs to delete not used images. Can you delete the images when you delete it on the server directly? Instead of creating cron jobs?❤❤
You can trigger the endpoint yourself without a cron job
Great work, thanks for sharing.
Bravo, bravo.
Hi, is there a particular reason why you decided to use API Routes instead of server actions? React query can take the server action function as the queryFn and it would allow you to collocate the action in the same directory as the component, following your pattern. Was it just a personal preference or do you think it does have a particular adventage?
I explain all of this in the tutorial
@@codinginflow Ok, I'll check it later with some time, thanks. Was kinda looking for a quick answer, I was curious going through the source code
@@Luisllaboj19 I use server actions in some places. But I colocated the post requests that also have a get endpoint.
@@codinginflow Yes I see most of the endpoints are for GET requests, I assume that's because next recommends using Server Actions for mutations only. Thank you
@@Luisllaboj19 Server actions are post endpoints. I tried using them for getting data but that was not a good idea because they run in succession and block navigation.
Your super man browwThanks po talaga
Thank you very much Flow! you're the best ❤
TBH, i love your effort, i love your content.. but the most hardest part in nextjs is sockets and this part is now third partied.. In the end, i understand your decisions but everything else you can already find on so many good nextjs channels.. I give a Like because to give out for free and how detailed it is.. But next time, just my thought dont skip the hard part with third party.. :]
Too good to be free. You are amazing bro!
hi Florian why are using ky is there any specific reason to avoid fetch we could have used axios which is the most poplur one .
This is huge. Thank you so much ❤
Brother I have to submit it as a College project in Dec 2024, I have started it but Recently I came to know that Lucia auth is getting deprecated ???...Can I continue this project?
Great work! Thank you for sharing 😊
This is a great project.
Recently, I started studying Next.js. Will I be able to follow the project? Thank you for creating this content 😊
yes
What a beast! 💪
Thank you for sharing. If you don't mind asking why using Luca? Sounds like more pain.
I want to use different technologies so people can see what they like most
@@codinginflow waiting for the second part bro
tutorial was very good and nice. but can we use lucia in next middleware
Wow well done 👍 you have done a great job ❤
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?
Found it, I forgot to return the value in the reviver of the json parse in kyInstance create...
Hi. I see you used React Query, I asked around the Next JS discord on how to use react query and they recommended me to just use server actions for the mutations instead. Is it much easier to implement Optimistic updates and infinite scrolling and refetching in react query?
Broooooooooo, I'm just in the demo and I'm fucking excited right now❤
u da man!!!!!
Thank you so much for this.
Please make this type of long video with fullstack on nextjs with server actions
But this is full-stack next.js with server actions
Awesome project ❤
Good work, thanks!!
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)
Yea I think you're right