❗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
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!
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.
@@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.
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.
@@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
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...
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
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?
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?
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 ?
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.
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 ?
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
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
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)
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
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?
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.
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!
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
@@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
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 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.
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.
❗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!
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.
@49:35 somebody asked about the ordering of the tailwind classnames. Headwind is the plugin in vscode that automatically does this.
Hey Sonny, looking forward to this build! I needed more work with Typescript. Keep up the good work brother!
the Toast part bro, My heart melted and I smiled for 1 minute
Very useful. Thanks much. Hello from Uzbekistan, Central Asia ❤❤
Just built it and deployed it! Thank you!
did you face any error in deployment because I am having so if you can guide
1:04:00 -- to begin day 2 from here
Thanks a lot man, Your tutorial is really awesome, Thanks a lot, Please keep making these videos
This is amazing. Thanks a million Sonny & Jay.
Even im vuejs developer (nuxtjs etc) i really learn a lot from you. Thank you !
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.
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.
Use and size it from there
Awesome Stuff SONNY!!
Best content creator everrrr!!!
What an amazing video 🔥🔥
Awesome build. thanks so much for your tutelage
Well done and you make it so we all can learn :)!!!!
Thanks Sonny a few hiccups but I'm now smashing well up to pulling queries
Scroll bar hide is super awsome
Thank you bro❤
Your channel is VALUE incarnate
Thank you so much
Sonny I have started building projects by watching your videos. Hey, that's cool dude.
49:14 Its a prettier plugin, you can check in your package.json there is a prettier-plugin-tailwind devDependency
Thanks for your amazing content Sonny! You teach all of the stuff in your builds perfectly! ❤❤❤
Thanks Anna.
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!!
You did a great Job Sonny!! Keep doing the great Work!!
Thank you!!
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 ❤
Thanks so much, Sonny. God bless you
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
Thanks for answer
comment document fields tweet reference to tweet
i got this error while compile schema 1:13:56 so what i can do now
Damn, this is great. What a find!
36:18 npm install --save react-twitter-embed
This is really COOL !
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...
Much love from kenya 💯💯
you are amazing dude
All in One! Thanks.
Is there an issue with twitter embed? I'm getting a 'net::ERR_ABORTED 400' issue and the feed doesn't show up
Amazing as always.
I have learned alot from this Live, Big thank you for doing this !!
very nice session. Thanks
Thanks so much bro... This is amazing 🔥🔥
Is this course for beginners?
Great content,again! thanks
Thanks Sonny from Austrian 🔥
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!!!
Why bro our papafam facing these canna tech issues frequently, I know, how it pains, but great job for your awesome content.
Thank you😊
Hey Sonny. Amazing video. I just finished the site and deployed to vercel. But tailwind is not working .. m I missing something???
Amazing 🔥
Missed this, But i will take the challenge to go through it
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~
hi,I greet you from Colombia thanks for such good tutorials
You’re welcome!! Thanks for supporting the #PAPAFAM !!!
Ce ai alege intre X3 si g30?Multumesc!
the active scale animation on the refresh button wont work. it spins but wont do the scale animation.
PAPA SONNY THE GOD OF REACT
Getserversideprops doesn't work in production in vercel but works fine in development. Help me solve it please.
bro your videos are awsome please make a video on weather app with forecast like msn weather or something like that😇😇😀😀😀😀
hello Sonny! is it better to use sprite images?
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.
next level.......
This is awesome. How would you do dynamic routing in next, ex: {username}/post/{postId} ?
when did you start coding sir?
When I was 17, I’m now 27😄
Can you build with SMS systeam?
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
0:05 Sonny made twi-uh. It's like twitter, but cooler.
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.
Amazing
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 ?
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
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 ?
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
Your VS code extensions for the file and folder icons please?
hi i am stucj. something to do with my addTweet api . does not work. would apperiate any help
god bless bro! greetings from russia!
id u commit it to github?
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
Sonny could you bring out an addendum for the last 10 minutes of code?
Hello bro this is a good tutorial but Twitter tweets embed did not work me
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)
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.
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
which music is playing in the background sir😁😁
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?
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 !
Music name in the beginning?
instead of px and py we can use p
ClientError: Unable to parse value of "$tweetId=undefined". Please quote string values. Did anybody have the same problem?
Hello Sonny, can you please do truecaller clone
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!
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 figure out how to deploy to Vercel?
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.
Bro why don't wear protect glasses but u can work 3 or 4 hours without it, How? I can work only an hour
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.
@@TheDarknessDragon 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 ?
The #PapaFam National Anthem: "Loving Caliber - I Wanna Be With You (Daxten Remix)"
LETS GO!