đŽ Let's build Twitter 2.0 with REACT.JS! (Next.js, Sanity CMS, Typescript, SSR, Tailwind & NextAuth)
VloĆŸit
- Äas pĆidĂĄn 2. 06. 2024
- đš Join the worldâs BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
đ« Join my Community, "University of Code" for FREE: www.universityofcode.com
đŽ LOOKING FOR THE CODE? đ ïž
links.papareact.com/github
đ© Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
I asked Sanity to hook up some free stuff for this video... They made a custom đ„ boosted free plan đ www.sanity.io/sonny
---
The much anticipated build is FINALLY HERE!
Join me as I build the TWITTER 2.0 CLONE with REACT & NEXT.js, you'll learn how to do the following in this build:
đ Youâll be able to build a Login authentication flow with Google or Twitter API using NextAuth
đ Youâll implement the Ability to BAN a tweet via the Sanity Platform
đ Youâll learn how to create structured content, for example how a single tweet can have many comments referenced to it!
đ Youâll learn how to write robust code with Typescript!
đ Youâll learn how to leverage Next.js Server Side Rendering to get a FASTER page load time!
đ Youâll learn to create your own API backend endpoints to communicate safely with your frontend!
đ Youâll learn how to add data to a Sanity CMS Backend from the frontend using Mutations!
đ Youâll learn how to Query data using the popular GROQ query language
đ Youâll learn about Tailwind CSS and how to build this awesome Responsive website!
đ Youâll learn how to implement Tweet Functionality & the ability to write a thread of comments!
đ Youâll even learn how to create silky smooth React Toast Notifications!
đ Youâll be able to Deploy to Vercel and have the site online by the end of this tutorial!
+ SO MUCH MORE!
đïž PODCAST
links.papareact.com/podcast
đ SOCIALS:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
Newsletter: links.papareact.com/newsletter
â€ïž SUPPORT
PAPA Merch: links.papareact.com/merch
Donate: links.papareact.com/donate
đ TIMESTAMPS:
00:00 Introduction
00:44 Build Showcase
04:40 Sanity Sponsorship
06:00 Build Explanation
07:20 Setting up Next.js & Tailwind CSS
10:51 Initialising the Build
15:14 Building the Sidebar Component
18:51 Building the SidebarRow Component
28:47 Building the Feed Component (1/2)
32:26 Building the Widgets Component
39:00 Implementing Responsive Design
47:53 Building the TweetBox Component
59:27 Setting up Sanity
01:11:12 Setting up Sanity Schemas
01:23:59 Explaining and Implementing Server Side Rendering
1:28:50 Creating a Type Definition File using TypeScript
1:32:21 Pulling Tweets from Sanity to the Feed
1:48:08 Building the Feed Component (2/2)
1:50:06 Building the Tweet Component
02:01:34 Implementing Comment Functionality
02:23:37 Implementing react-hot-toast
02:25:49 Implementing the Login Functionality using NextAuth
02:44:47 Implementing the Image URL Functionality
02:52:12 Adding Tweet Functionality using Mutations
03:06:08 CHECK PINNED COMMENT! (Adding Comment Functionality)
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Twitter and it's subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for âfair useâ of this video for education purposes.
#reactjs #nextjs #sanitycms #tailwindcss
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
âREAD THIS FOR THE ENDING -> [CODE IS PINNED HERE]
We hit a stream crash only for the last 10 minutes... to finish the build you simply have to complete the addComment.ts API endpoint & update the Tweet.tsx handleSubmit function!
1) We just needed to complete the API endpoint
2) Implement the HandleSubmit Functionality inside our Tweet component
3) Deploy to Vercel ensuring you update the environment variables correctly! (I show this in other builds!)
đTHEN YOUR DONE!
I have attached both code snippets with the finishing code inside! ENJOY đ
Tweet.tsx: codepen.io/sonnysangha/pen/ZErbOKZ
addComment: codepen.io/sonnysangha/pen/QWQjEgV
you were on a roll ... too bad it got interrupted close to the finish line
Such a shame it crashed! Really looking forward to making this one! Thanks for all of the awesome content!
I know guys! But the solution is right there donât worry!
I am facing issues in deployment in vercel. Can you make a part 2 or a short to show that part
@@aindrailsantra6886 u can check in the other builds, how he did it, or asked for help in the discord server
Thank you Sonny for this wonderful build! I specially appreciated you using Typescript in this one. Typescript is becoming so popular that I feel like itâs not even worth doing any projects without it so I appreciate it a lot! I hope that there will be more Typescript builds in future. Peace and Blessings from Istanbul!
Hey Sonny, looking forward to this build! I needed more work with Typescript. Keep up the good work brother!
This is amazing. Thanks a million Sonny & Jay.
Thanks for your amazing content Sonny! You teach all of the stuff in your builds perfectly! â€â€â€
@49:35 somebody asked about the ordering of the tailwind classnames. Headwind is the plugin in vscode that automatically does this.
2:48:29 dude, let me tell you. I spent hours trying to understand ref, I come to this video and in less than 10 seconds I finally understand it. Such a simple concept when you explain it easily.
Thanks a lot brother, I'll be so happy a tutorial on Django and Next, that'll be a blessing for me. #respect for you guys, keep up the good work â€
I have learned alot from this Live, Big thank you for doing this !!
Not sure if anyone else was having this problem, but I used the component for the logo rather than the . The is difficult to style and needed to be wrapped in a div for styling purposes. Not sure if this is right, or if it was already mentioned. I read through many of the posts and didn't see a comment about this. I'm open to any other tips on this as well. Keep coding Papafam. I'm lovin the energy from these videos and discord.
Awesome build. thanks so much for your tutelage
Even im vuejs developer (nuxtjs etc) i really learn a lot from you. Thank you !
Awesome Stuff SONNY!!
the Toast part bro, My heart melted and I smiled for 1 minute
Thanks a lot man, Your tutorial is really awesome, Thanks a lot, Please keep making these videos
You did a great Job Sonny!! Keep doing the great Work!!
Thank you!!
Thanks so much bro... This is amazing đ„đ„
Very useful. Thanks much. Hello from Uzbekistan, Central Asia â€â€
What an amazing video đ„đ„
Amazing as always.
Well done and you make it so we all can learn :)!!!!
Great content,again! thanks
Your channel is VALUE incarnate
very nice session. Thanks
This is really COOL !
Mega Kudos Sonny. Great challenge. Awesome work. Finally everything worked for me, and now I'll try to deploy it.
Thanks Ray!
@@SonnySangha Can you point me to deployment advice on Vercel for this? I'm slowly working through tons of dependency errors and when I deployed with no errors I got 500 Internal Server error on root. I'm now trying to go to the api endpoints: /api/getTweets works, but /api/auth/signin with Twitter worked once then gave me an error of invalid attempt...can't get back to that.
OK, I got it. The Vercel deployment worked. Now I have to test to see if Sanity is working and all the direct posting & image additions from the app itself. I'll let you know how it goes and put my Vercel link on here if all goes well.
Oops, spoke too soon. Sing In returns a 404. Localhost signin with Twitter provider works fine. I have to figure out why not on Vercel.
Sadly, I'm gonna have to leave it there for today. I'll start Sonny's tutorial on Next 13 to see if I can pick up some clues.
Thanks Sonny a few hiccups but I'm now smashing well up to pulling queries
Damn, this is great. What a find!
Sonny I have started building projects by watching your videos. Hey, that's cool dude.
Just built it and deployed it! Thank you!
did you face any error in deployment because I am having so if you can guide
Best content creator everrrr!!!
All in One! Thanks.
Much love from kenya đŻđŻ
Why bro our papafam facing these canna tech issues frequently, I know, how it pains, but great job for your awesome content.
Thank youđ
Thanks so much, Sonny. God bless you
Thanks Sonny from Austrian đ„
you are amazing dude
Scroll bar hide is super awsome
Thank you so much
Hey Sonny. Amazing video. I just finished the site and deployed to vercel. But tailwind is not working .. m I missing something???
49:14 Its a prettier plugin, you can check in your package.json there is a prettier-plugin-tailwind devDependency
Thanks Anna.
Amazing đ„
Thanks for answer
Hello papa react i want to say thank you thanks to you i am excited to learn front end you know? your channel is the best I have found your explanation is very easy to understand once again thank you teacher greetings from Indonesia
Amazing thank you for the support!!!
I miss building stuff with you brilliant Sonny. Nowadays, Iâm extremely busy with a back-breaking project utilizing Appleâs development environment.
Iâm back now!!
Missed this, But i will take the challenge to go through it
hi,I greet you from Colombia thanks for such good tutorials
Youâre welcome!! Thanks for supporting the #PAPAFAM !!!
Hey Sonny/Jay/PapaFam, enjoyed the tutorial and managed to finish it and deploy even though the video was cut short. I'm having issues with the deployed version though as the tweets are not being updated immediately (comments are fine) when posted - they appear in Sanity straight away but they appear only on page refresh.
error fixed?? i'm facing same error
This is awesome. How would you do dynamic routing in next, ex: {username}/post/{postId} ?
Is there an issue with twitter embed? I'm getting a 'net::ERR_ABORTED 400' issue and the feed doesn't show up
PAPA SONNY THE GOD OF REACT
hello Sonny! is it better to use sprite images?
Amazing
Once again really fun build. ive gotten the app to deploy but now theres a CORS error issue i've been confronted with. The fetches go through to sanity but i must refresh the app in order to view the posts. whats the best way to approach this problem?
Hey man, I got the same issue. I'm hoping we can try fix it together. I'm going to try a bunch of things and let you know
Hi everyone! First of all! i need to say thanks for sonny to upload this majestic tutorial for us! This is teaching me a lot! but on the implementing comment funcionality i get caught up with this browser error: "Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data". Did anyone get caught with this error ? how did you solve it ?
I stopped at Twitter authentication and can't move on, I registered in Twitter, but in order to get the keys in Twitter Developer you need to link your phone number to your Twitter account, for 2 days the message from the code is supposedly sent, but in fact nothing comes...
Sonny- you never stop amazing me. How can we program this code to work with a blockchain wallet signer and connect it to moralis. Kindly do a video on this
1:04:00 -- to begin day 2 from here
You are just amazing Sonnyđ„đ„đ„...I have learnt a lot from you...I had this question that how do you build the whole app before rebuilding it live...how do you nail css part...do you read documentation... basically I wanted to know that how you learn new technologies?
U speak my mind
How I wish Sonny can do a video and share is tip on how he learn so fast
He has prebuilt the app and then when building the app live, he looks at the other built consistently. Most youTubers do this.
the active scale animation on the refresh button wont work. it spins but wont do the scale animation.
for the last part "post the comment" has not finish after 3:17:52 :(.. but I think i could finish on my own.
Great tour actually!! thanks~
Can anyone tell me what is the extension Sonny uses to get the groq queries to look all nice and colorful? Mine just gives me crappy yellow string text and it's bothering the hell out of me (i know petty problems, but still)
next level.......
bro your videos are awsome please make a video on weather app with forecast like msn weather or something like thatđđđđđđ
36:18 npm install --save react-twitter-embed
Sonny could you bring out an addendum for the last 10 minutes of code?
0:05 Sonny made twi-uh. It's like twitter, but cooler.
you can mutate without using that boilerplate
export async function createPost(post: Post) {
const result = client.create(post)
return result
}
export async function updateDocumentTitle(_id, title) {
const result = client.patch(_id).set({title})
return result
}
as montioned on the docs ?
Hii Sonny
I am getting
Type 'Comment[]' is not assignable to type'import().Comment[]' and
Comment is missing the following properties from type 'Comment':
in tweet.tsx
Can you help me how to resolve with it. I did exactly what you did there
Getserversideprops doesn't work in production in vercel but works fine in development. Help me solve it please.
Does anyone encounter the problem when trying to add new comments and tweets when deployed, it sometimes respond slowly and doesn't show the newest comments or tweets on screen immediately, but everything works fine one local machine?
ClientError: Unable to parse value of "$tweetId=undefined". Please quote string values. Did anybody have the same problem?
Can you build with SMS systeam?
hi i am stucj. something to do with my addTweet api . does not work. would apperiate any help
Your VS code extensions for the file and folder icons please?
Hello bro this is a good tutorial but Twitter tweets embed did not work me
Is this course for beginners?
god bless bro! greetings from russia!
When will we get the front end with the backend part?
Iâm sorry? The full build is here, check pinned comment too!
@@SonnySangha I mean you're just giving the frontend part. Why not make a video of the backend? I missed your backend video lecture.
Greetings from Kazakhstan! Thanks buddy! Please make a pagination on TS, for example, using the example of your instagram clone. I didn't find good information about pagination and dynamic loading of posts. Thank you in advance!
which music is playing in the background sirđđ
Hey. I am a new subcriber and i have follwoed along with a few of your videos. I am having issues on deployment with vercel. I have made the connections and after i build in vercel, i get an issue saying internal server error 500. I tried updating the env variables but I'm not sure which ones to use as no combination of changing localhost:3000 url to vercel urls work. Sonny please help me understand this as your video ends early. I PROMISE I WILL BUY YOUR COURSE IF YOU CAN HELP ME!
You can view your error logs by going to your Vercel dashboard, clicking on your project, and then clicking "View Function Logs". This will show errors happening in realtime. They are not persisted (they're streaming logs). Refresh the page, and you'll see your 500 error. That should tell you what the issue is. I think its a connection issue, check your connections
Itâs most likely you forgetting the NEXTAUTH_SECRET or something along those lines! As Roger suggested do check the function logs and you should see the error listed out!
We got your back (and thanks Roger for being Awesome!)
@@SonnySangha Of course Sonny, Thank YOU man. Your channel is awesome. You have good vibes, youre funny, and you make coding fun (as it should be).
@@SonnySangha thanks for the reply I managed to fix it and then came back to try and tell you that I figured it out. Now my next issue is on vercel when running the app it doesn't refresh comment or tweet. If I update the sanity database and then refresh the page it pulls in the new data I put in the sanity database. However I can't comment to tweet or refresh feed on the whistle Running Up. Thanks sonny you are a legend
@@SonnySangha Amazing course, Sonny! I'm also getting the 500 error deploying to Vercel. All the env variables are setup including the NEXTAUTH ones. The Functions realtime longs say [GET] /api/auth/session Function Status 304 when I do it.
Server Error
TypeError: Cannot read property 'fetch' of undefined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Did you figure this out? I'm having the same issue currently. Thx!
Found a fix for you can edit the https in the env local file into http remove the s and it works !
@@jpkorstad Found a fix for you can edit the https in the env local file into http remove the s and it works !
Hello Sonny, can you please do truecaller clone
when did you start coding sir?
When I was 17, Iâm now 27đ
with 1:42:30, with fetching the tweets, its not showing on the console
Did you solved the issue?
@@albinbinoy1994 Yes, that one was solved, i was checking with the utils hardly, but the issue was typo on GetServerSideProps, but Facing a new issue while deploying it on vercel or netlify it shows 500 internal server error at homepage, locally everythin was fine, i have set the deployed url on sanity CROS origin and also twitter developers , but it didnot solved
okay, queried pretty fast, solved it, needed to add env variables to the hosting platforms
Music name in the beginning?
instead of px and py we can use p
id u commit it to github?
having a hard time deploying to vercel. I get an internal 500 server error. even when i replace next_auth_url and next_public_base after successful upload. can anyone help me who has experienced the same? i even looked at the reddit build for reference but to no avail.
I have the same issue, maybe we can try fix it together?
i have also updated my env variables. i think thats where the issue is, just not sure which combination of urls to use
@@wesatat I fixed this. Once you get that 500 error Take the latest deployment uri and paste it in your twitter oauth 2 along with the callback thatâs already provided. Also include the vercel uri beneath the callback by itself.
@@nicholasbazzoni7084 thanks i actually figured this out and was coming back to the comments section to explain the fix! now my issue is when running in vercel the refresh fee and add tweet and add comment function dont seem to work
@@wesatat Iâm getting a cors error where I have to refresh to see tweets
@@nicholasbazzoni7084 same! If I update the sanity database manually then it does pull through changes but when I click refresh or add comment or add tweet. Then it just constantly refreshes but doesn't seem to get the data. I am really hoping we both can figure this out
Did anyone else got a problem wih: error - ClientError: Unable to parse value of "$tweetId=undefined". Please quote string values. ? cheers
If the tweetId is inside the handleSubmit function or used there then check the video description. If that doesn't work then just know that that variable is either not defined at the right place or not defined at all. If the next piece of code is running before tweetId can get it's value then just use an useEffect hook. I can't be 100% since I haven't yet watched this video yet, so I will update my answer once I watch it from start to finish.
@@SoraFromIndia cheers mate. Iâll give it a run once I have the code open and Iâll update you.
Thanks. đ
Anyone find a solution?
I have the same error, did you find a solution ?
Did anyone figure out how to deploy to Vercel?
Bro why don't wear protect glasses but u can work 3 or 4 hours without it, How? I can work only an hour
The #PapaFam National Anthem: "Loving Caliber - I Wanna Be With You (Daxten Remix)"
LETS GO!
anyone else can't see the "blockTweet" boolean at 1:34 ?
well nvm guys đđđ if anyone got confused there just enable & disbale the block tweet again maybe for the first time you'll not see the "bloclTweet" as it was for me
Great content, again! I still wonder what was the audio problem, it could happen to all of us đ
Can you clone dev.to in next video
Make blog
Fantastic video! But, for the love of god, please lower the volume of the music đ⊠I love the music, itâs just growing you out at times.