KongkoChat – Fullstack Project

headline-image
Project: 

Chat App for desktop

Builded using :
  • ReactJS
  • Socket io
  • NodeJS
  • SASS
My Role in this project:
  • UI/UX Designer
  • Full-stack developer
Brief:

To create a simple chatting app where the users can enter the chat room with only username. Inside the chat app, the user can then join the default “General” room or create a new chat room.

In this project, both server and client side need to be created from scratch.

Result:

To log in, the users are required to enter a username that only contains numbers, uppercase or lowercase alphabet, dash and underscore. If the input entered is not valid, then the text would be turned red and users can not enter the chat app.

wrong input when using other character than the one allowed
wrong input when users entered username longer than 12 characters
login-page

Inside the chat app, users can then directly chat at the default “General” room. But they can also create (and delete) the chat room from their list. With deleting the chat room from their list, they are automatically left the room, but the chat room itself will still be available for other users inside that chat room

create-room
delete-room
indiv-chatroom
chatsample gif

To know which users are online, on the users list, the image colour correspond to the users that are active. This status is based on the current chat room the users currently in.

different colours makes it easier to see which users are currently online
Other than General room, all new chat room can be remove from the user’s room list. User can also easily change room by clicking the name of the room.

For this project, not only I developed the client side using ReactJS + Hooks and styled it using SASS, but also developed the server side using NodeJS and Socket.io to support the real-time messages. All data are saved as a JSON data.


The live demo below is only for sample purposed only. Please do not submit any private/sensitive information when using the chat application.

KongkoChat – Fullstack Project