React Chat App

  • This chat app is built with React and GraphQL. React js allows developers to create fast, simple and scalable web applications that use changeable data, without reloading the page. A chat app is a great example to show the advantage of React. I created this app with GraphQL which is also developed by Facebook and handles all the backend jobs for me. I used create-react-app to set up this project initially and used command lines to set up a GraphQL instance and finally make it functioning.

  • React Chat App
  • So when user opens the site, they will need to type in their Name to start chatting and their name will be shown on the left section. The application will automatically fetch the chat history from database and display it in the interface once user opens the site. When user type some message and send it, the username, message, current time will be written into database, so users can see their messages any time later in the interface.

  • Another function I add is Change Theme. This function allows users to change colors of the interface so as to create a better user experience. Currently, it only has two theme choice, either dark or bluish color. Users can choose their preference anytime.

  • React Chat App
  • For future improvements, I’d like to add more functions like user authentication, list of online users, 1 on 1 chatting, etc. Chat app is a very fun project to me, because it is what we actually use everyday and it’s interesting to know how does every function work.

  • Here is the Github repo for this project. I used github page to deploy this project.

Live Demo
  • React 16
  • GraphQL
  • HTML5/CSS3