Code-Chatter Case Study

Code-Chatter is a Slack inspired messaging application built with AngularJS and Firebase where users can create chat rooms and send/receive messages real time.

This is actually a project I built earlier this year, I decided to feature this project on my portfolio website and wanted a case study to detail the project.

Explanation

As many web application projects go, building a replica of something we know well is a great way to understand what is happening behind the scenes and to have clear direction for building.

This project was part of the Bloc Full Stack Developer program to reinforce frontend programming fundamentals and deepen my knowledge of the AngularJS framework. I was given a set of user stories and tasked with building a web app from scratch to meet each one of these needs.

Project Objectives

  • Users can see a list of available chat rooms
  • Users can create chat rooms
  • Users can see a list of messages in each chat room
  • Users can set a username to display in chat rooms
  • Users can send messages associated with their username in a chat room

Solution

This was my first time ever working with Firebase or setting up a database for storing user entered information. After setting up a Firebase account, I setup the initial database structure for listing rooms.

Back in Angular I created a room factory to write all Room related API queries to eventually list all rooms. I referenced the Firebase database and injected in the $firebaseArray service provided by AngularFire. Using Firebase’s child() method I was able to query a subset from the database.

From there I created a Home controller and associated it with the home template in a $state. I was able to assign the Room.all method to a $scope.chatRooms variable after injecting the Room service into the controller. Then I displayed the rooms in the home template using ng-repeat=”rooms in chatRooms”.

In order to add new rooms I used AngularFire’s $add() method to edit the rooms array. Then using UI Bootstrap’s $uiModal service I added a button and modal for adding a room and setting it’s name.

Displaying the messages within each room was similar to displaying the rooms themselves expect this time the messages were associated with a roomId. A room ID is generated every time a new room is created on Firebase. Inside the message factory I created getRoomById that takes in the roomId argument and uses equalTo() to find all messages whose roomID property is equal to the roomId in the argument.

$firebaseArray(ref.orderByChild(‘roomId’).equalTo(roomId));

In the Home controller I defined a $scope variable that sets the current room and lists all the messages associated with that room via getRoomByID.

In order to store a username to be displayed on messages in each room I used browser cookies. I used Angular’s .run() method to make sure a username is set when the app is initialized. If a username is not set then User Modal is opened for the user to set the username. Inside the UserModalCtrl I used the $cookies service’s put() method to set a cookie key and value to store a username.

Finally to send messages I added a send method to the Message factory that takes a message object as an argument and submits it to the Firebase server with $add. To associate the current username with the new message I set the username property in the message object to retrieve the stored username with $cookies.get(‘blocChatCurrentUser’). I also created the sendMessage controller method which is invoked by ngClick in the home template.

Results

The application was tested locally before it was deployed to Netlify and tested for functionality there as well. All user needs have been successfully met.

Conclusion

As my 2nd AngularJS project Code-Chatter allowed me to gain a deeper understanding of the AngularJS framework, creating single page applications and provided an introduction to backend functionality through Firebase.

Going into this project I had just built a music playing application with vanilla JavaScript, refactored it into jQuery then rebuilt it using Angular so I felt comfortable with JavaScript but I was concerned about setting up the backend and a database for the first time. Fortunately Firebase was straightforward enough to understand and allowed me to start seeing how the frontend interacts with a database for the first time. Being able to see the database structure in Firebase and watch rooms or messages appear as they were added was particularly helpful.

Wrapping up the frontend portion of the Bloc program, this project was a great way to pull together what I’ve learned about HTML, CSS, JavaScript and Git. I noticed my skills and confidence grew while working through challenges and finding solutions while building and designing Code-Chatter. I’m excited to apply the experience I gained during this project in my next project which will be an AngularJS pomorodo time tracking application.

View Project