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.
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.
- 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
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.
In the Home controller I defined a
$scope variable that sets the current room and lists all the messages associated with that room via
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
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.
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.
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.