DEV Community

Cover image for Real-Time Chat Application with React, Nodejs, &
Shawn Humphreys
Shawn Humphreys

Posted on

Real-Time Chat Application with React, Nodejs, &

My new chat application is now live! I have been very excited to learn how you can make a messaging app similar to Discord or FaceBook Messenger.

GitHub logo mrshawnhum / chat-app

Chat application made with React and for front-end and Nodejs, Express, and for back-end

React Chat Application

Live site -

React Chat Application


Client folder is utilizing create-react-ap and You must use Yarn Start to load the application.

React Chat Application Join Page


The server is powered by Nodejs and Express. To run the server, you will need to use NPM Start. For fast real-time chat messages, the chat application is running under

Server has been deployed under Heroku.

Thank You

There are more features to be added, so stay tuned! Please feel free to reach out for any questions!

(Here is example of a good commit message for


I used React to complete the front-end of my chat application. I have also added on React-emoji to allow emojis on the messages. In a later update, I will be adding on an emoji-picker to confidently add emojis. If you fork my project, you will need Yarn Start to load the front-end.


For my back-end, I used Nodejs with its framework Express. has also been used as it is a fantastic engine that enables realtime, bi-directional communication between the client and server. The entire server file has been published to Heroku. If you would like to fork the project, you will need to run NPM Start to run the server along with the front-end.

Future Enhancements

I will be releasing new updates overtime on this project. My next update will be to incorporate MongoDB to store users' information as well as created rooms. I would also like to add in the ability switch between different rooms(similar to Discord). Ultimately, I want to do a complete design and UI/UX overhaul in the next coming updates.

Thank You

Thank you for checking out my project! I have been very excited to work on creating my chat application. Leave a comment below if you would like me to create a short tutorial on this project. Please let me know if you have any questions!

Top comments (4)

mrshawnhum profile image
Shawn Humphreys

Quick update - thinking for all the support! I am new into and this blog is almost at 100+ views which would be my first blog past 100!

After I posted this, I was fixing a bug that I found when refreshing the page and now my page seems to have a difficult time deploying. I will update on here when everything is fixed, but feel free to fork the project yourself!

cleysonlb profile image
Cleyson Leal Braga

Thanks, Shawn, this is great!

dcsan profile image

did you find any nice front-end libraries for chat widgets?

mrshawnhum profile image
Shawn Humphreys

Update - The site is live again if you would like to check out the live site! It was a deployment issue