Hatchat is a web-based chat application designed for online communication, developed as a project for the Advanced Programming course at Bar-Ilan University.
Description • The Client-Side • The Server-Side • Installing And Executing • Authors
This project is a web application developed using React and nodeJS.
The chat application is divided into two parts: the server-side, implemented in Node.js and utilizing mongoDB, and the client-side, implemented using HTML, CSS, JavaScript, and React.
The client-side of the application starts with the user browsing to the client's index page, which serves as the login screen for the app.
If the user is not registered, they can click on the "Register" button at the bottom of the screen to access the registration page. The registration screen includes a form for new users to fill out. Styling is done using Bootstrap, ensuring a responsive design across different devices. The registration form includes input fields for username, password, display name, and profile picture. Similar to the login screen, the fields are validated, and appropriate visual feedback is provided.
The chat screen consists of two main parts. Firstly, there is a list of recent conversations displaying the participants' profile pictures, along with a timestamp of the last message sent in each conversation. If the user has previous conversations, they will be presented in this list.
When adding a new user, the app updates the contact list by placing the contact who sent the most recent message at the top. The timestamp of the last message is set, and a snippet of it is displayed within the contact entry in the list.
Please note that a user cannot be simultaneously logged in with multiple tabs. Therefore, if you wish to establish a new connection, it may be necessary to refresh your page.
The server-side of the application is responsible for handling the backend logic and communication with the database. It utilizes the following technologies and frameworks:
-
Node.js - The server-side is implemented using Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine.
-
Express.js - Express.js is used as the web application framework for handling HTTP requests and setting up API routes.
-
Socket.IO - Socket.IO is integrated to enable real-time communication between the server and clients.
-
MongoDB - The server connects to a MongoDB database to store and retrieve data.
-
Mongoose - Mongoose is used as an Object Data Modeling (ODM) library for MongoDB, providing a simplified interface for interacting with the database.
In the provided code snippet, the server-side code is structured using the Model-View-Controller (MVC) design pattern. The express module is used to create an instance of the Express app, which handles incoming HTTP requests. The server also establishes a Socket.IO connection to enable real-time communication.
The code connects to a MongoDB database using the mongoose library, with the connection string and port specified in environment variables. API routes for users, tokens, and chats are set up using the respective routers (users, authenticator, and chat). CORS is enabled to allow requests from the specified origin.
To clone and run this application, you'll need Git installed on your computer. From your command line:
# Clone this repository.
$ git clone https://github.com/TalMizrahii/AP2-Ex3
# Go into the repository.
$ cd AP2-Ex3
# Go into the project folder.
$ cd hatchat_server
# Install the needed libraries.
$ npm install
# Start the program in your default browser.
$ npm startAfter that, you can browse to http://localhost:5000/ to enter the app.