Build and Deploy: TWITTER clone with React, Tailwind, Next, Prisma, Mongo, NextAuth & Vercel (2023)

[@codewithantonio]

Some of you have requested a Patreon, so I made one: www.patreon.com/CodeWithAntonio If you get stuck on any part of the tutorial, feel free to pop the question in the Discord channel where I will gladly help you! discord.gg/SPEBvAz4Vd

[@uzairhaider1016]

I am using redux toolkit instead of zustand, as far as I know there should not be an issue. but still, will there be an issue if I do that?? the reason of using RTK is to prevent me from copying your code. for now I have successfully triggered modal(s) visibility.

[@code_028]

Znao sam da si nas brate, inace svaka ti cast na ovako lepom videu

[@codewithantonio]

@@code_028 hvala puno :) Pozdrav iz Rijeke

[@codewithantonio]

Want to get mentored by me? Apply at www.codewithantonio.com/mentorship If you are having problems with "Edit" / "Follow" functionality throwing "Not Signed In" error, It is because you have a newer version of Next & NextAuth, a small modification is needed (you can find it in the github repostory). Here are the steps: 1. Your [...nextauth].ts file should export authOptions separately 2. Your serverAuth.ts file should use getServerSession(req, res, authOptions) instead of getSession({req}) 3. Modify serverAuth(req) to serverAuth(req, res) everytwhere in your code. 4. Logout, shutdown the app, login again, everything should work ❤

[@GauravSharma-os6sb]

I just request you please put this in your description of this video as I spent 1 hour of debugging then I started looking into comments.

[@codewithantonio]

@@GauravSharma-os6sb Ah sorry man, will put in the description as well!

[@MasumHasanbd]

Hey Antonio, I even clone your git repo and run it in my local machine connecting my DB but still getting 'Not Signed In' issue. Do you have any idea about it?

[@Rhidayah]

Alright

[@kunal_g]

@@MasumHasanbd did u install all dependencies after cloning

[@Andrew-Tsegaye]

Wow, I must say that I am thoroughly impressed by your ambitious goal of reaching one million subscribers within the next two months! Your unwavering dedication and hard work are truly inspiring, and it is an honor to be a part of your journey. Your content is top-notch, and I believe that your unique approach and passion for what you do set you apart from others in the industry. Keep up the fantastic work, and I have no doubt that you will achieve your goal and much more!

[@codewithantonio]

Thank you a lot for the kind words Andrew!

[@guardian1243]

I found your channel a couple months ago, and your content has treated me well! Thanks for the amazing content!

[@codewithantonio]

Glad you enjoy it!

[@RochCode]

Hands down the best tutorial I seen on youtube so far. Well written code, no time-wasting details, short video, easy to indurstand. Thank you Antonio !

[@codewithantonio]

Thank you a lot for the nice comment!

[@chuckthedev]

Great great job. For those who are having db connection issue on production(500 internal server error when login), one possible reason is that Prisma Client is outdated because it wasn't autogenerated during the build process. In package.json, try to add "prisma generate" to the "build" script: { "scripts": { "build": "next build && prisma generate", // ... } }

[@no---on]

I wrote that and it is connected to database now but somehow it never logs in. Can you help me

[@yunhanhuang9304]

I think this is the most awesome twitter clone in youtube. You did a very very good jod.

[@codewithantonio]

Thank you a lot!

[@buhutimanakal]

I love these kinds of tutorials. Thank you for sharing your knowledge Antonio❤

[@codewithantonio]

Glad you liked it!

[@krismatic_]

The value that these kind of videos provide to the upcoming generation cannot be overstated. Thanks so much for making this content.

[@codewithantonio]

Thank you a lot, very happy to hear that!

[@marioperez6180]

Honestly keep it up because you cant imagine how this videos help us

[@codewithantonio]

Very happy to hear that!

[@shokhaway7219]

Antonio. My dear hero. Thnk u a lot you post this course for free. I'm really keen on watching your tutorials

[@codewithantonio]

You are very welcome!

[@bilegtsdf5776]

bro your tutorials are godly useful love it bby

[@codewithantonio]

Thank you a lot!

[@naouejikhalil1599]

Another amazing project ❤keep going

[@codewithantonio]

Thank you!

[@drago3393]

Great project! Learned a lot from building this. Thank you Antonio

[@codewithantonio]

Happy you like it, thank you for watching!

[@gameskyk]

Very very cool channel. I learn a lot with your video. Continue,you have all my support !

[@codewithantonio]

Thank you a lot! Glad you like the content!

[@ItsMeAru]

For those who had issues with the unfollow functionality, you need to change how the DELETE method is sent in the hook. It should be passed as a parameter like this: request = () => axios.delete('/api/follow', { params: { userId } }); In the API, it should be noted that when it's not a POST (follow) request, use req.query instead of req.body because Axios treats DELETE and POST differently. This results in: const userId = req.method === 'POST' ? req.body.userId : req.query.userId;

[@codewithantonio]

Thank you for this! Not sure what is the cause of it not working in newer versions, but I noticed that people have problems. Using query instead of body seems to work for most!

[@ItsMeAru]

​@@codewithantonio I also don't understand very well why it happens. What I have found is that this way of handling DELETE is by convention; it is possible that in the update they wanted to be more "correct," but I don't know, honestly.

[@matheusferreira5600]

Yo brother, I was just stuck on this very same part. It worked properly with these changes you sugested. Thanks a lot for the help.

[@matheusferreira5600]

Just a quick reminder for those having the same issue: this applies for both the unfollow and unlike functionalities. Where the delete methods are being called.

[@SamuelSxm]

Thank you man! Have been struggling for hours 😅

[@rifatalom5420]

Thank you very much for this great one, not only coding its help me also for english fluency. From today I became your fan and a student also. Please make an ecommerce full project also with admin area. Thanks again Sir!!

[@codewithantonio]

Very happy to hear that, thank you for your nice words!

[@НикитаКуликов-т1х]

Now u r the best for me and ive seen some

[@codewithantonio]

Happy to hear that :)

[@peymanj3456]

Thanks Antonio, went through the entire project, very valuable, I have one bug with followers but the rest looks good

[@codewithantonio]

Nice work!

[@codewithantonio]

you can jump into my discord and explain your followers problem, i think a couple of people have mentioned that in my #twitter-clone channel and fixed it.

[@swartex92]

Great submission of material! and you explain well

[@codewithantonio]

Thank you! Glad you liked it!

[@IT-34-VinitPatel]

thank you for this video of sharing your knowledge Antonio. I love these kinds of tutorials. Thank you ❤

[@codewithantonio]

Happy you like it! Thanks for watching!

[@4aka]

Hello from Kyiv, thank you for content man, now me and my friend trying to learn programming, sometimes we have difficulties, and i think it is normal for us, because we are beginners, wish you have a good day, more and more subscribers 😊

[@codewithantonio]

Glad to help, keep going!

[@Lautaro100ful]

Great content! Follower from Argentina!

[@codewithantonio]

Thank you a lot!

[@pankajjaiswal4808]

Wonderful Antonio! You Rock!! great tutorial 😀😀🙏

[@codewithantonio]

Glad you like it!!

[@TheJordanEffect]

we love antonio the best developper tutorials in the hole youtube simple clean code and such a skills master thank you for everything

[@codewithantonio]

Glad you like them!

[@Shasa.t]

I never used to use usememo and usecallback or understand their importance before, after completing this tutorial, I now instictively reach for usememo and usecallback when they are needed. Thank you for your efforts, helping me grow as a dev

[@atabeydemir1656]

I am super excited to watch how Thread developed

[@ekalrozhan3432]

Love stack u use. Very consistent. Please make indeed clone

[@codewithantonio]

Thank you for the suggestion!

[@mariale4969]

Yess an indeed clone would be great. Havent seen that before. Or a full stack instagram app

[@caotichcuc]

Honestly this is the video i was looking for

[@codewithantonio]

Glad you like it!

[@_kadirmetin]

Thanks for the amazing video Antonio ♥

[@codewithantonio]

Happy you like it!

[@anuj7286]

Thankyou for providing such a great content!

[@codewithantonio]

Thank you for the nice comment!

[@razibulhossen9680]

Another amazing project ❤️

[@codewithantonio]

Thank you!

[@yalukaiwo]

A great guide! Helped me figure out how to work with uploading images. Though, in my opinion, instead of typing "data" field in "PostItemProps" interface as "Record", for example, you could use "Post" type, provided by Prisma, (import type {Post} from '@prisma/client') from what I read it's a better practice for typing. P.S. that goes for all Prisma instances UPD: The method described above does not include related fields in its type. In this case, you can do: import {Prisma} from '@prisma/client' type Post = Prisma.PostGetPayload; (in this case, "user" and "comments" are related fields that you want to include. In "PostGetPayload" "Post" is your model name. This way your "Post" type will include all the fields and will be typed properly!

[@pulsechainalltheway1845]

Amazing, thank you for sharing your knowledge❤❤❤❤❤❤❤❤❤❤

[@Aliimran-zm1yy]

Great Work......

[@codewithantonio]

Thank you!

[@lucasdamasceno7068]

Top content Bro. 🙏

[@codewithantonio]

Thank you!

[@PFearr]

You create this amazing thing you deserve a lot more subs

[@fevziatanoglu4977]

Great video !!!!!!!!!!

[@codewithantonio]

Thank you!

[@PengJin-i8k]

Many thanks. 十分感谢。

[@codewithantonio]

Glad you like the video!

[@fulcrum8221]

Great job! Thanks for uploading it! In serverAuth is different the Github repository of the youtube video. In the repository it uses getServerSession and in youtube getSession. I didn't see in terminal the logged in user (although apparently I was) and this didn't let me edit the profile. I copied the serverAuth folder from the repository and it worked.

[@jpsingh1187]

it didnt work for me

[@giannifed]

Great Tutorial! Thank you

[@codewithantonio]

Glad you like it!

[@faszinationfliegen]

Great work! I'd love to see a full stack tutorial for e.g. a food delivery website or any website (like a stylist shop with an appointment system) with the additional administration backend, so for instance that the shop owner can modify the reservation, cancel, confirm etc. :) Keep up with the great work and effort. I'm sure you'll reach 100K subscribers within three months.

[@codewithantonio]

Thank you a lot for the nice words and great suggestions!

[@Abubakr-triedCoding]

@@codewithantonio Can you clone the Wikipedia?

[@isaiahsgametube2321]

leaned alot thank you

[@codewithantonio]

Thank you for watching!

[@diegoavendanohernandez9908]

you are the GOAT man tank you so much

[@codewithantonio]

Happy you like it!

[@rajumudavatgroup]

Amazing amazing job😊

[@tflixtuto64]

wow man this is awesome

[@codewithantonio]

Happy you like it!

[@tflixtuto64]

@@codewithantonio I love it and thanks for this free gift

[@weejohntee]

I am really enjoying these in depth tutorials. I have one question (so far) and it's most likely my inexperience talking but why do you wrap your onClose, onSubmit etc in useCallback?

[@princekhunt13579]

Great Great Job Amazing Amazing Job

[@codewithantonio]

😅 hahaha

[@princekhunt13579]

@@codewithantonio Hi I am 18 years old. I am mern stack dev. I want to connect with you. Please replay me.

[@agustinfodrini]

Hi Antonio, magnificent video I thoroughly enjoyed it. My only advice would be please zoom a little bit on the code, otherwise it is quite hard to see. Have a nice day and thanks for what you do.

[@codewithantonio]

Thank you a lot! I will make sure to have my code clearer in newer tutorials!

[@garikmelqonyan6011]

Excellent!

[@codewithantonio]

Glad you liked it!

[@techgyanwithmaan5980]

Hey, awesome video Amazing content Pls make a chat app with next js

[@codewithantonio]

Thanks for the idea!

[@techgyanwithmaan5980]

@@codewithantonio I am grateful to you

[@azikdinal2055]

legend's started from here

[@casparcheng3013]

Hi Antonio, thanks for the great tutorial you provided here totally free to learn, and amazing content with fully functional implemented, you're definitely the most patient coding youtuber here. May I make some suggestion as it's might be better to make vscode font larger to be better viewed, and "Alt+Z" to resize the code within the window. Million appreciate, taught me a lot after following each of your videos.😄

[@codewithantonio]

Thank you for the nice comment and a great tip!

[@davidhombe2313]

Great Job

[@codewithantonio]

Thank you!

[@prashlovessamosa]

Thank you for sharing knowledge for free thank you

[@codewithantonio]

Glad you like it!

[@codiescoderszone1518]

Amazing Amazing Job

[@baudys_dev]

amazing project.

[@codewithantonio]

Thank you!

[@diegofcn]

Thank you so much!

[@codewithantonio]

Glad you like it!

[@minty1752]

Awesome tutorials! Never subscribed to anyone quicker! Any chance to see something with a CMS like Strapi or an e-commerce fullstack with Stripe?

[@codewithantonio]

Thank you a lot! Yes, an Ecommerce or a SaaS with monthly subscription is in my calendar soon (Stripe)

[@january5626]

​@@codewithantonio waiting that from you😇

[@sakibalislam]

Musk wants to know your location! Ha ha, Just kidding, thanks for the outstanding tutorial man, much appreciated ❤️

[@codewithantonio]

🤣Thank you!

[@Matshiro]

I must say after an hour you sounded like you are either stressed or without focus (maybe overworked). Remember to take regular breaks from work :D

[@vonderklaas]

Thanks Antonio, very good tutorial indeed. One question, about usage of useCallback. I see you use it mostly everywhere, or there is a rule your are following? I am interested because useMemo & useCallback are still kinda confusing for me. If you could clarify usecases in few words I will appreciate that. Thanks!

[@eshw23]

A chat app with rooms would be amazing to add to this

[@codewithantonio]

Chat app is definitely coming soon!

[@codiescoderszone1518]

Great Great Job

[@anchitsinha8821]

Would be great if you could make a video on creating an ecommerce app using nextjs, typescript, tailwind css and stripe api

[@codewithantonio]

Thanks a lot for the suggestion, I will add it to the list!

[@raymondmichael4987]

😮😮 You did such a great job buddy, Congrats, how to use trpc into this? I like how organized your file structure is

[@codewithantonio]

Thank you, I am unsure how to add TRPC at this moment. But I will for sure make a fullstack clone using T3 stack in the future :)

[@kohelet910]

Thank you so much

[@codewithantonio]

You're most welcome!

[@wordbank101]

Thank you so much sir

[@AbouAnia]

This man will clone the fecking internet 😂😂. I’ll not be surprised if he can clone complexe apps like Yelp.

[@codewithantonio]

Thank you for the compliment!

[@williamplays0402]

Meta must have used this tutorial 😂

[@asadmehboob1300]

Wao nice

[@codewithantonio]

Thanks!

[@whizzie3367]

Wow, really blisfful, can you make a short on How we can add chat functionality?

[@codewithantonio]

Thank you, My next big tutorial will be a chat one, so if you want to you can combine the 2 :)

[@mydaily21]

Thanks for tutorial, can u make video only nextjs projects like consume API or other

[@GregCollins-ph1nu]

Hi Antonio, I really have enjoyed watching your tutorial videos with todays newest coding technology. Can you possibly do a tutorial video on like a Facebook clone because your coding is very clean? I’m looking for a good social media clone where I can share images, videos, comments, likes, etc across a community website that everyone I know is used to using. Keep up the great videos, I’m really enjoying watching them.

[@tugo.tmrbtr8410]

hi antonio, 1:41:23 this part get error which is 400 bad request error, how should i fix it.

[@4aka]

I met the same problem

[@nicolaichristensen6531]

hello, am nicolai, part of the stop mongodb movement, i am here to deliver message from my society of owls ples stop mongodb usage

[@SPN5]

hy mind if u teach us how to build a chatapp with sidebar and using tailwind too thnx

[@codewithantonio]

Hi, I will definitely do a tutorial on a chat app soon :)

[@wisjnujudho3152]

thx for the tutorial. Do you have any tutorial about hashtag ?

[@dub161]

Very impressive tutorial. Can you build also do one fullstack app using sockets? That will be great add on. Thanks.

[@codewithantonio]

Thank you! You mean like a real time chat app ? That is defnitely on my list :)

[@dub161]

@@codewithantonio really glad to hear that! Eagerly waiting for it :)))

[@sarser_ian]

Hey Antonio ..great work on this project ...what do you think is the tech stack WeChat (including APIs and SDKs) uses but more importantly....how do they make the app modular so that third party businesses can make modular mini-apps onto the WeChat platform?

[@codewithantonio]

Hi, thank you for your comment. I will have to explore your question a bit. It is interesting to think about. I assume they have a variety of microservices and SDKs that allow such integration. Perhaps something I could explore as a tutorial in the future!

[@murat6018]

H, Antionio, thanks for the content! Coul you make the fonts a bit bigger the next time? Cheers!

[@codewithantonio]

Glad you like it, Thank you for the feedback!

[@niteshprajapat7918]

awesome ❤❤ Will you do content in JS? I'm not familiar with TS.

[@codewithantonio]

Thank you! Of course, but I think you can follow along even with this being TS, as we are not complicating stuff too much

[@davyengone]

Just lean TS! You’ll thank me later

[@niteshprajapat7918]

@@davyengone okay will learn 😁

[@niteshprajapat7918]

@@codewithantonio okay! Thank you Sir 🔥

[@raymondmichael4987]

I've been there, Buddy learn TS you won't regret it, It's not as scary as it sounds 😊

[@sakariye.maxamed9090]

❤❤❤❤❤❤❤❤❤

[@over1498]

And welcome to Bluesky!

[@rohankhurana913]

At 3:00, I am getting this error in my system: class NextRequest extends Request { ^ ReferenceError: Request is not defined tried everything... uninstalling node, reinstalling it, used every version (16,18,20) still unable to resolve this issue

[@muhsinjonmullajonov9678]

Hey man, I even clone your git repo and run it in my local machine connecting my DB but still getting 'Not Signed In' issue. Do you have any idea about it?

[@maylens]

is you fix this trouble?

[@chences4808]

Thank you so much for your content, I really learn a lot from it. Would you consider to make project using Python with Postgres or GraphQL stack?

[@none4614]

Thanks for your video. But, I have a suggestion to upload the image that's using the Cloudinary instead of base 64. And, is it call the server side rendering project bro ?

[@codewithantonio]

Hey, thank you so much for the suggestion. I was looking for the simplest way of image upload so that we dont have to use third party apps, but I understand that there are better solutions available. I will take a look into Cloudinary

[@baybay1234]

Hi Antonio, I'm curious to learn the reason you prefer to set up a separate API file (current) to fetch the current logged in user instead of accessing the session directly via getServerSession at the Component level? is it because it saves multiple calls to the db or is it something else?

[@betsybustan8664]

Hello. My save button in the editModal does not work. Did any of you encounter the same problem?

[@pulsechainalltheway1845]

Same here and also the same issue with the add to favourite button in the Netflix clone tutorial

[@utkarshseth3082]

I am planning to follow this build, can you tell me what are you using for global state management ?

[@codewithantonio]

We are using SWR to both fetch and store results from the API, thus SWR is acting like our global store management. For modals we use zustand as global state management

[@utkarshseth3082]

@@codewithantonio That's great I also like zustand for global state management.

[@rohit_700]

Please make a full stack portfolio using nextjs and tailwind.

[@codewithantonio]

Its in my calendar! Thanks for suggestion!

[@hellolo3039]

Now it is X Corp. clone now.

[@prashlovessamosa]

Hey Antony i am struggling in Next Framework can you please make a tutorial on Next js if you have some time please do consider it. Thank you for sharing knowledge for free.

[@codewithantonio]

Hi, I think the best way to learn is through projects, but I will look into separate Next.js Tutorial as well!

[@prashlovessamosa]

@@codewithantonio thanks for considering will wait for NextJs.

[@ErmiaAmirabadi]

nice

[@codewithantonio]

Thank you!

[@ilb7475]

great video!!! but i wanna change about database, so if i wanna add 'title' in the 'Post' in schema file, what should i do ? i justt added 'title' and modified other files i think there is sth i missing .. ., pleas help me thankyou !

[@codewithantonio]

you need to run npx prisma generate and npx prisma db push for each schema change! Also make sure to restart your app as well

[@MadmanCZECH]

Hello. Why dont you use "use client" in for example EditModal 2:35:30? I dont understand it works with useState.

[@aaravmishra3487]

Becuase he isn't using app router!

[@Matty100]

Hey Antonio, I am having an issue with the followers. It doesn't show when I have a followers or let me Unfollow. Is this part of the issue you mentioned or is it a type o? I have no issues with the login. Could you tell me where I should look to fix this error? I re watched the section where you made the follow section and I can't find my error. It shows following but not followers? Thank you for the walk through it has been a lot of fun and great info!

[@peyerlee]

Thanks! 1:40:11

[@shasathuo1966]

I hav question, in the follow api when getting the followingId's shouldnt it be updatedFollowingIds = [...(currentUser?.followingIds || [])]

[@codewithantonio]

Yes, good catch!

[@Cameron-zm6ph]

Thank you for calling this out! Fixed my issue of only having one follower at a time.