🔴 Let's build SLACK 2.0 with REACT.JS! (REDUX, Styled components & Firebase Hooks)

🚨 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 SLACK 2.0 REACT.JS Clone! (With Redux, styled components & NEW Firebase HOOKS functionality)
🎙️ 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
01:20 Build Showcase
03:03 Building Slack
05:21 Setting up Firebase
08:42 Starting the Build
14:25 React Router
23:34 Styled Components
32:22 Building the Header Section
53:36 Building the Sidebar Section
1:41:45 Using Redux for Sidebar
1:54:15 Building the Chat Section
2:06:44 Building the Chat Box
2:32:25 Building the Messaging Section
2:46:56 Building the Login
3:13:58 Deploying the App
03:18:00 Final Build Demo
03:19:55 Outro
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Slack 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 #developer #slack

Пікірлер: 246

  • @SonnySangha
    @SonnySangha Жыл бұрын

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

  • @yashchauhan5710
    @yashchauhan57103 жыл бұрын

    the most loved and most valued react dev on youtube ...tyyy u changed my life , I finally got a job

  • @andyb9990
    @andyb99903 жыл бұрын

    Imma start calling Sonny 'The Mailman' because he always delivers! Thanks Sonny, I needed to work on styled components more.

  • @govindbchandran8681

    @govindbchandran8681

    3 жыл бұрын

    Or we could call him PostMan 😉

  • @alaahashem8900

    @alaahashem8900

    2 жыл бұрын

    can you help me bro , when I write that, const [ user, loading ] = useAuthState(auth); this message is shown to me : auth.onAuthStateChanged is not a function i don't why

  • @DirectionerMallou
    @DirectionerMallou3 жыл бұрын

    I love the energy and the content , very clear explanations :D thank youuuu

  • @awakenwithoutcoffee
    @awakenwithoutcoffee2 ай бұрын

    now its ON! love the energy.

  • @Ziva523
    @Ziva5233 жыл бұрын

    Good job. just finished rebuilding. thank you for your sevices

  • @nardopolo101
    @nardopolo1012 жыл бұрын

    Not even 10 minutes in and the energy is definitely up. You've got me for the long haul on this one.

  • @Vivekkumar-sy6te
    @Vivekkumar-sy6te3 жыл бұрын

    Love this clone man. It taught me a lot Thanks bro

  • @towaerio3355
    @towaerio33553 жыл бұрын

    That was one of the best tuts I ever seen. Gj Sonny!

  • @superjke718
    @superjke7182 жыл бұрын

    Amazing energy. I'm an experienced backend developer however relatively new to React - just over halfway and loving this build so far. Keep up the good work Sonny.

  • @sad6368
    @sad6368 Жыл бұрын

    Thanks man!! 🙏

  • @techware4649
    @techware46493 жыл бұрын

    It's a Good move to do your own thing, your fire is burning hot enough to last a lifetime, keep on keeping on!

  • @towaerio3355
    @towaerio33553 жыл бұрын

    Damn dude! This is awesome!

  • @sad6368
    @sad6368 Жыл бұрын

    Helped me alot.. Thank you so much Sonny 🙏

  • @irakiselyova4446
    @irakiselyova4446 Жыл бұрын

    Thank you! The best React app making tutorials on KZread!

  • @DrewNorman
    @DrewNorman3 жыл бұрын

    Papa FAM is the best community in the world. and we have the best teacher. Sonny you are blessed with coaching talent. Keep up this positive energy guys. I never in a million years figured I would be able to learn this stuff so fast.

  • @johngalt3526
    @johngalt35263 жыл бұрын

    Awesome dude, congrats!

  • @abhinavdhama3014
    @abhinavdhama30143 жыл бұрын

    sonny you killed it man .You are providing awesome content . Only thing got positive in my life during this corona is YOUR VIDEOS,TUTORIALS,CLONE BUILDS and now you are deleivering the styled components

  • @TheDeeStain
    @TheDeeStain3 жыл бұрын

    So happy you're on your own man! Much more efficient!

  • @sadiedickinson7151
    @sadiedickinson7151 Жыл бұрын

    Love this clone man.

  • @rikipebrianto560
    @rikipebrianto5603 жыл бұрын

    wow, awesome project

  • @changdaejung8411
    @changdaejung84113 жыл бұрын

    Amazing !! great content!

  • @nomanzafarzafar7912
    @nomanzafarzafar79123 жыл бұрын

    Great effort bro. Keep it up.

  • @crazeislive_cil
    @crazeislive_cil2 жыл бұрын

    Hey sunny. Pretty awesome stuff. You are literally helping lot developers to make there careers. I have a small request, if you get some time please make a detailed video on ReactJs testing. I know its very important, and I am having pretty tough time on it, and I believe so does other developers. Thanks man for everything you are giving for free.

  • @velhobodegueiro7717
    @velhobodegueiro77173 жыл бұрын

    Its great tô see you back on the online mentor track mate.... You are the One and only Mr Sonny! All the best from Brazil Man.... Cheers

  • @shivankpal
    @shivankpal2 жыл бұрын

    Dude you are the best Thanks man

  • @weixing8985
    @weixing89855 ай бұрын

    Thanks for doing this for free! I've been working as a full stack engineer for years and still can learn a lot from your video!

  • @star3am
    @star3am2 ай бұрын

    Your videos are so cool and very helpful thank you! Let's crush this thing!

  • @nickbricewolfgang5857
    @nickbricewolfgang58572 жыл бұрын

    We really love PAPA React

  • @rohandeysarkar8443
    @rohandeysarkar84433 жыл бұрын

    whenever I get stressed out :( , I watch one of ur videos and code. Stress gone :)

  • @jayswaldisha4811
    @jayswaldisha48113 жыл бұрын

    Ultimate content

  • @devsmith948
    @devsmith948 Жыл бұрын

    Really really amazing video. I am sure it is so helpful to all developer. Thanks. Sonny

  • @CandyMoney1000
    @CandyMoney10003 жыл бұрын

    Holy shit.... so much better than the Clever Programmer collabs

  • @HorizonHuntxr

    @HorizonHuntxr

    2 жыл бұрын

    Soo true 😂

  • @TokenTreasure
    @TokenTreasure Жыл бұрын

    Just learning new things for you Sir⭐❤

  • @AlexanderAlemayhu
    @AlexanderAlemayhu3 жыл бұрын

    Amazing!

  • @includeno
    @includeno3 жыл бұрын

    😃it's amazing!!!

  • @setimarz
    @setimarz2 жыл бұрын

    thanks for the great content! If someone is getting this error: Module not found: Error: Package path . is not exported from package try this in the firebase.js file import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; it worked for me:)

  • @kriptonVIP

    @kriptonVIP

    Жыл бұрын

    Thanks, and for correct working GoogleAuthProvider i add, import { GoogleAuthProvider } from "firebase/auth"; and replace const provider = firebase.auth.GoogleAuthProvider(); on const provider = new GoogleAuthProvider();

  • @daviddunnington6534
    @daviddunnington65343 жыл бұрын

    Sonny can you add segments to your videos? It will help us find sections we need when re watching it also helps you show up better in search results.

  • @SonnySangha

    @SonnySangha

    3 жыл бұрын

    Done dude!

  • @daviddunnington6534

    @daviddunnington6534

    3 жыл бұрын

    Thanks

  • @ThePirateAbi

    @ThePirateAbi

    3 жыл бұрын

    @@SonnySangha thank you so much

  • @MultiTelefono
    @MultiTelefono3 жыл бұрын

    Excellent video!!!!

  • @rreay724
    @rreay7243 жыл бұрын

    Man I'm so glad you broke off to do your own thing. I think it's much better quality and more focused when you're solo doing your own thing. Good for you, dude and thanks for all the content.

  • @tavcode
    @tavcode2 жыл бұрын

    ALV este bato es un crack!!!!!❤❤

  • @bhashkarjyanath2532
    @bhashkarjyanath25323 жыл бұрын

    This was the first stream that I followed and I'm pretty sure that I will comeback to watch the future streams of you...#papa_fam

  • @ganesha3559
    @ganesha35593 жыл бұрын

    Nice tutorial. Recently in our office we tried to implement a Full Office Messaging Clone with a look of Slack. Though we succeeded in making the frontend with ease (it was done in Electron React) the messaging backend engine which could perform at scale was very difficult and needed quite a lot of research. Still there are cracks! But all in all good experience. So the take away what i got was, frontend could be materialized easily but to make a full product it takes whole lot more than just a simple tutorial.

  • @awakenwithoutcoffee

    @awakenwithoutcoffee

    2 ай бұрын

    good insights! looking back what would you recommend for a dev looking to prevent these issues ?

  • @nardopolo101
    @nardopolo1012 жыл бұрын

    And good morning btw. Gotta turn in, but I did crack the 10 minute mark, and will get through it anon!

  • @perfectigbadumhe113
    @perfectigbadumhe1133 жыл бұрын

    this awesome

  • @philipphilip5472
    @philipphilip54723 жыл бұрын

    ur the best tutorials

  • @shopsrise5137
    @shopsrise51372 жыл бұрын

    Learn so much. Thnku ReactGod #PAPAfam

  • @saadsheikh9395
    @saadsheikh93953 жыл бұрын

    Man you are great 👍

  • @gabrielalejandromartinezla327
    @gabrielalejandromartinezla3273 жыл бұрын

    Honestly man, i learn so much with this project, i going to recreate more things like this, really like. Your a genius, thanks for sharing your knowledge

  • @elmoutaouakkilmohammed1432
    @elmoutaouakkilmohammed14322 жыл бұрын

    Thanks a lot

  • @subinneupane9223
    @subinneupane92233 жыл бұрын

    I have learned so much from Sonny in 2 weeks than from my Uni in 2 years LMAO

  • @DarkShadow-oh5di

    @DarkShadow-oh5di

    3 жыл бұрын

    Same tho!

  • @gerard02700

    @gerard02700

    3 жыл бұрын

    uinversity is a waste of time and money a lot of theory

  • @DarkShadow-oh5di
    @DarkShadow-oh5di3 жыл бұрын

    Wow That's Amazing 👏 😍. Expecting MS TEAMS Clone in the future. I am working on it but as a newbie I am not really getting it. I learned a lot from this tutorial. Thanks, Love from Pakistan 🇵🇰

  • @mustaneerhaider515
    @mustaneerhaider5152 жыл бұрын

    It feels good to listen Sonny building the app from the scratch without Qazi irritating. I hate those build where everytime Qazi was disturbing and talking shit. But this build is amazing.

  • @beefcakees
    @beefcakees2 жыл бұрын

    I like your no nonsense policy, but you are still chillin' .

  • @surendrajat7290
    @surendrajat72902 жыл бұрын

    nice video papa fan

  • @chelseas9974
    @chelseas99742 жыл бұрын

    Just discovered this channel. I followed a bunch of the clones last year with Clever Programmer and honestly I got extremely annoyed by the constant yelling and interrupting during the whole videos. You were constantly interrupted and it just disrupted the whole flow for me. They were almost impossible to watch and enjoy but I watched it because you and the content itself was soooo worth it. But THIS is ideal. I’m literally so excited to find your channel. This is the best of both worlds!!! Thank you so so so much for this - you were the best part of clever programmer and I wouldn’t watch without you! No hate to the clever programmer team - the content was always pure gold. Especially for free!

  • @JohnDoe-ru3um
    @JohnDoe-ru3um3 жыл бұрын

    Awesome

  • @barklaysdon376
    @barklaysdon3763 жыл бұрын

    thank you sony

  • @chiroto
    @chiroto3 жыл бұрын

    Amazed by your work but it is just the Slack interface with the chatrooms as the only functionality. I would like to see more than the chat (same as the facebook tutorial), more functionality and responsiveness! Good work on this part though, I've learned a lot, thanks!

  • @abderahimaitchraa8497
    @abderahimaitchraa84973 жыл бұрын

    thank you bro from morocco #Reactjs

  • @ani68
    @ani683 жыл бұрын

    I was bit late to the party.....but watching it now....😇

  • @TheDeeStain
    @TheDeeStain3 жыл бұрын

    I can 100% tell Sonny you are a fan of Peter Mckinnon haha Thanks for the quality content!

  • @gabrieludo3092
    @gabrieludo30922 жыл бұрын

    Interesting and Impressive good job Sonny

  • @gabrieludo3092

    @gabrieludo3092

    2 жыл бұрын

    But I've been trying to install FIREBASE all along but isn't working Any help offer is highly welcome and acceptable

  • @slavigeorgiev19
    @slavigeorgiev193 жыл бұрын

    Sonny thanks for all the free amazing value content! Just an idea for future projects - the UK Freetrade app clone - react native :)

  • @zubairlohar3557
    @zubairlohar35573 жыл бұрын

    You da best bruhh!!!!! Here is your like 👍👍👍👍👍👍👍👍 ... Infinite...

  • @brotat0
    @brotat03 жыл бұрын

    Cool man

  • @krishgarg2806
    @krishgarg28062 жыл бұрын

    1st of all, thank you so much for this tutorial. 2nd for people watching it now, firebase's sdk has changed a bit so refer to the docs and change accordingly. Update: The react-firebase-hooks is not yet compatible with firebase 9.0. Update 2: react-firebase-hooks now supports Firebase v9.

  • @apollosurfer

    @apollosurfer

    2 жыл бұрын

    As of November 3rd: React Firebase Hooks v4 has been released which supports v9 and also requires React 16.8.0 or later and Firebase v9.0.0 or later.

  • @krishgarg2806

    @krishgarg2806

    2 жыл бұрын

    @@apollosurfer yup, forgot to update the comment, thanks :)

  • @Tipsy_Nomad
    @Tipsy_Nomad2 жыл бұрын

    amazing ....

  • @twenyone5034
    @twenyone50342 жыл бұрын

    1:38:50 anyone else gets error like this one? Module parse failed: Unexpected token (190:15) You may need an appropriate loader to handle this file type. | columnNumber: 7 | } > }), channels?.docs.map(function (doc) { | return /*#__PURE__*/React.createElement(SidebarOption, { | key: doc.id,

  • @Willbreaker

    @Willbreaker

    Жыл бұрын

    i am getting same error how did you resolved it ?

  • @devinlounge
    @devinlounge3 жыл бұрын

    We can use nextJS with redux unless just react application? Because I'm with in love with nextJS... and love use with redux

  • @bandhandey2594
    @bandhandey25942 жыл бұрын

    This is my first build. Created this whole app, deployed it! It is great!!!

  • @krishgarg2806

    @krishgarg2806

    2 жыл бұрын

    how did you work around with firebase hooks? As the firebase hooks don't support firebase 9.0 yet.

  • @bandhandey2594

    @bandhandey2594

    2 жыл бұрын

    @@krishgarg2806 are you getting errors importing?

  • @bandhandey2594

    @bandhandey2594

    2 жыл бұрын

    @@krishgarg2806 yes I ran into same errors and solved exactly like you did.

  • @AshishSharma-xc3iq

    @AshishSharma-xc3iq

    2 жыл бұрын

    @@bandhandey2594 how did you solve all of this?

  • @bandhandey2594

    @bandhandey2594

    2 жыл бұрын

    @@AshishSharma-xc3iq what problems are you getting?

  • @deeerby_
    @deeerby_3 жыл бұрын

    Great content Sonny! You're amazing buddy. One question, does using the firestore instead of realtime db works for messages and instant updates?

  • @zurkik

    @zurkik

    3 жыл бұрын

    yes, it works very well for any type of chat applications.

  • @deeerby_

    @deeerby_

    3 жыл бұрын

    @@zurkik thanks for the reply mate, appreciated. So no need for realtime database at all?

  • @SonnySangha

    @SonnySangha

    3 жыл бұрын

    Hey! Thanks dude! Firestore is essentially the successor to real-time DB it has everything + more! (So yes!!!)

  • @dsuniverse132
    @dsuniverse1322 жыл бұрын

    1:37:17 Keys for the win

  • @nardopolo101
    @nardopolo1012 жыл бұрын

    Still getting the energy up, even though you had crested 200 likes by the time I clicked.

  • @abhinavdhama3014
    @abhinavdhama30143 жыл бұрын

    hope you will use serverside rendering in future videos...

  • @gokulkannan7883
    @gokulkannan78833 жыл бұрын

    Hy Sonny, How to do action on click (Inbox, Draft etc) on the sidebar

  • @bidishadas832
    @bidishadas8322 жыл бұрын

    I could do almost everything apart from the real time update of the UI on sending chat. This is because I had to fall back on the traditional way as orderBy was not available on firestore latest version. I am getting useeffect loop if I try to update data realtme on ui

  • @rahmeer655
    @rahmeer6553 жыл бұрын

    when I reach to sign in section I just found out that my header component is not rendering any solution

  • @nehakumari-ub9rs
    @nehakumari-ub9rs3 жыл бұрын

    Awesome content you made.. it would be great if there would be some contents on socket.io.

  • @emilfagerholmfrzovic6576
    @emilfagerholmfrzovic65763 жыл бұрын

    Awesome code bro! You're something special, could you add private chats between users next time? :)

  • @entertechinc
    @entertechinc11 ай бұрын

    lateest react-firebase-hooks : import {useCollectionData} from "react-firebase-hooks/firestore"; import {collection } from "firebase/firestore"; import { db } from "../firebase"; const [channels, loading, error] = useCollectionData(collection(db, "rooms"));

  • @papakalasch2423

    @papakalasch2423

    9 ай бұрын

    There was a problem with the .map-method. I got the following error: Cannot read properties of undefined (reading 'map'). ChatGPT fixed it with: {channels && channels.map((channel) => ( ))}

  • @papakalasch2423

    @papakalasch2423

    9 ай бұрын

    The function const selectChannel = () => { if (id) { dispatch(enterRoom({ roomId: id, })) } doesnt create an entry in the redux dev tools by clicking on a channel. I'm stuck here. does anyone have any ideas or can help?

  • @Anto-mi5pn
    @Anto-mi5pn3 жыл бұрын

    How much energy do you have to have to do this much consistently

  • @jandurcak8500
    @jandurcak85003 жыл бұрын

    how do you import components on click?

  • @letscode4011
    @letscode40113 жыл бұрын

    I am the newest papa fam member

  • @chiragarora1700
    @chiragarora17007 ай бұрын

    @here I want to ask I am new in React so is the Guy using Redux in this??? As i knw nothing abt redux

  • @namangupta092
    @namangupta0923 жыл бұрын

    at 1:39:03 on line 49 in the map function, how is it returning the SidebarOption element without actually providing the 'return' keyword?

  • @abdullashafi580
    @abdullashafi5803 жыл бұрын

    A real clever programmer

  • @zakialfaridzi3529
    @zakialfaridzi35293 жыл бұрын

    can you make a tutorial on how to build a google forms clone using react? as i feel its quiet a challenge for beginner react devs because it had a bit complex forms, data storing, etc

  • @fastmovies1019
    @fastmovies10193 жыл бұрын

    Go for mern stack too..why react only?we need node mongo too

  • @denilsonribeiro6862
    @denilsonribeiro68623 жыл бұрын

    Hi! I love your codes. Can you clone pipefy or trello complete responsive website?

  • @michellecastroa5340
    @michellecastroa53402 жыл бұрын

    nice

  • @jaisalshah7731
    @jaisalshah77312 жыл бұрын

    As always @Sonny Sangha is React God! What a fabulous build! Started my day with this awesome build. PS: Please share your playlist "Epidemic"

  • @SonnySangha

    @SonnySangha

    2 жыл бұрын

    Links.PapaReact.com/newsletter (simply sign up and you’ll get the playlist!)

  • @nadir2k
    @nadir2k3 жыл бұрын

    how many times are you gonna recreate slack?

  • @kartikkapoor3599
    @kartikkapoor35993 жыл бұрын

    Hey i liked it very much but what if i want to upload image along with normal text message Please guide if possible.

  • @bhashkarjyanath2532
    @bhashkarjyanath25323 жыл бұрын

    Although the messages are being added in the firebase database, but I'm unable to render and display it using React. Someone please help.

  • @TUR595

    @TUR595

    3 жыл бұрын

    Same. E: Turns out while iterating through each "doc" I used curlies instead of regular parentheses.

  • @isaacsarte2708
    @isaacsarte27082 жыл бұрын

    Hello, I am having this error even though I installed firebase: ./src/firebase.js Module not found: Can't resolve 'firebase'

  • @ajahar2270
    @ajahar2270 Жыл бұрын

    why i cannot get image with url of images &any sources plzz reply who know about it

  • @johndoe034
    @johndoe0342 жыл бұрын

    We need your music playlist, dude! :D

  • @SonnySangha

    @SonnySangha

    2 жыл бұрын

    Sign up to the newsletter and you’ll get it automatically dude!

  • @billingsway
    @billingsway3 жыл бұрын

    for most of us using windows... Please try doing some tutorials on windows systems

  • @asmitkumar9068
    @asmitkumar90683 жыл бұрын

    Sir i am getting some firebase error when i try to query db of firebase it says data() is not a function db.docs.data() is not a function i tried a lot but can't solve this😫😫😫