# Members:
- Anh Tuan Duong (ODIN: tuananh)
- Tina McComiskey

# Introduction
This project is a real-time chat application implemented using modern web technologies. The application allows users to register, authenticate, send and receive messages in real-time. The application is structured to run both frontend and backend service.
The project is divided into 2 main parts: the frontend and the backend.

## Frontend
- Directory: 'frontend'
- Description: The frontend deals with the Chat Application's interface, handling user interactions and displaying messages in real-time, and makes sure that it connects to the backend to perform said functions (registering users, logging in, or sending messages). It is built with React and Vite.
- The implementations are in the 'frontend\src' directory.

## Backend
- Directory: 'backend'
- Backend: Manage APIs, routes and database, and make sure that it can send information to the front end. It also handles user authentication and manages chat messages. WebSocket also lies in the backend to perform real-time communication between users. It is built with Node.js and Express, with the help of nodemon to auto refresh server when there are new changes.
- The implementations are in the 'backend' directory and the index.js file.

## Socket
- Directory: 'socket'
- This directory is used to implement WebSocket (Socket.IO) to handle real-time communication.
- The implementations are in the index.js file in the 'socket' directory.


# Resources Used
- Frontend:
  + React
  + React-bootstrap
  + Vite
  + Bootstrap
  + Socket.io-client

- Backend:
  + Node.js
  + Express
  + MongoDB/Mongoose
  + Socket.IO
  + Postman
  + Nodemon
  + JSON Web Token (JWT) - for authentication
  + Bcrypt - for hashing passwords
  + Validator - to make sure emails and passwords are secure and in the correct format.

- Unit Testing:
  + JEST

# Requirements to Setup
- Node.js installed
- npm
- Information on how to set up and run the program is at the bottom of the README


# ---Information about the Chat Application:---

- When running the Chat Application, if you do not have an account, you can register for an account before logging in.
- When registering, enter your name, email and password.
  - Your email must be in the format: <name>@gmail.com
  - Your password must follow at least: One uppercase, one number, and one symbol.
- After logging in, the user can then create a chat with another users who already had an account.

------------------------------------------------

## The Chat App currently only has (features):
  - Register Users and Authentication
  - Create new chat with Users who already created an account.
  - Real-time communication
  - Show which user is online in real-time
  - Load previous chat history from the database
  - Notifications when the user has a new message from another user
  - Deleting a chat room but still keep the chat history

## The Chat App currently do not have due to difficulty in learning new information in a short amount of time:
  - A search bar or a button to create chat with another Users
  - Creating a Group Chat for multiple users
  - Design of the chat application is not very good due to limited knowledge of CSS
  - Deleting chat history after deleting the chat room
  - Fully implemented unit testings

## Experiences with the Project:
- The project was fun and is a great way for us to learn more about how frontend and backend works, as well as collaboration and developing a web application.
- However, due to our lack of knowledge on the language and many required resources to use on this project (JavaScript, GitHub, MERN), and with our busy schedule from other classes' projects, we did not do very good on this Chat Application project.
- Learning JavaScript/React/CSS while doing the project is really tough given the short amount of time we have in one term. It would be great if there were more resources and guides on helping implement this project.
- Nevertheless, it is still a valuable experience as it is our first big project we have ever done.


//------------------------------------------------------------------------------
|  ** GitHub repo: https://github.com/TinaMcComiskey/instantmessagingapp **    |
|  ** Branch: main **                                                          |
|   - The branch: ChatApp_backup is our attempt at making group chat           |
|  but was not successful.                                                     |
//------------------------------------------------------------------------------

# ---To run the project, do the following:---

'npm install' in the root directory, and in each folder (frontend, backend, and socket) do:

Frontend: npm install    (If you are in root directory, do 'cd frontend' then 'npm install')
Backend: npm install      (If you are in root directory, do 'cd backend' then 'npm install')
Socket: npm install      (If you are in root directory, do 'cd socket' then 'npm install')

To run the Chat Application, run the command in each of the folder separately:

Frontend: npm run dev    (If you are in root directory, do 'cd frontend' then 'npm run dev')
Backend: npm run dev    (If you are in root directory, do 'cd backend' then 'npm run dev')
Socket: npm run dev      (If you are in root directory, do 'cd socket' then 'npm run dev')

- If you did 'npm install' in the *root directory* in additional to 'npm install' in all folders, you can also run 'npm run dev' in the root directory to run all 3 folders at once.
- We did not deploy the project, the project currently runs on http://localhost:5173/ 

- You can do Ctrl+C in the terminal if you want to stop the program.

# ---To do the unit testing, do the following:---

- Currently, there were not testings done to all the files due to limited time.
- Some testings in the backend are also not passing at the moment.

'npm install' if you have not done that when you run the project from the instructions above.

- Run 'npm test' in either 'frontend' or 'backend' folders to test.
    cd frontend or backend
    npm test