Skip to content

annisapf/chatterbox

main
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?
Code
This branch is up to date with rjwrightme/chatterbox:main.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
db
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README for Chatterbox App

welcome image

Description

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

Installation

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

Usage

“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:

chatroom

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:

chatting

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: https://youtu.be/Cxrjnx5HzTc

Credits

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

Badges

License: MIT

Contributing

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

Tests

There were no tests developed for this application.

Questions

Please direct questions to the Project 7 Team:

rjwrightme, https://github.com/rjwrightme brandpower, https://github.com/brandpower annisapf, https://github.com/annisapf Andrewmiddleton1, https://github.com/andrewmiddleton1

Languages

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