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!
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)!
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.
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
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!
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
As a RUclips 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 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
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. 👍
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.
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 RUclips.
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.
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!!
The uploadthing in your video is version v6. v7 came out a while ago, and the upload speed became much faster. The problem is that when used in existing code, the image is not visible on the frontend. The file is uploaded to the server normally. Can you take a video of migrating to uploadthing v7? Now I have upgraded from v6 to v7 After about 18 hours, I was under a lot of stress because I didn't want to bring anything back.
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.. :]
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 😆
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?
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?
I got an issue with the editor section, its not responsive for me, gets wider then the actual screen and creates a horizontal scroll that i have to scroll to see the rest of the text but in your video it wasnt like that
am trying to call the action.tsx component or the server code in the client like you did but it bring out an error that i cant use server code in the client component
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.
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)
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?❤❤
Florian, my dude, It's been I think half decade. since I watched your videos. When did you start web development ? I thought you were a core Android guy.
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?
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?
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
Not sure what happened with crowdstrike today, but is going to be a day to remember, with possibly Florian's greatest ever tutorial release.
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.
😅
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 👍🏻
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!
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
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!
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
I love how excited and proud you sound when doing a walkthrough! GG, dude!
As a RUclips 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 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
Man honestly, you are the best. The way you detailed your work. I hope i will make a step forward after working on this
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 💚
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!
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.
I just finished 2 hours and 30 minutes! feels great to have completed 1% of the tutorial
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!
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
this is so good. thanks for uploading such a comprehensive project
Truly appreciate the effort you put into this app. Fantastic work.
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!
Nice work! Your work on the responsive layout was actually very very smart. A ton of work!
You bet 😆
Thanks to you bro I learned programming from you and worked
I'm really grateful ❤❤
I support you 💪
Wow. Dude, this is amazing. Best Next.js video out there. Thank you once again.
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 😅
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 👍🏻
Okay I've completed 7 hours, this is a really nice course
@@rootbindev also halfway through 👏
You've done a great job🎉❤. Those who developed social apps not better than us
Really waiting for this project thanks ❤️
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 RUclips.
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.
i rmb watching this guy's mern tut back in january last year and buying his next course
thank you 💚
What a 8-hour content, love your dedication
16 hours actually 😅 There are 2 parts
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 💚
Thanks god it’s Friday 🎉 Thanks, Flo!
Thank you Florian, Been so excited for this, I have just come to realise I must have turned into a nerd.
Awesome work man ❤ you gain my respect and subscribe 🙌 and please keep adding feature into this project like call , notification sound etc.
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
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.
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?
Love from India ⚡
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?
This is looking great!
This project is fantastic! Tks to share, i'm waiting the part 2...
Part 2 will be out tomorrow!
@@codinginflow Tks Man!
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.
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.
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?
Gonna save this for Form validation Thank you😇
please make a tutorial on a project of streaming platform like RUclips including every concept like video processing, hls, etc.
Yes , it is a good idea , Thank you a lot
Great work! Thank you for sharing 😊
This is a great project.
Your tutorials are great! Thank you!
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.
Fabulous Project 🚀
Great Work Sir 👍
All the support
Thank you for the detailed instructions
Hats off to you sir!
How can you share this masterpiece for FREE on youtube??...This is illegal 😂....Thanks so much sir ❤❤
Thank you very much Flow! you're the best ❤
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.
saving the timestamp 1:10:45 , to comeback again and continue
Great tutorial as always. thank you Flo.
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!!
The uploadthing in your video is version v6. v7 came out a while ago, and the upload speed became much faster.
The problem is that when used in existing code, the image is not visible on the frontend. The file is uploaded to the server normally.
Can you take a video of migrating to uploadthing v7? Now I have upgraded from v6 to v7 After about 18 hours, I was under a lot of stress because I didn't want to bring anything back.
Please make this type of long video with fullstack on nextjs with server actions
But this is full-stack next.js with server actions
Thank you so much for this can't wait for the next project
Almost ready 👍🏻
Here, you dropped this 👑
thank you 🤴
@@codinginflow any idea how to fix the next themes error?
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.. :]
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 😆
Was für ein wunderbares Tutorial ❤
Danke ❤️
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 .
Recently, I started studying Next.js. Will I be able to follow the project? Thank you for creating this content 😊
yes
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?
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?
I got an issue with the editor section, its not responsive for me, gets wider then the actual screen and creates a horizontal scroll that i have to scroll to see the rest of the text but in your video it wasnt like that
am trying to call the action.tsx component or the server code in the client like you did but it bring out an error that i cant use server code in the client component
Great work, thanks for sharing.
Broooooooooo, I'm just in the demo and I'm fucking excited right now❤
tutorial was very good and nice. but can we use lucia in next middleware
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.
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
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
Show my support for the valuable tutorial by subscribed your channel. ❤
You're great. Thanks, bro 👍
Hi, does using React Query Provider wrapper in rootlayout lose server side rendering feature? Thank you.
was waiting for this. thanks❤
I have heard passkeys may become the new thing, but saw with authjs, they are not ready for production, not sure what the case is with lucia?
Keep Going May Allah Bless You
Florian, my dude, It's been I think half decade. since I watched your videos. When did you start web development ? I thought you were a core Android guy.
Broo, perfect timing 🫵🫶
Your super man browwThanks po talaga
Too good to be free. You are amazing bro!
This is huge. Thank you so much ❤
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...
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?
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