You are currently viewing Build a chat application like Slack – React / JavaScript Tutorial

Build a chat application like Slack – React / JavaScript Tutorial



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

source

This Post Has 31 Comments

  1. Anoop Singh

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

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

  3. ma-ee-ku

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

  4. ehnydeel84

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

  5. ma-ee-ku

    Does anyone know how to deploy this to heroku?

  6. Terence Blue

    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?

  7. santosh dahal

    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

  8. santosh dahal

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

  9. santosh dahal

    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

  10. javapda

    was getting errors using the authenticate code

  11. javapda

    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. VIVEK singh

    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)

  13. DO IT!

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

  14. milan barot

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

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

  16. Ajay Kumar Reddy

    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 .

  17. Navaneeth

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

  18. Ythalo Saldanha

    Thank you very much.
    This is how to do a tutorial. Quickly and objective.

  19. Zev Posner

    anyone know who the instructor is in this vid?

Leave a Reply