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.
- 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:
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: https://youtu.be/Cxrjnx5HzTc
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.
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, https://github.com/rjwrightme brandpower, https://github.com/brandpower annisapf, https://github.com/annisapf Andrewmiddleton1, https://github.com/andrewmiddleton1