ChatterBox
ChatterBox is a reddit-styled forum web application where people can create places to discuss any topic of their choosing. Though simple on the surface, it hides a complex set of Angular services that connect to a Google Firebase back-end to provide robust functionality and secures information using Firebase's access rules.
Firebase
The Firebase API provides access to a JSON-type database. It's a fairly simple tool for organizing datasets, but its really the API framework, two- and three-way data binding, and feature set that makes it so powerful.
The hierarchical data organization of Firebase is quite different from relational strategies of other database back-ends, but it's approachable and can be 'tuned' to meet a wide variety of needs. Firebase documentation recommends having a 'flat' structure so as to avoid fetching large amounts of data unnecessarily. If all you want to do is list the chatrooms, you would want to avoid retrieving ALL of the messages for every room too. Separating 'messages' and 'rooms' into their own areas of the JSON structure avoids this and is what Firebase calls 'flat'.
ChatterBox organizes the data for the application into the following areas of the JSON :
| Item | Organized by | Description |
|---|---|---|
| rooms > private | room_id, > room_id | stores private room info (name, description, author, last message) |
| rooms > public | room_id | stores public room info (name, description, author, last message) |
| members | room_id > user_id | stores info about which users elect to join rooms |
| invitations | user_id > room_id | stores info about which private rooms users have been invited to |
| messages | room_id | stores the messages for each room |
| users | user_id | stores public-facing info about all users (name, email, avatar) |
| settings | user_id | stores private information about each user (rooms they created, favorited rooms, etc) |
Angular
This web application is built on the AngularJS framework and uses locationProvider, stateProvider, and urlRouterProvider to handle routing, templating, and the basic SPA navigation functionality. All the other parts of the application make use of custom services, controllers, and directives to allow the user to interact with the data according to the traditional VMC paradigm.
Services
| Service | Attributes & Methods | Description |
|---|---|---|
| UserService | signUp() logIn() updateProfile() updatePassword() logOut() toggleFavorite() |
handles the authentication functionality of the web application, allowing users to sign up, log in/out, and update their account settings (name, email, password, etc.) |
| UserDataService | init() waitForAllUsers() getUserIdFromEmail set() get() save() reset() |
handles retrieving/updating public user information so that names/emails/pics accurately reflect each users' account settings when displaying their posts |
| RoomService | init() getPrivateRooms() getUserRooms() add() updateLastMessage() remove() get() reset() |
handles interactions with rooms |
| MessageService | add() get() reset() |
handles interactions with messages |
Controllers and Directives
The controllers and directives in ChatterBox mostly just expose functions from the services that are relevant to each part of the view. The directives also help break apart the HTML into semantic elements that accurately describe the content they represent.
- Controllers
- chatRoomCtrl
- roomFormCtrl
- loginFormCtrl
- homeCtrl
- navbarCtrl
- sidebarCtrl
- userProfileCtrl
- Directives (have controllers)
- navbar
- sidebar
- Views (have controllers)
- Home
- Room
- Profile
Run the Application
Run the application using the Gruntfile's default task:
$ npm start