Deprecated: Function create_function() is deprecated in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/plugins/wp-automatic/wp-automatic.php on line 70
Build a chat application like Slack – React / JavaScript Tutorial | D4mations.com
  • Monday , 26 October 2020

Build a chat application like Slack – React / JavaScript Tutorial

Code Canyon



Learn how to build a complete chat application with typing indicators, “who’s online list”, and message history in this React / JavaScript tutorial.

In this screencast, you’ll learn how to build a team communication chat application similar to Slack using React on the front-end and Chatkit on the back-end. Sign up here: https://pusher.com/chatkit

▼ Follow Booker ▼

on Twitter: https://twitter.com/bookercodes
on GitHub: https://github.com/bookercodes

▼ Links (in the order they’re mentioned)▼

Starter template: https://github.com/bookercodes/react-slack-clone-starter-template
Complete code: https://github.com/pusher/build-a-slack-clone-with-react-and-pusher-chatkit
Step by step written tutorial: https://github.com/pusher/build-a-slack-clone-with-react-and-pusher-chatkit
Chatkit Slack group: https://feedback-beta.pusher.com/

Learn to code for free and get a developer job: https://www.freecodecamp.com

Read hundreds of articles on programming: https://medium.freecodecamp.com

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

Original source

3d Ocean

Related Posts

27 Comments

  1. Stoony Games
    January 6, 2020 at 08:50

    I like you're new Next App (p) 47:40

  2. Delusion
    January 6, 2020 at 08:50

    I know your using vim but how is your line number like 1 0 then 1 again

  3. Ajay Kumar Reddy
    January 6, 2020 at 08:50

    When I click submit and check the Network tab,the Protocol and Response are empty and it says Pending and that never goes away.Can someone help me?? Thanks .

  4. James Leung
    January 6, 2020 at 08:50

    I like how you're using Vim on a Mac lol

  5. Santiago Piñero Freitas
    January 6, 2020 at 08:50

    Anyone facing this

    index.js:2178 Could not parse the token. More information can be found at https://docs.pusher.com/errors/authentication/jwt/invalid. Error object: e {statusCode: 401, headers: {…}, info: {…}}

  6. Dennie Nguyen
    January 6, 2020 at 08:50

    Seriously slow down! I thought FCC was geared towards beginners? Why is the instructor rushing through the tutorials? And the aggressive typing noise in the background really does not help either. Perhaps creating more quality tutorials would help to attract more developers to this video. Sloppy job.

  7. Milan Barot
    January 6, 2020 at 08:50

    >curl -H "Content-Type:application/json" -X POST -d'{"username":"foo"}' http://localhost:3001/users doesnt establish connection. Cant see users field in the console when i type in a "username"

  8. Aethletiic
    January 6, 2020 at 08:50

    What file do i open to start it lol

  9. DO IT!
    January 6, 2020 at 08:50

    No working if statement (if (error.error_type === "services/chatkit/user_already_exists") ) everytime goes to else statement

  10. VIVEK singh
    January 6, 2020 at 08:50

    const chatManager= new Chatkit.ChatManager({
    instanceLocator:"v1:us1:xyz",
    userId:"HK",
    tokenProvider:new Chatkit.TokenProvider({
    url:"http://localhost:8081/authenticate"
    })
    });
    chatManager.connect().then((currentUser)=>{
    console.log("current User",currentUser)})
    .catch((error)=>{
    console.error(error)})

    while running the above code from the client

    to the node/express server:-
    app.post("/authenticate",(req,res)=>{
    const {grant_type}=req.body;
    res.json(chatkit.authenticate({grant_type,userId:req.query.user_id}));
    });

    throws an error:-

    Logger.ERROR: error establishing presence subscription:
    Could not parse the token. More information can be found at https://docs.pusher.com/errors/authentication/jwt/invalid. Error object:
    {…}
    headers: Object { "Request-Method": "SUBSCRIBE" }
    info: {…}
    error: "authentication/jwt/invalid"
    error_description: "Could not parse the token"
    error_uri: "https://docs.pusher.com/errors/authentication/jwt/invalid"
    proto: Object { … }
    statusCode: 401
    proto: Object { … }

    Can someone help me out fixing the error.
    Note:- I provided the correct "instanceLocator" in my application (not the one mentioned above)

  11. javapda
    January 6, 2020 at 08:50

    needed to use the following authenticate code: app.post('/authenticate', (req, res) => {
    const { grant_type } = req.body
    console.log(req.query.user_id)
    console.log(grant_type)
    let token = chatkit.authenticate({grant_type, userId: req.query.user_id});
    console.log(token);
    res.status(token.status)
    .send(token.body);

    })

  12. javapda
    January 6, 2020 at 08:50

    was getting errors using the authenticate code

  13. santosh dahal
    January 6, 2020 at 08:50

    I figured out the problem n fixed it… I added couple more features to it… I made it possible to change chat room for more flexible convo…i do want to add personal conversation feature… I'm not sure how to do it though if you can help i would appreciate

  14. Carlos Alfredo
    January 6, 2020 at 08:50

    Nice tutorial! What keyboard did you use for thia tutorial?

  15. santosh dahal
    January 6, 2020 at 08:50

    also i used usercameonline however when i login first it doesn't record that…. how do i solve this problem

  16. santosh dahal
    January 6, 2020 at 08:50

    I m having a couple of problems here…first when I tie then to chatManage.connect to get currentRoom i get undefined so i had to attach then to currentUser.subscribetoroom…..i get all the user list that way however i cant seem to get user presence…. how do I send user state…. also when

  17. Terence Blue
    January 6, 2020 at 08:50

    Every time I try to run the code at the same time you do in the video after a little bit of coding all I see is "Slack" on my HTML page. Anyone else have this issue?

  18. ma-ee-ku
    January 6, 2020 at 08:50

    Does anyone know how to deploy this to heroku?

  19. ehnydeel84
    January 6, 2020 at 08:50

    Really like your bash and vim settings. Is there any tutorial or git-repo for the configuration of vim and bash?

  20. ma-ee-ku
    January 6, 2020 at 08:50

    You really hate your keyboard don't you. Thanks for an amazing tutorial!

  21. Stephen St.Pierre
    January 6, 2020 at 08:50

    Really cool! One question though, why use constructor and .bind instead of just using arrow functions? Arrow function methods save you 4 lines off the bat and 1 line for each additional method.

  22. Winter Eh
    January 6, 2020 at 08:50

    1:301:50 one of the best most relevant 20 second tutorial

  23. z xia
    January 6, 2020 at 08:50

    awesome, thank you!

  24. Marlon Johnson
    January 6, 2020 at 08:50

    Cool Stuff

  25. Max Synenko
    January 6, 2020 at 08:50

    Интересно было)

  26. Anoop Singh
    January 6, 2020 at 08:50

    Thanks sir

  27. Anoop Singh
    January 6, 2020 at 08:50

    Is we create uber like app with react js please help me for making me an uber like application..

Leave A Comment

You must be logged in to post a comment.