Build and Deploy: TWITTER clone with React, Tailwind, Next, Prisma, Mongo, NextAuth & Vercel (2023)
HTML-код
- Опубликовано: 7 июн 2024
- Discord for any problems/errors/bugs: www.codewithantonio.com/discord
Github & Live Website: www.codewithantonio.com/proje...
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 ❤
In this tutorial, we'll be building a Twitter clone with React, Tailwind CSS, Next.JS, Prisma and MongoDB. We'll also be deploying it to Vercel!
This is a great video for anyone who wants to learn how to build a fullstack web application from scratch.
We are going to learn funcionalities such as:
- Authentication system
- Notification system
- Image Upload using Base64 strings
- Prisma ORM with MongoDB
- Responsive Layout
- 1 To Many Relations (User - Post)
- Many To Many Relations (Post - Comment)
- Following functionality
- Comments / Replies
- Likes functionality
- Vercel Deployment
Timestamps
00:00 Intro
02:02 Environment setup
06:41 Layout
31:00 Auth UI
01:05:59 Prisma, Mongo, NextAuth
01:49:35 Users and Individual User Profile
02:25:36 Edit User, Image Upload
02:47:45 Load & Create Posts
03:23:19 Like & Follow Functionality
03:56:48 Comments
04:12:20 Notifications
04:30:68 Vercel Deployment
![Interview with Senior JS Developer 2024 [NEW]](http://i.ytimg.com/vi/aWfYxg-Ypm4/mqdefault.jpg)
![[Realtime] Making Micro-Interaction Hover Effect - CSS & Elementor Tutorial 2024](http://i.ytimg.com/vi/tyii2mTEyDY/mqdefault.jpg)
I found your channel a couple months ago, and your content has treated me well! Thanks for the amazing content!
Glad you enjoy it!
I love these kinds of tutorials. Thank you for sharing your knowledge Antonio❤
Glad you liked it!
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!
Thank you a lot for the kind words Andrew!
Great project! Learned a lot from building this. Thank you Antonio
Happy you like it, thank you for watching!
Another amazing project ❤keep going
Thank you!
Great submission of material! and you explain well
Thank you! Glad you liked it!
thank you for this video of sharing your knowledge Antonio. I love these kinds of tutorials. Thank you ❤
Happy you like it! Thanks for watching!
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
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.
Znao sam da si nas brate, inace svaka ti cast na ovako lepom videu
@@code_028 hvala puno :) Pozdrav iz Rijeke
Very very cool channel. I learn a lot with your video. Continue,you have all my support !
Thank you a lot! Glad you like the content!
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 !
Thank you a lot for the nice comment!
Honestly keep it up because you cant imagine how this videos help us
Very happy to hear that!
I think this is the most awesome twitter clone in youtube. You did a very very good jod.
Thank you a lot!
bro your tutorials are godly useful love it bby
Thank you a lot!
Antonio. My dear hero. Thnk u a lot you post this course for free. I'm really keen on watching your tutorials
You are very welcome!
Wonderful Antonio! You Rock!! great tutorial 😀😀🙏
Glad you like it!!
Thankyou for providing such a great content!
Thank you for the nice comment!
Thanks for the amazing video Antonio ♥
Happy you like it!
Thanks Antonio, went through the entire project, very valuable, I have one bug with followers but the rest looks good
Nice work!
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.
Another amazing project ❤️
Thank you!
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!!
Very happy to hear that, thank you for your nice words!
The value that these kind of videos provide to the upcoming generation cannot be overstated. Thanks so much for making this content.
Thank you a lot, very happy to hear that!
Honestly this is the video i was looking for
Glad you like it!
You create this amazing thing you deserve a lot more subs
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 😊
Glad to help, keep going!
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!
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
Great content! Follower from Argentina!
Thank you a lot!
Great Tutorial!
Thank you
Glad you like it!
we love antonio the best developper tutorials in the hole youtube simple clean code and such a skills master thank you for everything
Glad you like them!
I am super excited to watch how Thread developed
Love stack u use. Very consistent. Please make indeed clone
Thank you for the suggestion!
Yess an indeed clone would be great. Havent seen that before. Or a full stack instagram app
Top content Bro. 🙏
Thank you!
leaned alot thank you
Thank you for watching!
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?
Many thanks. 十分感谢。
Glad you like the video!
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!
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",
// ...
}
}
I wrote that and it is connected to database now but somehow it never logs in. Can you help me
Amazing amazing job😊
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.😄
Thank you for the nice comment and a great tip!
Thank you so much sir
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.
Thank you a lot! I will make sure to have my code clearer in newer tutorials!
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.
it didnt work for me
Thank you so much!
Glad you like it!
you are the GOAT man tank you so much
Happy you like it!
Amazing Amazing Job
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?
Thank you for sharing knowledge for free thank you
Glad you like it!
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 ❤
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.
@@GauravSharma-os6sb Ah sorry man, will put in the description as well!
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?
Alright
@@MasumHasanbd did u install all dependencies after cloning
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.
Great video !!!!!!!!!!
Thank you!
amazing project.
Thank you!
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.
Thank you a lot for the nice words and great suggestions!
@@codewithantonio Can you clone the Wikipedia?
Great Work......
Thank you!
wow man this is awesome
Happy you like it!
@@codewithantonio I love it and thanks for this free gift
Great Great Job
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?
Thank you so much
You're most welcome!
😮😮 You did such a great job buddy,
Congrats, how to use trpc into this?
I like how organized your file structure is
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 :)
Excellent!
Glad you liked it!
Great Job
Thank you!
Awesome tutorials! Never subscribed to anyone quicker! Any chance to see something with a CMS like Strapi or an e-commerce fullstack with Stripe?
Thank you a lot! Yes, an Ecommerce or a SaaS with monthly subscription is in my calendar soon (Stripe)
@@codewithantonio waiting that from you😇
Hey, awesome video
Amazing content
Pls make a chat app with next js
Thanks for the idea!
@@codewithantonio I am grateful to you
A chat app with rooms would be amazing to add to this
Chat app is definitely coming soon!
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?
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!
Great Great Job
Amazing Amazing Job
😅 hahaha
@@codewithantonio Hi I am 18 years old. I am mern stack dev. I want to connect with you. Please replay me.
H, Antionio, thanks for the content! Coul you make the fonts a bit bigger the next time? Cheers!
Glad you like it, Thank you for the feedback!
legend's started from here
Thanks for tutorial, can u make video only nextjs projects like consume API or other
Would be great if you could make a video on creating an ecommerce app using nextjs, typescript, tailwind css and stripe api
Thanks a lot for the suggestion, I will add it to the list!
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
Wow, really blisfful, can you make a short on How we can add chat functionality?
Thank you, My next big tutorial will be a chat one, so if you want to you can combine the 2 :)
And welcome to Bluesky!
very good
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 ?
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
hi Antonio thanks for this great project tutorial, i have question, how to exclude password fields when we call the API userId ? thank you
Very impressive tutorial.
Can you build also do one fullstack app using sockets? That will be great add on.
Thanks.
Thank you! You mean like a real time chat app ? That is defnitely on my list :)
@@codewithantonio really glad to hear that! Eagerly waiting for it :)))
Musk wants to know your location!
Ha ha, Just kidding, thanks for the outstanding tutorial man, much appreciated ❤️
🤣Thank you!
Meta must have used this tutorial 😂
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!
Wao nice
Thanks!
This man will clone the fecking internet 😂😂. I’ll not be surprised if he can clone complexe apps like Yelp.
Thank you for the compliment!
❤❤❤❤❤❤❤❤❤
Which version of next you are using ? Can you please tell me. I am try to do this project now but file structure of next js is different in my code.
awesome ❤❤
Will you do content in JS? I'm not familiar with TS.
Thank you! Of course, but I think you can follow along even with this being TS, as we are not complicating stuff too much
Just lean TS! You’ll thank me later
@@davyengone okay will learn 😁
@@codewithantonio okay! Thank you Sir 🔥
I've been there, Buddy learn TS you won't regret it, It's not as scary as it sounds 😊
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?
is you fix this trouble?
Now u r the best for me and ive seen some
Happy to hear that :)
Hello. Why dont you use "use client" in for example EditModal 2:35:30? I dont understand it works with useState.
Becuase he isn't using app router!
Please make a full stack portfolio using nextjs and tailwind.
Its in my calendar! Thanks for suggestion!
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 !
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
nice
Thank you!
hy mind if u teach us how to build a chatapp with sidebar and using tailwind too thnx
Hi, I will definitely do a tutorial on a chat app soon :)
Thanks. Does this use Next js 13 app folder structure ?
👌
Thanks! 1:40:11
@Antonio how do You keep up with new technologies and tools in web development?
Nowadays by making tutorials like these :)
I am planning to follow this build, can you tell me what are you using for global state management ?
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
@@codewithantonio That's great I also like zustand for global state management.
Now it is X Corp. clone now.
I have a question, why you are not passing the fetchedUser to the components as a prop? Insted of fetching the userData from individual components again and again.
hi, we use SWR, thus we are not re-fetching it again and again, we only fetch it the first time the hook is called whatever that component is. Every instance of useCurrentUser / useUser / usePosts after that is using cached data from the first call, and not calling the endpoint again. It only calls the endpoint again on re-invalidation such as window re-focus, tab re-focus etc.
Basically we use SWR both as a fetcher, and as a global state management with its cache.
@@codewithantonio Okay, I understand, Thankyou for explaining this.
PERN with TS and Typeorm please
I have deployed the app to Vercel and everything seems to be working fine, however when clicking the notifications button in the sidebar nothing happens. It just automatically sends me back to / if I was in profile for example. If I'm already on the homepage then literally nothing happens. This problem does not ocour when I'm hosting on localhost. Any idea what could be causing this?