Full-Stack Social Media App Tutorial with React 19 & Next.js 15 & MySql | React Next.js Full Course

[@jarencefeliciano]

Whaaat? 😮 Another free course that beats all paid online courses. This man is so powerful. He’s making these tutorials free and accessible for us. So generous! 🎉

[@mehmethanifierenler3612]

prizma ? i need free orm

[@ukcodes]

Like seriously! am just astonished

[@gamershadow4850]

​​@@ukcodes have you completed this Project

[@jarencefeliciano]

@@borisdimitrijevic-v6d Why?

[@jawadbughlani]

aby L

[@p.srelaxing4026]

I'm completely lamafied with you! A huge thanks for this wonderful tutorial and all your efforts kept into doing this!❤

[@abirdutta1357]

Did you hosted it anywhere?

[@naseemsaffy]

Please make one fully functional ecommerce app with nextjs 15 ,nodejs, nestjs, expressjs and mysql and cover all the features that every ecommerce project should have

[@vijaymohan23]

Check this channel

[@vijaymohan23]

Already posted in this channel

[@naseemsaffy]

That haven't created with that technologies

[@muzamilfootballer5682]

E-commerce without any CMS we need 😊

[@tas3_]

Lama at it again 🙌🏾 🎉

[@muhammadarslan2838]

Absolutely love your tutorials, Lama dev! Your clear explanations and hands-on approach make learning so enjoyable and effective. Keep up the amazing work!

[@candrarahmadan5068]

Bro? thanks for create this masterpiece video, you are my favorite next js youtuber all time

[@HauNguyen-gs5xb]

Around 3:51:54 timestamp of the video, What happens when User B follow user A? it become followings of user A that's not right? it should become follower insteand?. I quite dont get it

[@Shivam-gd2nd]

ya same doubt its not right, issue is there because of the opposite use of followerId & followingId it should be followerId as currentUserId & followingId should be userId in the acceptFollowRequest server action in lib/actions.ts when we are creating a entry in follower table. but after this we will have another issue that the sender of the request is not shown unfollow button rather the target user is shown unfollow button but it should be opposite.

[@TonyLe-q3c]

Thank you for everything you do for the community. You are very much appreciated. 😄😄

[@ApurvaKashyap-kj6qz]

clerk is not my cup of tea.. but thanks lama for this superb tutorial and please avoid clerk authentication in ur upcoming videos

[@jawyor-k3t]

why?

[@padamsubba1973]

Mine too

[@keyvanshabani6251]

@@jawyor-k3t you don't learn the auth logic and extremely costly and vendor lock in

[@markus_dev_cwb]

This is the best Project Man!!! Tks to share.

[@Kira-s8q3r]

As always Lama, another banger 🎉

[@hacistein]

Savaş başkan, yapıyorsun bu sporu 🧿💥

[@ifeomaokpara9345]

Thank you lama dev your tutorials they've been helpful.

[@kwizerasinapy5332]

Wow🎉 love it so much. Thank you @Lama Dev for the great job you did for us.

[@jeewakasupunprabodha2599]

I learn so much from you and thanks a lot.. Please do a playlist about React native and mobile app development

[@__shubhamtiwari]

Gajab ka tutorial hai bhai ekdam ❤

[@FunCodingwithRahul]

I'm new to Next.js, I have one query... Can we import server actions in client component ? like "addPost" in AddPost.tsx - 5:12:47 . I am using next.js 14 and getting the error... What am I missing ?

[@Aamironline125]

Very Nice, I am waiting for it for a long time. Thanks. You are the best.

[@a7medabdulshafi887]

Welcome back 🎉

[@EthioPodcaster]

This is the only thing we have been waiting for. repect!!!

[@JuniorJ-s1b]

great concepts and cool features for this tutorial, i really enjoyed, thanks for your effort. it will be very helpful to also see how to handle stuff from the sidebar like events or activities.

[@ourvideosite]

Thank you so much for this tutorial! Please make this in Expo React Native mobile app!!

[@xavierelon]

Can you provide a link to all the VSCode keyboard shortcuts you use? Like when you move stuff around? 47:30

[@mirazh8216]

Superb as always. I am gonna start next js for the first time using this project. Next time I(we) expect a real world saas like butmeacoffee

[@codeaccount4931]

Do dynamic routes work properly in production after doing these deployment steps? in other words, do we need to use express and install a custom server to run next js outside vercel?

[@fonyuyjudefomonyuy3980]

Finally, its🎉 here❤❤❤

[@3clipse911]

Thanks you so Much Lama , this course is Awesome 👍👍👍👍

[@nayemalifahim6701]

in next.js projects instead of the tailwind use something else for styling like styled component or any other method.

[@NikolaFilipovski94]

At 5:15:57 revalidatePath() shouldn't be in try/catch but outside try/catch, right? 🤔🤔

[@destocot1729]

revalidatePath can be in try/catch block but redirect shouldnt be unless you rethrow the error

[@KonoSenpai]

I can't Add Clerk User to Database. May you get this error like me ?

[@RavindraSingh-lp9pl]

Love u lama...superb tutorial

[@rishiraj2548]

Always ❤❤

[@TaigiTWeseDiplomat--Formosan]

Strange, why the login.png is not in my public folder? So I got a new one for myself and I also encountered the dependency issue while install clerk/js... I --force to install it then got into the problem that I can't find (clerk one) but I got working, and for now seems working but IDK... (Was going to use the Completed one to check the way to solve this problem, but after my git clone it seems nothing "completed" in it?

[@sandipsarkar1702]

We want part 2 : one to one and group chatting with all functionalities like send images files etc.

[@AvikNayak_]

It's just chat app that you want.

[@DevAbhi-ub5mx]

Only thing missing in this SM website is a dark mode and thats it, its perfect 👌

[@stavroskefaleas6320]

Awesome tutorial! Please make a tutorial for making an online community forum!

[@coinvest0]

The order in which the project is built is not correct. First you need to do the user authentification and settings, then the post and comment components etc.

[@abirdutta1357]

Did anyone completed it and hosted it in vercel or somewhere else? Is it working fine?

[@tohirasadov689]

I have issue with sign-in clerk not working SignedIn

[@NaeemRaza-z8m]

Thank you so mouch for this tutorial, i was really help me to grow my skills. ❤

[@mileslegend]

this is amazing i am planning to learn this with you

[@nasarullahkhan3379]

JWT issued at date claim (iat) is in the future. Issued at date: Fri, 05 Jul 2024 11:27:38 GMT; Current date: Fri, 05 Jul 2024 11:27:24 GMT; (reason=token-not-active-yet, token-carrier=cookie) Clerk: Clock skew detected. This usually means that your system clock is inaccurate. Clerk will attempt to account for the clock skew in development.

[@VinhNguyen-fw3rd]

Around 3:51:54 timestamp of the video, when accepting friend request, isn't we supposedly seeing 1 new follower instead of 1 new following? Following is for the owner of the profile is sending a friend request to another user and get accepted and becoming a follower of that user thus it should show 1 new following. So, are we doing this backward?

[@anurag_1212]

No you can just change the naming convention there

[@VinhNguyen-fw3rd]

@@anurag_1212 Well, I modified this now that each time user A friends user B, user B automatically friends user A - this means user A posts and comments are visible to user B and vice versa.

[@HauNguyen-gs5xb]

Ông fix đc chưa?

[@VinhNguyen-fw3rd]

@@HauNguyen-gs5xb This is what I got: export const switchFollow = async (userId: string) => { const { userId: currentUserId } = auth(); if (!currentUserId) throw new Error("User is not authenticated!"); try { const existingFollow = await prisma.follower.findFirst({ where: { followerId: userId, followingId: currentUserId, }, }); if (existingFollow) { await prisma.follower.delete({ where: { id: existingFollow.id, }, }); } else { const existingFollowRequest = await prisma.followRequest.findFirst({ where: { senderId: currentUserId, receiverId: userId, }, }); if (existingFollowRequest) { await prisma.followRequest.delete({ where: { id: existingFollowRequest.id, }, }); } else { await prisma.followRequest.create({ data: { senderId: currentUserId, receiverId: userId, }, }); } } } catch (err) { console.log(err); throw new Error("Something went wrong!"); } }; export const switchBlock = async (userId: string) => { const { userId: currentUserId } = auth(); if (!currentUserId) throw new Error("User is not authenticated!"); try { const existingBlock = await prisma.block.findFirst({ where: { blockerId: currentUserId, blockedId: userId, }, }); if (existingBlock) { await prisma.block.delete({ where: { id: existingBlock.id, }, }); } else { await prisma.block.create({ data: { blockerId: currentUserId, blockedId: userId, }, }); // Also remove any existing follow relationships when blocking a user await prisma.follower.deleteMany({ where: { OR: [ { followerId: currentUserId, followingId: userId }, { followerId: userId, followingId: currentUserId }, ], }, }); // Also remove any existing follow requests when blocking a user await prisma.followRequest.deleteMany({ where: { OR: [ { senderId: currentUserId, receiverId: userId }, { senderId: userId, receiverId: currentUserId }, ], }, }); } } catch (err) { console.log(err); throw new Error("Something went wrong!"); } }; export const acceptFollowRequest = async (userId: string) => { const { userId: currentUserId } = auth(); if (!currentUserId) throw new Error("User is not authenticated!"); try { const existingFollowRequest = await prisma.followRequest.findFirst({ where: { senderId: userId, receiverId: currentUserId, }, }); if (existingFollowRequest) { await prisma.followRequest.delete({ where: { id: existingFollowRequest.id, }, }); // Create follower records for both users to ensure mutual following await prisma.follower.createMany({ data: [ { followerId: currentUserId, followingId: userId }, { followerId: userId, followingId: currentUserId }, ], }); } } catch (err) { console.log(err); throw new Error("Something went wrong!"); } }; export const declineFollowRequest = async (userId: string) => { const { userId: currentUserId } = auth(); if (!currentUserId) throw new Error("User is not authenticated!"); try { const existingFollowRequest = await prisma.followRequest.findFirst({ where: { senderId: userId, receiverId: currentUserId, }, }); if (existingFollowRequest) { await prisma.followRequest.delete({ where: { id: existingFollowRequest.id, }, }); } } catch (err) { console.log(err); throw new Error("Something went wrong!"); } };

[@raedbaffoun5819]

thank you for your hard work , it is much much appreciated

[@renyuliu5650]

Hi, great job, just wondering why use Next.js here ? You created the same app by using react and node before. Is there an advantage ? Or just follow the trend ?

[@suvrajitmondal2325]

I hate clerk auth. This company just stopping beginners to learn unlderying concepts of authentication.

[@Gustavo-bi4hv]

And also extremely costly and vendor lock in.

[@Gustavo-bi4hv]

I believe most beginner runs for it because the AuthJS docs are the worst in the whole ecosystem.

[@nuttbaked]

They sponsor youtube tutorials hence all these videos use Clerk

[@Amankhan-cl1dq]

Well yes, clerk is not for beginners but you need to understand video tutorials like this are also not for beginners. It is for intermediate and advanced developers who have good understanding of core concepts like authentication, pagination, search and filtering, RESTful apis, CRUD operation etc. and they want to learn a tech stack which can help them in their day to day work. Nextjs + Prisma+ clerk + tailwind +shadcn etc is a tech stack and if you want to learn how you can leverage already existing frontend libraries, backed services then only you should watch videos like this.

[@Alosage.]

Clerk gets really expensive at scale too

[@yesimyourdad]

ayo bro clerk is having issues with react rc now, another issue happens when trying to POST with create in addPost file (using react18 & next 14) , prisma error : P5010

[@DE4DP00L-cs1ts]

Hey did you face createContext error when using clerk? how did you fix it?

[@CuongVu-yy4cg]

wonderful content. I love this channel so much

[@darawan_omar]

but in the useActionState hook we can use the pending instead of sperated the button and use the useFormStatus hook why you didn't do that

[@nestorfloresv]

Awesome tutorial!!

[@destocot1729]

I am not sure what the line following: prev.following && false, accomplishes won't this always be false?

[@ahmedamir7]

How to make the alp support multiple languages? In particular right-to-left written ones.

[@gbrachetta]

Thanks for this! Are you aware that the cover image reverts to the original one if you later update any other field apart from it?

[@mbnrh3574]

thank you Lama for such a good video

[@straightuprecordlabel3254]

testing in edge works fine with the CSS but somehow breaks in Chrome. Any solutions?

[@straightuprecordlabel3254]

in edge, for navbar, the separation between between search and 'stories' is good but in Chrome, there's no gap at all. Also, in edge, the margin left and right around navbar is good but in chrome the margin around is very large. how to solve?

[@straightuprecordlabel3254]

i can send pictures to your email if that helps. thank you

[@david_robel]

very good, but i like to know how to modify to upload images, video and files to my own API and not cloudinary, and how to display it correct.

[@DylanWeicker]

Do you have a list of all the Visual Studio Extensions you use?

[@afaqahmad8918]

leaving book mark 1:58:19 . will start from profile page

[@Vinex-ye1du]

please help me, UserButton is not rendering when user is logged in

[@eunjiromarbilla7297]

What is that tailwind auto suggestion extension called?

[@HalalSongsOnly]

can i upload it on a free and good website like vercel ?

[@naijavblog3800]

Thanks Lama 🎉

[@GautamSharma32223]

Hi Lama, could you please tell what theme are you using for vscode ?

[@mariadigne5346]

Hello Dev, please there's something I'm looking for (a website to manage clients' account like bank balance) where admin can only edit from backend dashboard? Please I'm begging sir

[@tannisthaneogy2955]

when I create a new user, the data is not added to the prisma database. I am stuck there. Can anyone help me?

[@proteus1]

Can you do a very quick upload on installing tailwind as I tried all vids on youtube and none work for me. I'll pay you if you can do remote work on my macbook.

[@afaqahmad8918]

2:03:01 frontend completed now the backend is going to start🙃🙃

[@satohnolan5270]

So If I don't have VPS, what should I do now?

[@afaqahmad8918]

@@satohnolan5270 I'm still confused.

[@UzbekUzbek-fl6dr]

Why doesn’t work “const {userId} = auth():” ?

[@benchesters]

Same problem, all went wrong with that. Cannot figure out how to proceed.

[@UzbekUzbek-fl6dr]

@@benchesters Yes, I tried other methods but they didn't work.

[@g_a_m_b_e_t_t_o_r8920]

use just const { userId } = await auth();

[@mikelantzelo]

You are awesome! Thanks!!!

[@DJ-AF-Adam]

Do you think you could make a video about adding a messaging other users feature to this social media app? Also, maybe a feature to call or video call other users on this social media app?

[@mustafakemalocel4052]

Can you please login/register without any framework? Ich hate clerk or other auth framework s

[@mahmouddiab3879]

I agree with you, I think you can do that easily by creating 2 components one for login and one for register and have the input fields as in Prisma scheme model User but in that case auth will be bit harder with sending otp probably could find somewhere on KZbin and combined both

[@alfaloverss3116]

where i can find all this things means server ip address name extra

[@oktayaltunkaya9019]

is it possible to use express and next.js same time for more complex apps?

[@ghjkkjhg8655]

when i write name domain have error in validate i can onot solve

[@tungnguyentuan2498]

Hi, about your snippets, I don't know to use it.

[@bayctr8708]

im newbie here and i dont understand why people in the comment hate clerk 😕

[@AvikNayak_]

Vender lock in , abstracts away authentication completely so not good for beginners

[@mixins_pixie]

Is there anyone who has tried hosting on vercel? I am stuck

[@hustler2693]

What is the theme you have used please share.. LAMA

[@Deus-lo-Vuilt]

Wow , nice project , Thanks

[@abhisheksah1867]

Sir u are best 🎉🎉🎉🎉🎉🎉🎉

[@dennisgonzales9521]

amazing content!

[@زكرياالراوي-ل1ص]

Use next-cloudinary in this project?

[@alimurtaza-cj2hd]

Hey bro there i am using cloudpanel but when i am trying to create a database it is showing the below mentioned error, i have tried many things but it is not helping me in resolving the error i tried to restart mysql but it stopped and not getting start again. Database Name: An exception occurred in the driver: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES)

[@solomonakpas]

I'm Grateful

[@code-with-damian]

Thanks mate so cool

[@TravelsInfo-k7r]

I always watch your videos.Please male a video about full functional travels booking website with latest version of next.js and others

[@nasarullahkhan3379]

Please use the next-auth instead of the clerk.

[@viniciusm.m.7822]

Thanks, Lama!!! 🎉❤ You are the best, bro! Abraço do Brasil!

[@vladimerfisher4442]

WOW!!! super!!! thanks!!!

[@Mercesletifer22]

hello @LamaDev. Can you make a video explaining how to share multiple sites on a domain via subdomains on a hostinger VPS server includes nginx settings.

[@francisnjugunaldc]

Awesome 👍

[@Dante-y3s8g]

Can you teach us how you make the starter branch?

[@emmanuelogunleye777]

Nice job here Lama Do you have the design files for this? I like to recreate this in another stack

[@HauNguyen-gs5xb]

Please do the event functionality for this social media look like making an event on Facebook

[@tokhirjonkhasanov1640]

Great 👍 Thank you

[@codernerd7076]

Clerk auth 😢

[@suvrajitmondal2325]

I hate clerk auth. This company just stopping beginners to learn unlderying concepts of authentication.

[@lexsemenenko]

@@suvrajitmondal2325 just curious what would you use instead for a production app? Clerk covers everything otherwise would be a complex project itself to develop to current standards

[@codernerd7076]

@@lexsemenenko local auth it's not that hard we have been doing it in Node.js for years, Clerk and others came after they brainwashed developers making them believe Auth is hard, mostly driven by Next.js KZbinrs Clerk is just some pointless service that will add unnecessary monthly costs to your production app!

[@SUNYBOI]

Can I deploy this project on render

[@HappyCodingBD-gr8qr]

wow great 😍

[@nishtha-k9g]

can i start making this project without buying any subscription? Will i be able to do it totally free setup with MySQL?

[@TaigiTWeseDiplomat--Formosan]

7:06 I gonna cry, make sure to run the code within the folder with package.json but not the parent folder... first problem solved.

[@vanphuoc.04]

Nice, i want a video about reactjs + spring boot (Java) + mysql