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.
mrshawnhum
/
chat-app
Chat application made with React and Socket.io-client for front-end and Nodejs, Express, and Socket.io for back-end
React Chat Application
Live site - https://react-chat-page.netlify.app
Client
Client folder is utilizing create-react-ap and socket.io-client. You must use Yarn Start to load the application.
Server
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 Socket.io.
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 Dev.to)
Front-End
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.
Back-end
For my back-end, I used Nodejs with its framework Express. Socket.io 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)
Quick update - thinking for all the support! I am new into Dev.to 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!
Thanks, Shawn, this is great!
did you find any nice front-end libraries for chat widgets?
Update - The site is live again if you would like to check out the live site! It was a deployment issue
Some comments may only be visible to logged-in visitors. Sign in to view all comments.