You could check a full working application deployed to replit.

• Target Chat on replit.
• Default username: Maayan
• Default password: Maayan12345

• Currently the project is in development state so far a full react client is functional
• APS.NET api and SQL DB will be added

• Login
• Register
• Private(1-1) conversations.
• Rich Media Attachments including image, video and voice messages.
• Read receipts
• Online Presence Indicators
• Message History
• Users & Friends List
• Search by users
• Conversations List
• User management
• Routing (React Router)
• Real-time
• Login by QR code.

• React
• React-Bootstrap
• ASP.NET
• React Router

Before git is imported, ensure you have met the specified requirements:

• React npm install react

• React ROUTER-DOM npm install react-router-dom

• React ROUTE npm install react-router

• React Scripts npm install react-scripts

• React Bootstrap npm install react-bootstrap

• Bootstrap npm install bootstrap

1. Clone repository using git clone https://github.com/Etelis/TargetChat/

2. Install dependencies by following requirments section.

3. Create new react app from the following repository.

  npm start

Login Page:

Register Page:

Main Chat:

Registration component will allow registration of a new user, regisration form follows the following rules:

• username field: user name field should at least have a single letter.
• password field: password field should follow the following regex /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/ - meaning a password should have at least one number and letter, also should be at least at the size of eight.
• image field - user should specify profile image.

if one of the requirment wasn't met a coresponding error will be shown.

login component will allow an existing user to login and retrive existing chats. login form follows the folloiwing rules:

• username field: user name field should at least have a single letter.

• password field: password field should follow the following regex /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/ - meaning a password should have at least one number and letter, also should be at least at the size of eight. if one of the requirment wasn't met a coresponding error will be shown.

  if user couldn't be found a coresponding error will be shown ( form will not indicate if a the user exists )

recording component will show a recording pop up to chat's footer allowing the user to record and upload a voice recording

media items as Images and videos will be warrped inside a coresponding component allowing on click full screen view

adding a new chat receipinct is done by a modal component allowing a user to add new receipient for incomming and out going conversations.

when a client is connected to the chat application and being added by a diffrent client (session) the new contact will be pushed instantly to the connected chat.

when a client is connect to a chat with a diffrent client (seesion) and a new message is sent, the message will appear instantly to the connected chat members.