Chatiz - Chat Application

Description

For screenshots - skip to the bottom of the page.

Chatiz is a chat application that allows you to communicate with people from all over the world.
From a more professional point of view, Chatiz is a chat application for web browsers and Android devices, connected to a back-end RESTful server with a DB connection: React.JS usage for the web application, Server side in ASP.NET core (C#) with a MariaDB connection (local database), and Android side in Java.
This application was created as part of the course "Advanced Programming 2" and inspired by the application "Whatsapp Web". In the code we can find various techniques like ORM, MVC, Entity framework, web services and more.

Part 1: Browser

The project is divided into 3 parts:

1. Browser Side in React.JS. link
2. Server Side in ASP.NET core (C#) with a MariaDB connection. link
3. Android side in Java. link

As marked, in this part I will show the browser side in React.JS under the VS Code workspace.
The browser side is the first task, and it is not connected to the database (which is connected in the second and third task). All users and messages are saved inside the code (hard coded) and are not saved in the DB, which means that after you exit the app, you will lose all new messages you sent.
This part was designed, combined with personal design, with Bootstrap. This part includes a login screen, registration screen, verifications, contacts and chats screen, use of Hooks, Router and more.

For simplicity, to test the application I recommend using this part of the project, because the operation of this part is simpler.

Instruction Manual

We work only on the main branch that on GitHub.

Pre installations

1. Download and install Node.JS .
2. Open a new folder.
3. Right click on the folder, then "Open Terminal".
4. Download npm: enter npm install -g npm in the terminal.

Using Chatiz on the browser

1. In the same folder that you opened, enter git clone https://github.com/ido106/Chatiz_Browser.git in the terminal.
2. Enter the folder "web_app".
3. Open the terminal, and enter npm install react-scripts.
4. Enter npm start.
5. Enjoy !

I recommend logging in under the main user:
Username: Messi
Password: THE_GOAT
The list of all users appears in Advanced2 / Advanced2 / web_app / src / components / sign_in / users, under an array called "users".

Screenshots

Turn on the volume in the videos 🔊

Login

Chat

SignUp

Chat review

2022-10-21.22-.1.107-09.mp4

Full review

1.2022-10-21.18-12-17.mp4

Enjoy :smile: