Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
This branch is up to date with rjwrightme/chatterbox:main.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

README for Chatterbox App

welcome image


This application is a chat application which allows users to sign up and chat with other users. The app utilises an Model, View, Controller (MVC) structure and uses Socket.IO, MySQL, Sequelize, Express and Handlebars.

Table of Contents

  • Title
  • Description
  • Installation
  • Useage
  • License
  • Contributing
  • Tests
  • Questions


To install this application, the user runs the “server.js" file in Node (or when deployed uses the app through the html interface). The server establishes the port on 8080 and requires express, which is used to run the server, drawing on the files in the “public directory”. The public directory holds the JS functions (account, login, main, members and signup), the html pages (chat, home, index, roomchat and welcome) and the CSS. The app is then based around the “Model, View, Controller” structure. The user.js, chat.js and index.js files are held in the model folder and they provide the models for user and chat, and construct the database queries. The “Views” part of the app consists of six handlebars files which provide the front-end templates. Finally, the “Controller” is represented by the routes files (api routes and html routes), which are responsible for creating all of the routes for the server to use, including get, post and put functions. The back-end database is a MySQL database (chatterbox).

The below directory structure highlights the “MVC” nature of this application:

├── config
│   ├── config.json
│   └── passport.js
│   └── middleware
│       └── isAuthenticated.js
├── db
│   ├── schema.sql
│   └── seeds.sql
├── models
│   └── chat.js
│   └── index.js
│   └── user.js
├── node_modules
├── package.json
├── public
│   └── assets
│       ├── css
│           └── chat.css
│           └── style.css
│           └── welcome.css
│       └── images
│   └── html
│       ├── chat.html
│       ├── home.html
│       ├── index.html
│       ├── roomchat.html
│       ├── welcome.html
│   └── js
│       ├── main.js
├── utils
│   └── message.js
│   └── users.js
├── server.js
└── views
    ├── index.handlebars
    ├── account.handlebars
    ├── chat.handlebars
    ├── login.handlebars
    ├── signup.handlebars
    ├── users.handlebars
    └── layouts
        └── main.handlebars


“Chatterbox” is a chat app that lets users chat in public or private rooms, in real-time. The app stores user and their chat in a database. The application requires several node packages: Socket.IO, Express, MySQL and Handlebars.

Once the app has been launched, the user is presented with the home screen, where the user has the option of logging in (if they are already a member) or signing up:

welcome image

If they login, they are presented with options for which chat room they would like to join:


Members are able to chat to each other, in real-time, utilising the Socket.IO package. Code relevant to the Socket.IO package is included on the server (server.js) for the server-side functionality, and in the main.js client-side script:


Users can swap between rooms by clicking on the "change rooms" button at the top of the page. Once they are finished, they click the "log out" button, which takes them back to the welcome page.

A video of the application and it's functionality can be found here:


This project was completed by RJ Wright, Sarah Brand, Annisa Purbandari and Andrew Middleton (Project Group 7). The project relied heavily on Socket.IO and the other node packages mentioned above. The group sought advice from our class instructors (Jack, Sandes and Ali), who we would like to thank for their assistance during our project sessions.




License: MIT


Should others wish to contribute to this application, we thank them for their interest and request that they use the standards found at the Contributor Covenant Note: the Contributor Covenant is an industry standard


There were no tests developed for this application.


Please direct questions to the Project 7 Team:

rjwrightme, brandpower, annisapf, Andrewmiddleton1,


  • JavaScript 44.2%
  • HTML 25.4%
  • Handlebars 15.8%
  • CSS 14.6%