Chat App

Let's have a chat with your friends!

Who we are

We are the team behind Chat App. 5 members of Cohort 6 from the Bright Network Technology Academy!

• April
  • Github
• Hangqing
  • Github
• Joao
  • Github
• Migle
  • Github
• Yongran
  • Github

Table of Contents

• Project Overview
• This Website Features
• Setup and Instructions
• Project Structure
• Component Diagram
• Wireframes
• Minimum Viable Product (MVP)
• Extensions
• Further Implementations
• Acknowledgements

Project Overview

As part of the Bright Network Technology Academy, we were assigned a group project to research, plan and develop a Full-stack project - a chat app in 10 days.

This Website Features

• Login functionality
• Registration
• Add/remove friends
• Chat with friends
• Switch chats

Setup and Instructions for using the Project

1. This Full-stack project runs on React and Express. Make sure you have Node and MongoDB installed to run the API and React. We used VSCode and MongoDB Compass for this project.
2. Clone Chat App by typing the following commands into your terminal: git clone [email protected]:YoyoMai98/chat-app-full-stack.git. Open in VSCode.
3. Within VSCode, navigate your terminal to the express.js_server folder and run the following two commands: npm install and npm start
4. Navigate your terminal to the react.js_app folder and run the following two commands: npm install and npm start
5. Navigate to your web browser and if it has not already displayed, enter in the following URL: http://localhost:3000/

Project Structure

This project is structured as below.

Component Diagram

Wireframes

ERD

UML

MVP

For our MVP, we wanted to create a website with maximum functionality which included:

• Register a new account
• Log in an account
• Add a friend
• Chat with a friend
• Switch chats

Extensions

What we have expanded on this full-stack project:

• Add multiple friends
• Multiple conversations
• Unfriend & Delete chats
• Encrypt stored password

Further Implementations

Further functionalities we would like to develop into this website are:

• Group chats
• Pop up window for notification
• Delete Accounts
• Typing bubble
• Account profile picture

Acknowledgments

A special thank you to BNTA team and especially to Anna, Colin, Ed, Eoan, Phil, Richard and Zsolt, for all the advice and support during the project. You've made this learning process a blast!