ChatRo–Instant Messaging Application

I always create tutorials for this blog. This time I want to break the ice and share something else, and I guess I’m going to continue writing these types of post whenever I have a personal project or maybe a formal project if the product owner allows me to write something about it.

In this post I’m going to share about ChatRo, a web application that allows for team collaboration through instant messaging, file sharing, and file management.



Everybody knows about this one. No need to trouble you from reading.




This is where users invited via email can register. After registering the user will automatically be added into the group as long as the link on the email is the one that is used to get into the application.



Instant Messaging

This is where users that belong to the same group can interact with each other through a chat box. Documents, pictures, audio and video files can also be shared to the users currently on the session through this form. Any user who are on the current session can end the session, not just the user who created the session. Every user can only participate in one session at a time.


Creating a new session is done by clicking on create session link and specifying the group and session name. The group name is an auto-suggest field which fetches all of the groups to which the current user belongs.



Group Management

This is where users can create new groups or manage existing groups.



Group Invite

Anyone can be invited into a group via email.


Existing members of other groups can also be invited. This is an auto-suggest text field that fetches all the users of the chatRo.


The invited user isn’t automatically added to the group. He has to accept or decline the request. Either way, the notification will stay on the home tab until the user decides to decline or accept the invite.


New groups can also be created.



 File Sharing

This can be used to share files to the other members of a session. In the screenshot below I’m uploading an Ebook from Makeuseof.


After the file has finished uploading, a message will automatically be created pointing out to the file that has been uploaded.


Clicking on the magnifying glass icon will preview the file. As of the time of writing of this article there’s still no preview for the front page of a pdf file, its just a link that the user can click to view the pdf file on the browsers built-in reader. But if there’s no built-in reader, it will just download the file into the local disk.


If the uploaded file is images it will be previewed with a download link on top of the image preview.


There’s also a preview for excel files.


Audio files can also be played as well, brought to you by html5 <audio> tag.


Lastly, video files can also be viewed brought to you by html5 <video> tag.


Yes it’s good that were able to play mp3, mp4 and other html5 compatible files but this magic still doesn’t work on some browsers. As of the time of writing of this article, I only managed to make it work for Chrome.



Once a session is ended it goes into the archives. This is simply a box where you can view the conversations in previous sessions. It’s only used for viewing previous sessions so there isn’t actually a link for the files that are mentioned in the conversation. These files can be viewed in the files tab.




There’s also a separate tab for viewing all of the files that were uploaded. This disregards the session to which the file was uploaded. It is simply a box wherein you can search for previously uploaded files of the people that are in your group.




I guess that’s it, if you want to test, contribute, fork this software then you could visit its GitHub page. All the files that you need are already in there, you could also go through the README file if you want to learn more about this application.


There’s still a lot of bugs and a lot of room for improvement and additional features, I’d really appreciate it if someone could contribute to this project. If you have some questions regarding this project feel free to ask them on the comments section. Thanks for reading!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s