🔴 Let's build a Twitter Clone with REACT.JS! (Next.js, Sanity CMS, TS, SSR, Tailwind CSS, NextAuth)

[@SonnySangha]

❗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

[@onlyforwork8774]

you were on a roll ... too bad it got interrupted close to the finish line

[@dillonbarnes232]

Such a shame it crashed! Really looking forward to making this one! Thanks for all of the awesome content!

[@SonnySangha]

I know guys! But the solution is right there don’t worry!

[@aindrailsantra6886]

I am facing issues in deployment in vercel. Can you make a part 2 or a short to show that part

[@beastnighttv]

@@aindrailsantra6886 u can check in the other builds, how he did it, or asked for help in the discord server

[@jonjojr]

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.

[@nl5410]

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!

[@kevinfreeman9652]

@49:35 somebody asked about the ordering of the tailwind classnames. Headwind is the plugin in vscode that automatically does this.

[@andyb9990]

Hey Sonny, looking forward to this build! I needed more work with Typescript. Keep up the good work brother!

[@kevinfreeman9652]

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.

[@rahim.tn99]

the Toast part bro, My heart melted and I smiled for 1 minute

[@captaintechworld]

1:04:00 -- to begin day 2 from here

[@barkamololimjonov5515]

Very useful. Thanks much. Hello from Uzbekistan, Central Asia ❤❤

[@SuperArnie1974]

Thanks Sonny a few hiccups but I'm now smashing well up to pulling queries

[@carlosvenegas8981]

Just built it and deployed it! Thank you!

[@hirensavani1501]

did you face any error in deployment because I am having so if you can guide

[@bakkas3128]

Sonny I have started building projects by watching your videos. Hey, that's cool dude.

[@beastnighttv]

49:14 Its a prettier plugin, you can check in your package.json there is a prettier-plugin-tailwind devDependency

[@ΓερασιμοςΑ-ν8σ]

Even im vuejs developer (nuxtjs etc) i really learn a lot from you. Thank you !

[@Dizzifer9538]

Scroll bar hide is super awsome

[@SilvaOnTube]

Mega Kudos Sonny. Great challenge. Awesome work. Finally everything worked for me, and now I'll try to deploy it.

[@SonnySangha]

Thanks Ray!

[@SilvaOnTube]

@@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.

[@SilvaOnTube]

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.

[@SilvaOnTube]

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.

[@SilvaOnTube]

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.

[@georgemalouf4298]

I miss building stuff with you brilliant Sonny. Nowadays, I’m extremely busy with a back-breaking project utilizing Apple’s development environment.

[@SonnySangha]

I’m back now!!

[@codekicks2171]

Thanks a lot man, Your tutorial is really awesome, Thanks a lot, Please keep making these videos

[@abishieks8069]

Why bro our papafam facing these canna tech issues frequently, I know, how it pains, but great job for your awesome content. Thank you😊

[@phucvantanvinh6843]

36:18 npm install --save react-twitter-embed

[@binu_joy]

This is amazing. Thanks a million Sonny & Jay.

[@patrickkioko8191]

Missed this, But i will take the challenge to go through it

[@anaskhan4841]

Best content creator everrrr!!!

[@jamestuttle]

Well done and you make it so we all can learn :)!!!!

[@_ramen]

0:05 Sonny made twi-uh. It's like twitter, but cooler.

[@mukherjee.p]

Your channel is VALUE incarnate

[@nicholasbazzoni7084]

Awesome build. thanks so much for your tutelage

[@victorkimura1]

Thanks so much, Sonny. God bless you

[@eliedeek7364]

Awesome Stuff SONNY!!

[@luisvaldivia592]

Is there an issue with twitter embed? I'm getting a 'net::ERR_ABORTED 400' issue and the feed doesn't show up

[@pearce0101]

Thanks for your amazing content Sonny! You teach all of the stuff in your builds perfectly! ❤❤❤

[@alexandrutnd3521]

Ce ai alege intre X3 si g30?Multumesc!

[@DevBishwasBh]

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 ❤

[@SilvaOnTube]

Damn, this is great. What a find!

[@taransingh7186]

You did a great Job Sonny!! Keep doing the great Work!!

[@SonnySangha]

Thank you!!

[@PattySpicy]

I have learned alot from this Live, Big thank you for doing this !!

[@melethaphap4923]

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

[@SonnySangha]

Amazing thank you for the support!!!

[@demptd13]

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...

[@yugeshkk3062]

Thanks Anna.

[@joaonascimento3574]

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 ?

[@vitotennis]

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~

[@CreativeTutorialsWeb]

What an amazing video 🔥🔥

[@AjaySingh-jz8qx]

bro your videos are awsome please make a video on weather app with forecast like msn weather or something like that😇😇😀😀😀😀

[@cindyfernandes9710]

Hey Sonny. Amazing video. I just finished the site and deployed to vercel. But tailwind is not working .. m I missing something???

[@BrodieTheAthlete]

Thanks Sonny from Austrian 🔥

[@nanlunglongtau2076]

Thank you so much

[@andrewkim1247]

This is awesome. How would you do dynamic routing in next, ex: {username}/post/{postId} ?

[@parinsheth4971]

Is this course for beginners?

[@kreativcity]

All in One! Thanks.

[@brianomondi5426]

Much love from kenya 💯💯

[@drphil2424]

PAPA SONNY THE GOD OF REACT

[@devkyu7674]

This is really COOL !

[@haicoders737]

you are amazing dude

[@eliuddyn]

Thanks so much bro... This is amazing 🔥🔥

[@brayanmauricio6920]

hi,I greet you from Colombia thanks for such good tutorials

[@SonnySangha]

You’re welcome!! Thanks for supporting the #PAPAFAM !!!

[@wibbs88]

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.

[@shivangpurohit9132]

error fixed?? i'm facing same error

[@ramanujamkv]

very nice session. Thanks

[@KelvinAristy]

Amazing as always.

[@northerncaliking1772]

the active scale animation on the refresh button wont work. it spins but wont do the scale animation.

[@creativesteve]

Sonny could you bring out an addendum for the last 10 minutes of code?

[@GMERT]

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

[@khushtarfaraz563]

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?

[@RayRayAndCode]

U speak my mind

[@RayRayAndCode]

How I wish Sonny can do a video and share is tip on how he learn so fast

[@rogerpumalexander]

He has prebuilt the app and then when building the app live, he looks at the other built consistently. Most youTubers do this.

[@JohnWick-kr2kp]

Getserversideprops doesn't work in production in vercel but works fine in development. Help me solve it please.

[@ugurcatal9927]

Great content,again! thanks

[@ozodbekjumanov8763]

Thanks for answer

[@Открыткадлятебя]

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!

[@nested9301]

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 ?

[@nicholasbazzoni7084]

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?

[@wesatat]

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

[@BrokeTheGamer]

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.

[@ToddDenmar]

hello Sonny! is it better to use sprite images?

[@naveenkumargowda6434]

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

[@BLISTZGAMING]

hi i am stucj. something to do with my addTweet api . does not work. would apperiate any help

[@mikashlimmer]

god bless bro! greetings from russia!

[@Dizzifer9538]

next level.......

[@ozodbekjumanov8763]

Hello bro this is a good tutorial but Twitter tweets embed did not work me

[@adityanarayangantayat7133]

Your VS code extensions for the file and folder icons please?

[@ManishSharma-bj8dz]

Amazing 🔥

[@carisfreez]

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)

[@MahmudulHasan-zw5ow]

which music is playing in the background sir😁😁

[@sayedfahad6096]

Can you build with SMS systeam?

[@shubhamkadu4189]

instead of px and py we can use p

[@minhajurrohomanrahat880]

When will we get the front end with the backend part?

[@SonnySangha]

I’m sorry? The full build is here, check pinned comment too!

[@minhajurrohomanrahat880]

@@SonnySangha I mean you're just giving the frontend part. Why not make a video of the backend? I missed your backend video lecture.

[@haoyuchou123]

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?

[@manjunathreddy5210]

Hello Sonny, can you please do truecaller clone

[@zkcoding1132]

id u commit it to github?

[@panomapet9441]

when did you start coding sir?

[@SonnySangha]

When I was 17, I’m now 27😄

[@Mikkionfire]

ClientError: Unable to parse value of "$tweetId=undefined". Please quote string values. Did anybody have the same problem?

[@cartiktechnomechnobro9061]

Music name in the beginning?

[@canhamzacode]

Amazing

[@kushalmondal618]

with 1:42:30, with fetching the tweets, its not showing on the console

[@albinbinoy1994]

Did you solved the issue?

[@kushalmondal618]

@@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

[@kushalmondal618]

okay, queried pretty fast, solved it, needed to add env variables to the hosting platforms

[@gonzalo653]

Did anyone figure out how to deploy to Vercel?

[@memberbritishempire]

anyone else can't see the "blockTweet" boolean at 1:34 ?

[@memberbritishempire]

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

[@aliyyil9035]

Bro why don't wear protect glasses but u can work 3 or 4 hours without it, How? I can work only an hour

[@xjustfast]

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.

[@jpkorstad]

Did you figure this out? I'm having the same issue currently. Thx!

[@kaliyaperumaldiwakaran8771]

Found a fix for you can edit the https in the env local file into http remove the s and it works !

[@kaliyaperumaldiwakaran8771]

@@jpkorstad Found a fix for you can edit the https in the env local file into http remove the s and it works !

[@wesatat]

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!

[@rogerpumalexander]

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

[@SonnySangha]

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!)

[@rogerpumalexander]

@@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).

[@wesatat]

@@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

[@SteveBrown2020]

@@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.

[@pedroelton7040]

The #PapaFam National Anthem: "Loving Caliber - I Wanna Be With You (Daxten Remix)"

[@SonnySangha]

LETS GO!

[@nicholasbazzoni7084]

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.

[@wesatat]

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

[@nicholasbazzoni7084]

@@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.

[@wesatat]

@@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

[@nicholasbazzoni7084]

@@wesatat I’m getting a cors error where I have to refresh to see tweets

[@wesatat]

@@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

[@mascanho]

Did anyone else got a problem wih: error - ClientError: Unable to parse value of "$tweetId=undefined". Please quote string values. ? cheers

[@TheDarknessDragon]

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.

[@mascanho]

@@TheDarknessDragon cheers mate. I’ll give it a run once I have the code open and I’ll update you. Thanks. 🙏

[@SidemenAndSomeFriends]

Anyone find a solution?

[@Mikkionfire]

I have the same error, did you find a solution ?

[@aayush481]

when only one person can build entire twitter, then why does twitter hire so much ?

[@vaniad555]

someone has to run the servers 😁

[@vaniad555]

Great content, again! I still wonder what was the audio problem, it could happen to all of us 😁