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 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!
As a TH-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 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
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. 👍
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
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 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 TH-cam.
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
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!!
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.
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.
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.. :]
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?
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)
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.
1 . I have a question is "unstable_cache" to give a "tag" and a "revalidate" in a defined time to a query that is not from a fetch or API, but from a direct SQL or Prisma query? because prisma does not allow you to configure the "revalidate" or give a "tag" to a query from a prisma. 2. What do you mean when you say "and make sure that the next user does not see the stale data of the previous user"? It is supposed to react query cache from the client side. all this in the same user that the client visits. since the cache is not on the server but on the client. 4:52:50
The reason why lucia is using this {user: User; session: Session} | {user: null; session: null} instead of using {user: User | null; session: Session | null}: 1. {user: User; session: Session} | {user: null; session: null} here either both will be null or both will have values. 2. {user: User | null; session: Session | null} here user can be null and session can have value and vice versa.
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?
@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, });
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
very nice! I would like to try to implement your project with MERN, making a completely separate backend, is it possible? I would not like to just copy blindly, but it seems a bit complicated since on nextjs this separation between backend and front end does not seem so expressed to me
That's definitely possible and sounds like a fun learning project. You'll probably need a different authentication library. In my paid Next.js course we used Passport.js: github.com/codinginflow/nextjs-express-typescript-course
In Navbar & SessionProvider section I have a problem with authentication, The validateRequest function returns null values although I've already signup, thus redirecting me to login page. I can only be logged in if i delete session and user rows from database. I copied everything and still not working properly. Amazing course by the way!!!!
@@codinginflow Issue resolved. It was indeed the cookies not set properly on login action, had two arguments as sessionCookie.value, can't stress enough how appreciative I'm of your help. Thanks a lot mate.
@@codinginflow It was indeed the cookies not set properly, on the login action I called the cookies set method with sessionCookie.value twice as an argument instead of the missing sessionCookie.attributes, your help is much appreciated mate!!!
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?
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?❤❤
![🎤 ไปกันต่อออ! จับฉลากร้องเพลง x P’ #XXSIVK [EP.2] (1/2) เพลงของใครจึ้งสุดน้าา 💓🎤 #MXFRUIT](http://i.ytimg.com/vi/mLI_K0sAS4o/mqdefault.jpg)
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.
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
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!
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 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!
Lot of respect to this dude's hardwork and efforts
As a TH-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 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 👍🏻
I love how excited and proud you sound when doing a walkthrough! GG, dude!
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
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 finished 2 hours and 30 minutes! feels great to have completed 1% of the tutorial
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
Thanks to you bro I learned programming from you and worked
I'm really grateful ❤❤
I support you 💪
this is so good. thanks for uploading such a comprehensive project
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.
Really waiting for this project thanks ❤️
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.........=_=
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 😆
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 TH-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.
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 👍🏻
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
Thanks god it’s Friday 🎉 Thanks, Flo!
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
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.
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 💚
This is looking great!
Thank you Florian, Been so excited for this, I have just come to realise I must have turned into a nerd.
please make a tutorial on a project of streaming platform like TH-cam including every concept like video processing, hls, etc.
Yes , it is a good idea , Thank you a lot
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 💚
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.
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
Awesome work man ❤ you gain my respect and subscribe 🙌 and please keep adding feature into this project like call , notification sound etc.
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!!
How can you share this masterpiece for FREE on youtube??...This is illegal 😂....Thanks so much sir ❤❤
Happy to say you are my Mentor
Gonna save this for Form validation Thank you😇
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.
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.
Thank you so much for this can't wait for the next project
Almost ready 👍🏻
All the support
Thank you for the detailed instructions
Please make this type of long video with fullstack on nextjs with server actions
But this is full-stack next.js with server actions
Cant wait to start this one
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.
This project is fantastic! Tks to share, i'm waiting the part 2...
Part 2 will be out tomorrow!
@@codinginflow Tks Man!
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.. :]
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?
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
Great work, thanks for sharing.
Fabulous Project 🚀
Great Work Sir 👍
Here, you dropped this 👑
thank you 🤴
@@codinginflow any idea how to fix the next themes error?
Great work! Thank you for sharing 😊
This is a great project.
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.
Great tutorial as always. thank you Flo.
Was für ein wunderbares Tutorial ❤
Danke ❤️
Broooooooooo, I'm just in the demo and I'm fucking excited right now❤
Your tutorials are great! Thank you!
Broo, perfect timing 🫵🫶
Hats off to you sir!
Thank you so much for this.
Too good to be free. You are amazing bro!
The followers query is beating my ass lmao. Thanks for the video
What do you struggle with?
Thank you very much Flow! you're the best ❤
thanks, thanks, thanks, really awesome content. could you add a part about multilanguage?
Quality code, thanks a lot.
You should use a little bigger font size. it gets difficult to follow along on one screen.
was waiting for this. thanks❤
Wow well done 👍 you have done a great job ❤
1 . I have a question is "unstable_cache" to give a "tag" and a "revalidate" in a defined time to a query that is not from a fetch or API, but from a direct SQL or Prisma query? because prisma does not allow you to configure the "revalidate" or give a "tag" to a query from a prisma. 2. What do you mean when you say "and make sure that the next user does not see the stale data of the previous user"? It is supposed to react query cache from the client side. all this in the same user that the client visits. since the cache is not on the server but on the client. 4:52:50
?? bro pls i need a answer
??
this is what we are watching
This is huge. Thank you so much ❤
tutorial was very good and nice. but can we use lucia in next middleware
First of all, Thanks a lot for this amazing tutorial.. this is simply perfect ..,How many parts will this series have? and is Stream free to use ??
2 parts, 16h total
Yes, Stream is free if your app makes less than 10k/month
The reason why lucia is using this {user: User; session: Session} | {user: null; session: null} instead of using {user: User | null; session: Session | null}:
1. {user: User; session: Session} | {user: null; session: null} here either both will be null or both will have values.
2. {user: User | null; session: Session | null} here user can be null and session can have value and vice versa.
Yea good point. I should've realized this 😆
@@codinginflow Great tutorial. Loved watching it ❤
The password hash thing means the resources to be used. 19... means use 19MB memory resources
Great🎉 you always turn up
Show my support for the valuable tutorial by subscribed your channel. ❤
You're great. Thanks, bro 👍
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?
@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,
});
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
Instead of always making a div with the same classes (bg-card p-5 shadow-sm rounded-2xl), why don't you just use the Card component from shadcn?
Because a Card looks slightly different
very nice! I would like to try to implement your project with MERN, making a completely separate backend, is it possible? I would not like to just copy blindly, but it seems a bit complicated since on nextjs this separation between backend and front end does not seem so expressed to me
That's definitely possible and sounds like a fun learning project. You'll probably need a different authentication library. In my paid Next.js course we used Passport.js: github.com/codinginflow/nextjs-express-typescript-course
Good work, thanks!!
In Navbar & SessionProvider section I have a problem with authentication, The validateRequest function returns null values although I've already signup, thus redirecting me to login page. I can only be logged in if i delete session and user rows from database. I copied everything and still not working properly. Amazing course by the way!!!!
Make sure the cookies are set correctly. Can you describe the flow a bit more clearly?
@@codinginflow Issue resolved. It was indeed the cookies not set properly on login action, had two arguments as sessionCookie.value, can't stress enough how appreciative I'm of your help. Thanks a lot mate.
@@codinginflow It was indeed the cookies not set properly, on the login action I called the cookies set method with sessionCookie.value twice as an argument instead of the missing sessionCookie.attributes, your help is much appreciated mate!!!
saving the timestamp 1:10:45 , to comeback again and continue
that is hard work dedication bro thanks
Bravo, bravo.
this is great project , thank you for ur effort♥♥
Glad you like it!
plz make a video about website responsiveness using tailwind
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?
Amazing, thank you sir!
My pleasure!
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
Hi, does using React Query Provider wrapper in rootlayout lose server side rendering feature? Thank you.