🔴 Let's build a Facebook Clone with REACT.JS! (Next.js, Tailwind, Image Uploading, Facebook Login)

Поділитися
Вставка
  • Опубліковано 21 лис 2024

КОМЕНТАРІ • 440

  • @SonnySangha
    @SonnySangha  2 роки тому +9

    📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university

    • @ahmadabdulkadir245
      @ahmadabdulkadir245 Рік тому +2

      pls what is the name of the intrumental you used in the beginning of this video sir

  • @LatinoWebStudio
    @LatinoWebStudio 2 роки тому +15

    This is awesome! I started learning React a few weeks ago but then found out React by itself is CSR and I need SSR since I'm building web apps for clients and their websites need to be crawled so it's awesome to see all these tutorials (from playlist) on NextJS. I'm definitely going through all of them.

  • @shwetadeshmukh7229
    @shwetadeshmukh7229 3 роки тому +10

    Will watch this again. Was awake till 2:30 AM IST. This one is definitely on my list to build along with the Hulu clone. Thanks Sonny for your dedication inspite of technical difficulties.

  • @chinmaymehta8200
    @chinmaymehta8200 3 роки тому +4

    Tip: Anyone who gets stuck with sonny at the point where the server restart doesn't pickup tailwind. Go to tailwind config and there CUT all the contents and PASTE them back -> Save. Now you should see warning for the jit compiler in the terminal. That saved me a lot of time.

    • @martinbradley80
      @martinbradley80 3 роки тому

      I find that my VS Code doesn't like the directives within the global.css file. If/when I resave the file and then close it, the initializations seem to work more consistently.

    • @chinmaymehta8200
      @chinmaymehta8200 3 роки тому

      @@martinbradley80 Oh nice. I think this issue is because we're using jit. That's why it might not be picking up tailwind configs.

    • @anuvapandya8287
      @anuvapandya8287 3 роки тому

      This helped, thanks!

  • @varunbhatt35
    @varunbhatt35 3 роки тому +34

    Letss goo broo.. you managed to pull this off in just 3hr 40 mins even after many glitches and unwanted bugs .. 💪💪

  • @knightrider192
    @knightrider192 3 роки тому +1

    So far the Best Tutorial video i have ever seen on UA-cam please please make more video's like this where you explain everything like this and make it from scratch and please keep these video available for us forever they are absolutely great

  • @rkcoder
    @rkcoder 3 роки тому +5

    These live coding sessions are awesome, short tutorials are nice but seeing the full process like this is also suuper valuable. Thanks for the video and hope you continue making more!

  • @mariacamilabaronamartinez6748
    @mariacamilabaronamartinez6748 3 роки тому +31

    I do really appreciate what you made for the community, is INCREDIBLY AWESOME, it would be awesome if you can explain how to deploy this project, I've been struggling with that

    • @mariacamilabaronamartinez6748
      @mariacamilabaronamartinez6748 3 роки тому +1

      @@gg-yr4bp Thank you!! I already search a lot and end up learning a lot of cool stuff and deploying my apps

    • @doladonald7728
      @doladonald7728 3 роки тому

      Hi can give pointers on how you went on about that please?

  • @parshvarunwal4559
    @parshvarunwal4559 3 роки тому +3

    Holy Cow! Amazing build :), but guys don't just code along, add some features from your side!

  • @Phas0ruk
    @Phas0ruk 2 роки тому +1

    Love your videos. Just bought the github repo access. Thanks Sonny. Love that you're representing the UK too!

  • @ashfaqulbari7328
    @ashfaqulbari7328 3 роки тому +2

    I have to say, I enjoy watching your thought process when you encounter technical difficulties/challenges, and how you overcome them, well done! Awesome Tutorial!

  • @thunderclap2060
    @thunderclap2060 4 місяці тому

    this looks super fun, for sure trying this build next playthrough

  • @thetutorialdoctor
    @thetutorialdoctor 3 роки тому +2

    I have to do this one. Glad you are using tailwind CSS

  • @tuanlam999
    @tuanlam999 3 роки тому +4

    Awesome. More builds with Next.js, Tailwind CSS please.

  • @andresgardiol8111
    @andresgardiol8111 3 роки тому +3

    Nice video!! I really like that you use the functional approach with hooks.
    What about organize component in a more "Clean Architecture" way?

  • @TharunKumaar
    @TharunKumaar 3 роки тому +1

    Thank you bro it took me a week to sit watch and do this with you! I learnt a lot and I'm gonna do all the other apps you have done! Hope I become a pro like you one day!

  • @adnan_asaad
    @adnan_asaad Рік тому

    I love you dude ❤ , i can say easily your content for web is number one on UA-cam, keep going brother

  • @rangabharath4253
    @rangabharath4253 3 роки тому +1

    Awesome as always sonny. Keep rocking 😎👍

  • @harsh_nandan
    @harsh_nandan 3 роки тому

    Amazing debugging. I too got irritated when the bug was not getting identified. Great Experience being here.

  • @teguhbadrusalam295
    @teguhbadrusalam295 3 роки тому +1

    Sonny is a Legend!!!

  • @Manjaco
    @Manjaco 3 роки тому

    the NextAuth feature is insane !!!

  • @pranaytejachethireddy9035
    @pranaytejachethireddy9035 3 роки тому +1

    Thank you so much Sonny. This video made my day . Please continue making videos like this . Learnt a lot from this video .Once again Appreciated for your help .

  • @always-shaiva
    @always-shaiva 3 роки тому +1

    Thank you my guru for this wonderful hardwork

  • @spinspin3523
    @spinspin3523 2 роки тому

    this guy is a legend

  • @dragonburger5676
    @dragonburger5676 3 роки тому +3

    Incredible tutorial! Perfect pace and explained so well. I’ve watched tons of react videos and this is top notch

  • @mrcharm767
    @mrcharm767 2 роки тому +1

    when you those things happened to you and you said this is called bad day i can sense it ,it happens to me 95% of time

  • @theetechverge7723
    @theetechverge7723 3 роки тому +5

    I Love Your Energy Papa react....#papa fam

  • @brunotravesi7385
    @brunotravesi7385 Рік тому

    Great videos man, you are helping and teaching to a lot of people around the world, send you a hug from mexico, if one day you come to mexico city i owe you some tacos 👍

  • @handa1780
    @handa1780 3 роки тому

    Subbed!, I was learning nextjs also tailwind and looking forward to project based tutorial to deepen my understanding about nextjs and found your videos, I learned a lot from this tutorial and hopefully I could use this in my own projects or something else, looking forward to your upcoming tutorial... you're the best man!!

  • @pokerfaced8139
    @pokerfaced8139 3 роки тому +8

    hi sonny , the JIT compiler is buggy and sometimes doesn't starts up , I tried saving the "tailwind.config.js" file again and then it worked for me .

  • @abderrahimslam2892
    @abderrahimslam2892 3 роки тому +4

    Hi sonny! I noticed that you worked so much with firebase in the builds you made. But most companies use a custom backend, we need something like node js backend to put in our resume to help us find a job.

    • @AjeetKumarrr
      @AjeetKumarrr Рік тому

      But you can apply as a frontend devloper.

  • @reactninja6567
    @reactninja6567 3 роки тому +4

    Too good bro! keep goin.. just curious why you left clever programmer?

  • @milad8436
    @milad8436 2 роки тому

    This is exactly what I was looking for

  • @phanthanhtao9492
    @phanthanhtao9492 3 роки тому

    Hi sonny, i from vietnames.
    I really admire you, I learned a lot about REACT and UI framework CSS from your channel
    Thank You so much

  • @hangout7081
    @hangout7081 3 роки тому

    I really love the thumbnail

  • @rogeliovazquezmejia2929
    @rogeliovazquezmejia2929 3 роки тому

    Your content is awesome! I really love everything you do!
    it's unfortunate to see only 3000 views when you content is unique. A hug bro.

  • @connorholm2859
    @connorholm2859 3 роки тому +1

    Thanks for the vid! I followed along and everything was super beneficial! I'm stuck on deploying the application and think a video on it would be super helpful. Not necessarily for this example but just the concept of deploying a react/next.js app is super educational. Thanks again fo the vid

  • @ThugLifeModafocah
    @ThugLifeModafocah 2 роки тому

    Man, this is awesome content. I really appreciate, you are making my life better. Thank you.

  • @vikranthkanumuru8900
    @vikranthkanumuru8900 3 роки тому

    Love both your content and your monetization strategy, novel and effective, you have my sincere admiration

  • @JoglosemarFoodie
    @JoglosemarFoodie 3 роки тому

    Thumbnail is very hilarious 🤣

  • @bilegtni5202
    @bilegtni5202 3 роки тому +1

    you are awesome dude impressive omg

  • @markyt4960
    @markyt4960 3 роки тому +1

    This is such a nice video and I learnt a lot in this video. But the thing where I got stuck is that how do I deploy this app ?

  • @kawsarkhan5876
    @kawsarkhan5876 3 роки тому

    You guy just amusing❤️❤️❤️ Love u a lot man❤️❤️

  • @denishammad9321
    @denishammad9321 3 роки тому +2

    Outstanding work Papa react

  • @DiazGunturFebrian
    @DiazGunturFebrian 3 роки тому

    You are legend. I am gonna try it by following your videos 👍

  • @mathefeitosa
    @mathefeitosa 3 роки тому

    This way of teaching is awesome! I liked it! Learned a lot!

  • @derealratos6332
    @derealratos6332 2 роки тому +1

    those of you stock the provider import if you're using latest nextauth
    This is coded with typescript(.tsx files instead of .js)
    here is my code
    import { SessionProvider } from "next-auth/react"
    import type { Session } from "next-auth"
    function MyApp({ Component,pageProps:{ session, ...pageProps } }: AppProps) {
    //const status=getSession()
    return


    }
    export default MyApp
    extras
    onClick={()=>signIn()}
    Facebook component
    import { Session } from 'next-auth'
    session:Session as loginprops

  • @magiccubing2587
    @magiccubing2587 3 роки тому

    PAPA never disappoints

  • @danielrocha5774
    @danielrocha5774 3 роки тому

    Great, dude. You are awesome
    Thanks for all the knowledge you spread

  • @Hamza-ll3uf
    @Hamza-ll3uf 3 роки тому +2

    Hi Sonny! Could you do a video talking about best practices for storing data in the real-time database?

  • @mrcrypticx1
    @mrcrypticx1 2 роки тому

    damn, i see how much of a toll this puts on you man!

  • @crakton
    @crakton 3 роки тому

    I feel like crying for missing this build #papafam.

  • @AJQuickShow
    @AJQuickShow 3 роки тому

    Awesome bro clean and elegant ♥️♥️

  • @moncere
    @moncere 3 роки тому

    This is dope man 🔥

  • @y.m.o6171
    @y.m.o6171 3 роки тому +1

    hey man such a big fan of your channel man ! can you please pretty please do a clone of something like figma ? just the layouts and the resizing sidebars and what have you !

  • @erickgutierrez6471
    @erickgutierrez6471 3 роки тому +1

    I really like how clean you make the code, I want to ask you something, is there a way to load faster the images from the post?

    • @SonnySangha
      @SonnySangha  3 роки тому

      Hey thanks!! Yes! Look into caching technique!

  • @NeverCodeAlone
    @NeverCodeAlone 3 роки тому

    You are so awesome with a lot of power. What do you think how long it takes to handle tailwind out of the box without struggeling in details?

  • @youtube.example
    @youtube.example 2 роки тому

    You are a great man

  • @MementoNeli
    @MementoNeli 3 роки тому

    YESSSSSSSSSSSS, another daily.dev user \o/

  • @emirhankarahan2931
    @emirhankarahan2931 3 роки тому +1

    We're waiting signal 2.0 with 1-1 messaging!!

  • @AntonioSantos-ve6zv
    @AntonioSantos-ve6zv 3 роки тому

    Awesome content, as usual!

  • @harshahirushan2544
    @harshahirushan2544 3 роки тому

    I love you so much dude thanks for helping me this was fantastic ............ I have never stopped this is my first time one we meet in a live there i got you thanks😍😍😍😍😍😍

    • @SonnySangha
      @SonnySangha  3 роки тому +1

      That is great dude!!! Keep on going and thank you so much for the support! 💪🏽💯

    • @harshahirushan2544
      @harshahirushan2544 3 роки тому +1

      @@SonnySangha finally i found my coding hero .

  • @joaosouza5218
    @joaosouza5218 3 роки тому +1

    Isso sim que é capricho. Adorei!

  • @balamurugans5711
    @balamurugans5711 3 роки тому

    bro the effort you put is absolutely amazing keep rocking sonny !! #papa fam

  • @haidinurhadinata2661
    @haidinurhadinata2661 2 роки тому

    thank you so much for your video, it's very helpfully

  • @pjos2981
    @pjos2981 3 роки тому

    Pls make a mern stack course as per industry standard ,most in youtube are just simple applications

  • @utkarshsharma5202
    @utkarshsharma5202 3 роки тому

    1) Can I add it in my resume?
    2) Will it make resume impressive?
    3) Is it a good idea to make resume impressive to make clone of facebook, amazon, whatsapp, uber, netflix etc..?
    4) Can someone suggest me project ideas which make resume outstanding?

  • @bilalfakhro1363
    @bilalfakhro1363 3 роки тому +2

    thank you Sonny for how you explain everything in details....
    I tried to do the same as you and build this app from scratch but I bumped to a smal issue and I was wondering if there is someone else getting this error from facebook saying that
    Facebook has detected that your App isn't using a secure connection to transfer information.
    Until Your App updates its security settings, you won't be able to use Facebook to log in to it.
    Anyone?

    • @justinsospeter
      @justinsospeter 3 роки тому +1

      I bumped into that right now, did you find a solution?

    • @le_matur
      @le_matur 3 роки тому

      Same here!!

    • @ri7az
      @ri7az 3 роки тому

      @@le_matur delete the FB apps, start fresh and make a new app don't add anything to it, now create a new test and then add the login product to the test app instead then it will work just fine.

  • @nested9301
    @nested9301 3 роки тому

    this guy build everthing with react js ifeel like the next video will be building react js with react js xD

  • @sudipjs
    @sudipjs 3 роки тому

    Let's go sonny thanks for awesome stuff 😁

  • @Business_101
    @Business_101 2 роки тому

    Hello - you are amazing! Are you based in London?

  • @aminzuar5767
    @aminzuar5767 Рік тому

    Nice one 👍👍

  • @ho389
    @ho389 3 роки тому +1

    I also want to see a live performance on TypeScript!

  • @sheilgandhi
    @sheilgandhi 3 роки тому +6

    Hey Sonny,
    I had some trouble deploying this Web App. I think it's has something to do with the Facebook Developer settings. Would love some help or a quick tutorial.
    Thank You

    • @Groot-yl1lf
      @Groot-yl1lf 3 роки тому

      Hello @Sheil Gandhi. Did you get a solution to this.

    • @sheilgandhi
      @sheilgandhi 3 роки тому

      @@Groot-yl1lf No I haven't

  • @hauladv
    @hauladv 3 роки тому

    thanks so so so so so much Pro....... love you so much

  • @Billiam112
    @Billiam112 3 роки тому

    Really great content, thanks! However, can you get stats on your viewers and the screen/device they use? If so, and if multiple of us is on smaller screens like phones (like myself) watching, you can really bump the font size to the double. On phone it is really hard to see (one has to really focus hard to see). As a "UA-cam phone watcher", it's a common issue, unfortunately. But if you have the stats of your viewers, perhaps something to look into? Thanks again for great content. 😊

  • @didkei
    @didkei 2 роки тому

    If you want to force a light theme to the Facebook Login add this code to the pages/api/auth/[...nextauth].js file. Code's the following: theme: {
    colorScheme: 'light', // "auto" | "dark" | "light"
    }

  • @billwhite515
    @billwhite515 2 роки тому

    was curious if you could update firebase to 9.6ish and modify so that the firebase stuff still works because I had to use 8.5.0 to get it to work like yours. Great Content

  • @rtemis9016
    @rtemis9016 3 роки тому +2

    Hey Sonny !!
    What's the song in the intro?
    Btw, love this tutorial

  • @shopsrise5137
    @shopsrise5137 3 роки тому

    What a wonderful content. Thnku PAPA REACT.

  • @diszajatnika
    @diszajatnika 3 роки тому

    Amazing trick... I like this chanel

  • @jafar3177
    @jafar3177 3 роки тому +1

    Hi bro. All of your videos are really excellent. If you make us video how to build SpaceX website with React. It will be insane and excellent. Bro

  • @ajsliv5650
    @ajsliv5650 3 роки тому +1

    HI, Sony Thanks for this amazing project: Mashallah .. from PK❤🚀🚀

  • @mdsaiful6294
    @mdsaiful6294 2 роки тому +1

    Nice video good video

  • @davidomar742
    @davidomar742 3 роки тому

    Im broke right now so gonna do some uber eats delivery so I can pay for your membership course.

  • @brahmanandamohanty7870
    @brahmanandamohanty7870 3 роки тому

    Waiting for the Next JS Version of the same. 😁

  • @codeitraw5241
    @codeitraw5241 2 роки тому

    I’m curious on how you know all of these? I wanna know how to study like you

  • @shalommedia6285
    @shalommedia6285 3 роки тому

    I am cruising nicely with my Boy Sonny BIG UP DUDE

  • @deanbarber8851
    @deanbarber8851 3 роки тому +3

    Hey Sonny,
    I couldn't deploying this Web App. I have been stuck at solving this problem for past three days. Facebook is continuously blocking all domain names from vercel. It is saying "Can't Load URL: The domain of this URL isn't included in the app's domains.' Can you please give us a quick tutorial on how to deploy the app or point me to the right direction on how to solve it. Thank you

    • @WeryZebra
      @WeryZebra 3 роки тому

      try adding your new domain to face book devloper counsler something so it will be authorized domain then you can use auth, i have used google...but i think that might be a
      solution

  • @mamtaagarwal1009
    @mamtaagarwal1009 3 роки тому +4

    In this video, you had to focus on laptop optimization more than code optimization 😂🤣.

  • @hafidjs2974
    @hafidjs2974 3 роки тому

    hello i'm from indonesia,, you're amazing bro

  • @ProgrammingNewbie
    @ProgrammingNewbie 3 роки тому

    No Tech Issue Is Gonna Defeat Us Today! - Sonny Sangha - LFG!!!!

  • @TheBoglodite
    @TheBoglodite 2 роки тому

    What's the advantage of using Firestore as opposed to having your own backend?

  • @deepakdadlani9284
    @deepakdadlani9284 3 роки тому +1

    Please please bring MERN stack project.. Big fan from INDIA i love your teachings ..please bring one huge project on MERN stack😀

  • @woaken
    @woaken 3 роки тому +2

    Can you make a tutorial on making Clone of the App to be able to connect with the site coded?

    • @woaken
      @woaken 3 роки тому +1

      Oh and thank you so so so much for creating this Clone, I forgot to mention my bad!!! 🤦🏽 peace to you! ✌🏼

  • @ossamaelidrissi2624
    @ossamaelidrissi2624 2 роки тому +1

    Hi guys , I build an app with next js and mysql but i don't know how to store links of images in the db , when i store the image directly it take more space

  • @soledad02daniel
    @soledad02daniel 3 роки тому

    Dope video. Did anyone launched the project? I'm curious where I can get public privacy url for Facebook and Data deletion terms.

  • @flashbacksm7067
    @flashbacksm7067 3 роки тому +5

    Love Bro .

  • @igdev6095
    @igdev6095 3 роки тому

    Love u from Vietnam

  • @jeevanstha57
    @jeevanstha57 3 роки тому

    please make a video on uploading multiple image and render according to user in react js with firebase