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

Рет қаралды 458,399

Күн бұрын

🚨 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...
Join me as I build a completely responsive real-time Facebook 2.0 with TAILWIND CSS (with 2.1 JIT!) & NEXT.JS with Image Upload functionality and Powered by Firebase!
🎙️ 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:25 Build Showcase
03:58 Initialising the Build
09:53 Setting Up Tailwind CSS
15:21 Building the Header Component
19:24 Building the Left Side of the Header
39:01 Building the Center of the Header (Header Icon Component)
57:41 Building the Right Side of the Header (1/2)
1:04:37 Implementing NextAuth.js
1:18:14 Building the Login Component
1:27:26 Building the Right Side of the Header (2/2)
1:31:07 Building the Sidebar Component
1:35:33 Building the SidebarRow Component (with Intense Debugging)
1:48:07 Building the Feed Component
1:49:13 Building the Stories Component
1:51:09 Building the StoryCard Component (with Intense Debugging)
2:15:32 Building the InputBox Component (1/2)
2:31:26 Implementing Cloud Firestore
2:35:27 Building the InputBox Component (2/2)
2:59:31 Building the Posts Component
3:02:12 Building the Post Component
3:16:16 Building the Widgets Component
3:23:06 Building the Contact Component
3:26:40 Almost Final Build Demo
3:28:50 Implementing Additional Server Side Rendering Step
3:35:03 Final Build Demo
3:37:49 Outro
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Facebook 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 #tailwindcss #nextjs

Пікірлер: 438

@SonnySangha Жыл бұрын

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

@ahmadabdulkadir245 Жыл бұрын

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

@shwetadeshmukh7229 3 жыл бұрын

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.

@LatinoWebStudio 2 жыл бұрын

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.

@rkcoder 3 жыл бұрын

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!

@varunbhatt35 3 жыл бұрын

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

@dragonburger5676 3 жыл бұрын

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

@handa1780 2 жыл бұрын

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

@knightrider192 2 жыл бұрын

So far the Best Tutorial video i have ever seen on KZfaq 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

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

@rogeliovazquezmejia2929 2 жыл бұрын

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.

@TharunKumaar 2 жыл бұрын

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!

@pranaytejachethireddy9035 2 жыл бұрын

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 .

@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

@connorholm2859 2 жыл бұрын

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

@andresgardiol8111 2 жыл бұрын

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

@mathefeitosa 3 жыл бұрын

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

@danielrocha5774 3 жыл бұрын

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

@joaosouza5218 2 жыл бұрын

Isso sim que é capricho. Adorei!

@thetutorialdoctor 2 жыл бұрын

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

@rangabharath4253 3 жыл бұрын

Awesome as always sonny. Keep rocking 😎👍

@balamurugans5711 3 жыл бұрын

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

@ThugLifeModafocah 2 жыл бұрын

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

@vikranthkanumuru8900 2 жыл бұрын

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

@harsh_nandan 3 жыл бұрын

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

@moncere 3 жыл бұрын

This is dope man 🔥

@mariacamilabaronamartinez6748 3 жыл бұрын

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 2 жыл бұрын

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

@doladonald7728 2 жыл бұрын

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

@theetechverge7723 3 жыл бұрын

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

@reactninja6567 3 жыл бұрын

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

@tuanlam999 2 жыл бұрын

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

@TheBoglodite 2 жыл бұрын

Agreed

@Phas0ruk Жыл бұрын

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

@SonnySangha Жыл бұрын

Hell yeah dude!!

@shopsrise5137 3 жыл бұрын

What a wonderful content. Thnku PAPA REACT.

@AntonioSantos-ve6zv 3 жыл бұрын

Awesome content, as usual!

@parshvarunwal4559 3 жыл бұрын

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

@adnan_asaad Жыл бұрын

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

@always-shaiva 2 жыл бұрын

Thank you my guru for this wonderful hardwork

@milad8436 2 жыл бұрын

This is exactly what I was looking for

@kawsarkhan5876 2 жыл бұрын

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

@sudipjs 3 жыл бұрын

Let's go sonny thanks for awesome stuff 😁

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

@DiazGunturFebrian 2 жыл бұрын

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

@flashbacksm7067 3 жыл бұрын

Love Bro .

@y.m.o6171 3 жыл бұрын

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 !

@bilegtni5202 3 жыл бұрын

you are awesome dude impressive omg

@Billiam112 2 жыл бұрын

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 "KZfaq 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. 😊

@ajeet_jaiswal 3 жыл бұрын

Awesome bro clean and elegant ♥️♥️

@brunotravesi7385 8 ай бұрын

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 👍

@teguhbadrusalam295 2 жыл бұрын

Sonny is a Legend!!!

@spinspin3523 Жыл бұрын

this guy is a legend

@haidinurhadinata2661 2 жыл бұрын

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

@Manjaco 3 жыл бұрын

the NextAuth feature is insane !!!

@magiccubing2587 2 жыл бұрын

PAPA never disappoints

@ajsliv5650 3 жыл бұрын

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

@pokerfaced8139 2 жыл бұрын

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 .

@_jihad_hasan Жыл бұрын

You are a great man

@ho389 3 жыл бұрын

I also want to see a live performance on TypeScript!

@chinmaymehta8200 3 жыл бұрын

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 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 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 2 жыл бұрын

This helped, thanks!

@denishammad9321 3 жыл бұрын

Outstanding work Papa react

@mrcrypticxdev 2 жыл бұрын

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

@markyt4960 2 жыл бұрын

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 ?

@erickgutierrez6471 3 жыл бұрын

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 3 жыл бұрын

Hey thanks!! Yes! Look into caching technique!

@abderrahimslam2892 3 жыл бұрын

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 Жыл бұрын

But you can apply as a frontend devloper.

@crakton 3 жыл бұрын

I feel like crying for missing this build #papafam.

@MementoNeli 2 жыл бұрын

YESSSSSSSSSSSS, another daily.dev user \o/

@haula08 2 жыл бұрын

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

@harshahirushan2544 2 жыл бұрын

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 2 жыл бұрын

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

@harshahirushan2544 2 жыл бұрын

@@SonnySangha finally i found my coding hero .

@hangout7081 2 жыл бұрын

I really love the thumbnail

@twenyone5034 2 жыл бұрын

Anyone knows what's the solution for ---> "[next-auth][warn][NO_SECRET]" when clicking on the sign-in with facebook button this one above showing up on the console.. btw Sonny u are a legend gold videos!

@abhibhattarai1748 2 жыл бұрын

i am getting the same issue. Were you able to figure it out?

@twenyone5034 2 жыл бұрын

@@abhibhattarai1748 no bro but Ill try to rebuild it again next week

@chinmayeegowda5867 14 күн бұрын

@@twenyone5034did you got that?

@Groot-yl1lf 2 жыл бұрын

Hey Sonny, I have a problem with setting up a clone at the facebook developers part. could use your help, Thanks. Otherwise, really nice content, I love it.

@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

@soledad02daniel 2 жыл бұрын

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

@arjayarjay8856 2 жыл бұрын

Awesome !!

@aminzuar5767 9 ай бұрын

Nice one 👍👍

@diszajatnika 2 жыл бұрын

Amazing trick... I like this chanel

@Hamza-ll3uf 3 жыл бұрын

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

@giorgos-4515 3 жыл бұрын

great work,tailwind css is so helpful but it feels like it deprives the code of readability by semantics using bem normally.also when using tailwind are heroicons better than material ui ones? which of the two is your personal preference?

@jafar3177 3 жыл бұрын

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

@JoglosemarFoodie 2 жыл бұрын

Thumbnail is very hilarious 🤣

@TheBoglodite 2 жыл бұрын

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

@rtemis9016 2 жыл бұрын

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

@huyha2490 2 жыл бұрын

same question

@raygan3 3 жыл бұрын

what window manager are you using to resize your windows?

@marwajomaa7594 3 жыл бұрын

Hi Sonny, can u make something using next and redux with next-auth?! Thanks

@sheilgandhi 3 жыл бұрын

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 2 жыл бұрын

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

@sheilgandhi 2 жыл бұрын

@@Groot-yl1lf No I haven't

@Business_101 2 жыл бұрын

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

@ThanHtutZaw3 Жыл бұрын

Why we need to use Next-Auth for auth system .Can we do auth without Next-Auth libaries?What is the key of using Next-Auth. I feel like writing react app without knowing javascript

@debarajstha 2 жыл бұрын

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

@linusMoses01 3 жыл бұрын

amazing

@igdev6095 3 жыл бұрын

Love u from Vietnam

@ossamaelidrissi2624 2 жыл бұрын

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

@bilalfakhro1363 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 2 жыл бұрын

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

@le_matur 2 жыл бұрын

Same here!!

@ri7az 2 жыл бұрын

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

@krisztiankaposi8054 Жыл бұрын

Hi folks , can someone tell me before i start building? :D whats the different between this build and the one that Sonny built 2 years ago at the other live session? the contact bar and media querry?

@TheBrokersNY 2 жыл бұрын

Hi Sonny; Thank you for great Tutorial but your yarn add next -auth command giving error and not compatible with Node- 17.0.1 version (1:06:45) The error says "The engine "node" is incompatible with this module. Expected version "^12.19.0 || ^14.15.0 || ^16.13.0". Got "17.0.1"! Any suggestions to avoid this problem !

@accountsecurity8971 3 жыл бұрын

hey sony? i want to learn the change profile picture functionality can you show us how to do ut in react

@woaken 2 жыл бұрын

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

@woaken 2 жыл бұрын

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

@stefanpfadt4353 2 жыл бұрын

Holy crappers! Is there a less difficult way to make this "create story" thing work - as a widget/plugin for newbies like myself? lol

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

@TechUpskill 2 жыл бұрын

👍👍👍Thank you

@jinsworld189 2 жыл бұрын

do you have any courses for nextauth.js?? you only have social login functionality in youtube videos(and it does not stores user data on firebase). Id like to implement login function with Firebase(Email & password login).