Chat Room

  • A chat application that allows users to message others in the same chat room.
  • A Progressive Web App (PWA) built with web socket.
  • Works in real time on both desktop and mobile sites.
  • Open multiple instance of the live site and enter the same chat room to start messaging.
Feature Highlight
  • Allow multiple users to connect to the same chat room.
  • Prevent duplicated usernames.
  • Broadcast the change in users in the chat room.
  • Use React Hook to minimize reloading by monitoring the state of certain elements.
Next Update
  • User Authentication with JWT or Express Session.
  • Database that holds recent chat log for each room
  • User profiles, connect to database to store recent chat rooms, friends, and etc.
Image

Components Used

  • HTML5
  • CSS3
  • Javascript
  • Node.js
  • Express.js
  • Socket.io
  • React.js
  • Bootstrap
  • Heroku
  • Git

Live Code