Тёмный

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

Sonny Sangha
Подписаться 273 тыс.
Просмотров 129 тыс.
50% 1

Опубликовано:

 

23 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 199   
@SonnySangha
@SonnySangha 2 года назад
❗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
@onlyforwork8774 2 года назад
you were on a roll ... too bad it got interrupted close to the finish line
@dillonbarnes232
@dillonbarnes232 2 года назад
Such a shame it crashed! Really looking forward to making this one! Thanks for all of the awesome content!
@SonnySangha
@SonnySangha 2 года назад
I know guys! But the solution is right there don’t worry!
@aindrailsantra6886
@aindrailsantra6886 2 года назад
I am facing issues in deployment in vercel. Can you make a part 2 or a short to show that part
@beastnighttv
@beastnighttv 2 года назад
@@aindrailsantra6886 u can check in the other builds, how he did it, or asked for help in the discord server
@nl5410
@nl5410 2 года назад
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
@kevinfreeman9652 2 года назад
@49:35 somebody asked about the ordering of the tailwind classnames. Headwind is the plugin in vscode that automatically does this.
@jonjojr
@jonjojr 2 года назад
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.
@andyb9990
@andyb9990 2 года назад
Hey Sonny, looking forward to this build! I needed more work with Typescript. Keep up the good work brother!
@kevinfreeman9652
@kevinfreeman9652 2 года назад
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
@rahim.tn99 2 года назад
the Toast part bro, My heart melted and I smiled for 1 minute
@barkamololimjonov5515
@barkamololimjonov5515 2 года назад
Very useful. Thanks much. Hello from Uzbekistan, Central Asia ❤❤
@binu_joy
@binu_joy 2 года назад
This is amazing. Thanks a million Sonny & Jay.
@ΓερασιμοςΑ-ν8σ
@ΓερασιμοςΑ-ν8σ 2 года назад
Even im vuejs developer (nuxtjs etc) i really learn a lot from you. Thank you !
@demptd13
@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...
@codekicks2171
@codekicks2171 2 года назад
Thanks a lot man, Your tutorial is really awesome, Thanks a lot, Please keep making these videos
@georgemalouf4298
@georgemalouf4298 2 года назад
I miss building stuff with you brilliant Sonny. Nowadays, I’m extremely busy with a back-breaking project utilizing Apple’s development environment.
@SonnySangha
@SonnySangha 2 года назад
I’m back now!!
@abishieks8069
@abishieks8069 2 года назад
Why bro our papafam facing these canna tech issues frequently, I know, how it pains, but great job for your awesome content. Thank you😊
@pearce0101
@pearce0101 2 года назад
Thanks for your amazing content Sonny! You teach all of the stuff in your builds perfectly! ❤❤❤
@DevBishwasBh
@DevBishwasBh 2 года назад
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 ❤
@SuperArnie1974
@SuperArnie1974 2 года назад
Thanks Sonny a few hiccups but I'm now smashing well up to pulling queries
@carlosvenegas8981
@carlosvenegas8981 2 года назад
Just built it and deployed it! Thank you!
@hirensavani1501
@hirensavani1501 2 года назад
did you face any error in deployment because I am having so if you can guide
@bakkas3128
@bakkas3128 2 года назад
Sonny I have started building projects by watching your videos. Hey, that's cool dude.
@luisvaldivia592
@luisvaldivia592 2 года назад
Is there an issue with twitter embed? I'm getting a 'net::ERR_ABORTED 400' issue and the feed doesn't show up
@SilvaOnTube
@SilvaOnTube Год назад
Mega Kudos Sonny. Great challenge. Awesome work. Finally everything worked for me, and now I'll try to deploy it.
@SonnySangha
@SonnySangha Год назад
Thanks Ray!
@SilvaOnTube
@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
@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
@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
@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.
@phucvantanvinh6843
@phucvantanvinh6843 Год назад
36:18 npm install --save react-twitter-embed
@beastnighttv
@beastnighttv 2 года назад
49:14 Its a prettier plugin, you can check in your package.json there is a prettier-plugin-tailwind devDependency
@jamestuttle
@jamestuttle 2 года назад
Well done and you make it so we all can learn :)!!!!
@joaonascimento3574
@joaonascimento3574 2 года назад
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 ?
@cindyfernandes9710
@cindyfernandes9710 2 года назад
Hey Sonny. Amazing video. I just finished the site and deployed to vercel. But tailwind is not working .. m I missing something???
@PattyBeautCode
@PattyBeautCode 2 года назад
I have learned alot from this Live, Big thank you for doing this !!
@taransingh7186
@taransingh7186 2 года назад
You did a great Job Sonny!! Keep doing the great Work!!
@SonnySangha
@SonnySangha 2 года назад
Thank you!!
@nicholasbazzoni7084
@nicholasbazzoni7084 2 года назад
Awesome build. thanks so much for your tutelage
@wibbs88
@wibbs88 2 года назад
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
@shivangpurohit9132 Год назад
error fixed?? i'm facing same error
@JohnWick-kr2kp
@JohnWick-kr2kp 4 месяца назад
Getserversideprops doesn't work in production in vercel but works fine in development. Help me solve it please.
@vitotennis
@vitotennis 2 года назад
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~
@nested9301
@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 ?
@CreativeTutorialsWeb
@CreativeTutorialsWeb 2 года назад
What an amazing video 🔥🔥
@khushtarfaraz563
@khushtarfaraz563 2 года назад
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
@RayRayAndCode 2 года назад
U speak my mind
@RayRayAndCode
@RayRayAndCode 2 года назад
How I wish Sonny can do a video and share is tip on how he learn so fast
@rogeralexander1539
@rogeralexander1539 2 года назад
He has prebuilt the app and then when building the app live, he looks at the other built consistently. Most youTubers do this.
@andrewkim1247
@andrewkim1247 2 года назад
This is awesome. How would you do dynamic routing in next, ex: {username}/post/{postId} ?
@prathammishra2458
@prathammishra2458 2 года назад
comment document fields tweet reference to tweet i got this error while compile schema 1:13:56 so what i can do now
@captaintechworld
@captaintechworld 2 года назад
1:04:00 -- to begin day 2 from here
@Dizzifer9538
@Dizzifer9538 Год назад
Scroll bar hide is super awsome
@anaskhan4841
@anaskhan4841 2 года назад
Best content creator everrrr!!!
@parinsheth4971
@parinsheth4971 Год назад
Is this course for beginners?
@eliedeek7364
@eliedeek7364 2 года назад
Awesome Stuff SONNY!!
@melethaphap4923
@melethaphap4923 2 года назад
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
@SonnySangha 2 года назад
Amazing thank you for the support!!!
@patrickkioko8191
@patrickkioko8191 2 года назад
Missed this, But i will take the challenge to go through it
@GMERT
@GMERT 2 года назад
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
@northerncaliking1772
@northerncaliking1772 2 года назад
the active scale animation on the refresh button wont work. it spins but wont do the scale animation.
@AjaySingh-jz8qx
@AjaySingh-jz8qx Год назад
bro your videos are awsome please make a video on weather app with forecast like msn weather or something like that😇😇😀😀😀😀
@mukherjee.p
@mukherjee.p 2 года назад
Your channel is VALUE incarnate
@creativesteve
@creativesteve 2 года назад
Sonny could you bring out an addendum for the last 10 minutes of code?
@victorkimura1
@victorkimura1 Год назад
Thanks so much, Sonny. God bless you
@eliuddyn
@eliuddyn 2 года назад
Thanks so much bro... This is amazing 🔥🔥
@SilvaOnTube
@SilvaOnTube Год назад
Damn, this is great. What a find!
@yugeshkk3062
@yugeshkk3062 Год назад
Thanks Anna.
@naveenkumargowda6434
@naveenkumargowda6434 2 года назад
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
@kushalmondal618
@kushalmondal618 2 года назад
with 1:42:30, with fetching the tweets, its not showing on the console
@albinbinoy1994
@albinbinoy1994 2 года назад
Did you solved the issue?
@kushalmondal618
@kushalmondal618 2 года назад
@@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
@kushalmondal618 2 года назад
okay, queried pretty fast, solved it, needed to add env variables to the hosting platforms
@carisfreez
@carisfreez 2 года назад
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)
@brianomondi5426
@brianomondi5426 2 года назад
Much love from kenya 💯💯
@nicholasbazzoni7084
@nicholasbazzoni7084 2 года назад
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
@wesatat 2 года назад
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
@adityanarayangantayat7133
@adityanarayangantayat7133 2 года назад
Your VS code extensions for the file and folder icons please?
@ToddDenmar
@ToddDenmar 2 года назад
hello Sonny! is it better to use sprite images?
@BrokeTheGamer
@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.
@_ramen
@_ramen 2 года назад
0:05 Sonny made twi-uh. It's like twitter, but cooler.
@sayedfahad6096
@sayedfahad6096 2 года назад
Can you build with SMS systeam?
@haoyuchou123
@haoyuchou123 2 года назад
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?
@nanlunglongtau2076
@nanlunglongtau2076 8 месяцев назад
Thank you so much
@BrodieTheAthlete
@BrodieTheAthlete 2 года назад
Thanks Sonny from Austrian 🔥
@ozodbekjumanov8763
@ozodbekjumanov8763 2 года назад
Hello bro this is a good tutorial but Twitter tweets embed did not work me
@BLISTZGAMING
@BLISTZGAMING 2 года назад
hi i am stucj. something to do with my addTweet api . does not work. would apperiate any help
@KelvinAristy
@KelvinAristy 2 года назад
Amazing as always.
@kreativcity
@kreativcity 2 года назад
All in One! Thanks.
@Открыткадлятебя
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!
@devkyu7674
@devkyu7674 2 года назад
This is really COOL !
@brayanmauricio6920
@brayanmauricio6920 2 года назад
hi,I greet you from Colombia thanks for such good tutorials
@SonnySangha
@SonnySangha 2 года назад
You’re welcome!! Thanks for supporting the #PAPAFAM !!!
@ramanujamkv
@ramanujamkv 2 года назад
very nice session. Thanks
@Mikkionfire
@Mikkionfire 2 года назад
ClientError: Unable to parse value of "$tweetId=undefined". Please quote string values. Did anybody have the same problem?
@ugurcatal9927
@ugurcatal9927 2 года назад
Great content,again! thanks
@MahmudulHasan-zw5ow
@MahmudulHasan-zw5ow 2 года назад
which music is playing in the background sir😁😁
@minhajurrohomanrahat880
@minhajurrohomanrahat880 2 года назад
When will we get the front end with the backend part?
@SonnySangha
@SonnySangha 2 года назад
I’m sorry? The full build is here, check pinned comment too!
@minhajurrohomanrahat880
@minhajurrohomanrahat880 2 года назад
@@SonnySangha I mean you're just giving the frontend part. Why not make a video of the backend? I missed your backend video lecture.
@ozodbekjumanov8763
@ozodbekjumanov8763 2 года назад
Thanks for answer
@zkcoding1132
@zkcoding1132 Год назад
id u commit it to github?
@haicoders737
@haicoders737 2 года назад
you are amazing dude
@drphil2424
@drphil2424 2 года назад
PAPA SONNY THE GOD OF REACT
@shubhamkadu4189
@shubhamkadu4189 2 года назад
instead of px and py we can use p
@cartiktechnomechnobro9061
@cartiktechnomechnobro9061 2 года назад
Music name in the beginning?
@gonzalo653
@gonzalo653 Год назад
Did anyone figure out how to deploy to Vercel?
@manjunathreddy5210
@manjunathreddy5210 2 года назад
Hello Sonny, can you please do truecaller clone
@Dizzifer9538
@Dizzifer9538 Год назад
next level.......
@mikashlimmer
@mikashlimmer 6 месяцев назад
god bless bro! greetings from russia!
@ManishSharma-bj8dz
@ManishSharma-bj8dz 2 года назад
Amazing 🔥
@panomapet9441
@panomapet9441 2 года назад
when did you start coding sir?
@SonnySangha
@SonnySangha 2 года назад
When I was 17, I’m now 27😄
@xjustfast
@xjustfast 2 года назад
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
@jpkorstad 2 года назад
Did you figure this out? I'm having the same issue currently. Thx!
@kaliyaperumaldiwakaran8771
@kaliyaperumaldiwakaran8771 2 года назад
Found a fix for you can edit the https in the env local file into http remove the s and it works !
@kaliyaperumaldiwakaran8771
@kaliyaperumaldiwakaran8771 2 года назад
@@jpkorstad Found a fix for you can edit the https in the env local file into http remove the s and it works !
@aliyyil9035
@aliyyil9035 2 года назад
Bro why don't wear protect glasses but u can work 3 or 4 hours without it, How? I can work only an hour
@canhamzacode
@canhamzacode 2 года назад
Amazing
@wesatat
@wesatat 2 года назад
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!
@rogeralexander1539
@rogeralexander1539 2 года назад
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
@SonnySangha 2 года назад
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!)
@rogeralexander1539
@rogeralexander1539 2 года назад
@@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
@wesatat 2 года назад
@@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
@SteveBrown2020 2 года назад
@@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.
@memberbritishempire
@memberbritishempire 2 года назад
anyone else can't see the "blockTweet" boolean at 1:34 ?
@memberbritishempire
@memberbritishempire 2 года назад
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
@nicholasbazzoni7084
@nicholasbazzoni7084 2 года назад
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
@wesatat 2 года назад
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
@nicholasbazzoni7084 2 года назад
@@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
@wesatat 2 года назад
@@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
@nicholasbazzoni7084 2 года назад
@@wesatat I’m getting a cors error where I have to refresh to see tweets
@wesatat
@wesatat 2 года назад
@@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
@mascanho 2 года назад
Did anyone else got a problem wih: error - ClientError: Unable to parse value of "$tweetId=undefined". Please quote string values. ? cheers
@SoraFromIndia
@SoraFromIndia 2 года назад
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
@mascanho 2 года назад
@@SoraFromIndia cheers mate. I’ll give it a run once I have the code open and I’ll update you. Thanks. 🙏
@SidemenAndSomeFriends
@SidemenAndSomeFriends 2 года назад
Anyone find a solution?
@Mikkionfire
@Mikkionfire 2 года назад
I have the same error, did you find a solution ?
@vaniad555
@vaniad555 2 года назад
Great content, again! I still wonder what was the audio problem, it could happen to all of us 😁
@truongbuipv
@truongbuipv 2 года назад
Can you clone dev.to in next video
@pedroelton7040
@pedroelton7040 2 года назад
The #PapaFam National Anthem: "Loving Caliber - I Wanna Be With You (Daxten Remix)"
@SonnySangha
@SonnySangha 2 года назад
LETS GO!
Далее
ТАЙНА ТРАВЫ #shorts
00:22
Просмотров 721 тыс.
This UI Library is a GAME CHANGER! (Not Lying)
20:48
Просмотров 265 тыс.