Chat App:

• App's Architecture Overview👈
• App's Main Flows Overview👈

About My Project:

Chat App Assignment is developed as a home assignment for a Full-Stack position at Yad2.
This real-time chat application allows users to chat with each other in real time, view the global chat's messages, and see the user currently logged in.
With its user-friendly interface and responsive design, this chat app provides users with a seamless and enjoyable experience.

Table of contents

• App's Architecture
• Main Flows
• Main Features
• Technologies
• Packages
• Installation
• What's next?
• Images

App's Architecture:

Main Flows:

Main Features:

1. Live Chat - The Chat App allows users to engage in a real-time chat conversation with their friends who are currently logged in to the app.

2. Users currently logged In List - The app displays a list of all the users currently logged in to the app.
   Users can see who has joined the chat and who has left.

3. History Of Messages - Users can view the history of chat messages sent in the chat room and the time each message was sent.
   If two or more messages were sent on different days, the app would automatically insert a divider with the date each message was sent.

4. Typing Indicator - Users can see who is typing a message in the chat room.
   This feature helps let users know that someone is about to send a message and to wait for it.

Technologies:

• React - A JavaScript library for building user interfaces.
• TypeScript - For type checking and improved developer productivity.
• Node.js - For efficient and scalable development of the application's backend logic.
• MongoDB - A NoSQL database that stores users' account data.
• Docker - Containerize the app to be easy and provide a consistent and reproducible environment for running and deploying applications.

Packages:

• Front-end :

  • Tailwind CSS - A utility-first CSS framework for styling the application's user interface.
  • Socket.IO Client - A client-side library for Socket.IO enables real-time bidirectional event-based communication.
  • Axios - For making API requests to the backend.
  • React Router - For routes management. application's user interface.
  • use-debounce - To improve the search and filter process by debouncing user inputs.
  • React Icons - For icons

• Back-end:

  • Express- For building the server.
  • Dotenv - For environment variables.
  • Socket.IO - A server library for Socket.IO, which enables real-time bidirectional event-based communication.

• Misc:

  • Prettier - Ensuring code style and formatting consistency across the project.
  • Husky - For git hooks manager that runs scripts before git commands.
  • Lint-staged - For running linters against staged git files, used for maintaining code quality.

Installation

Running Docker:

1. Clone the repo

   git clone https://github.com/rom-orlovich/chat-app.git
   

2. Install all the dependencies

   npm run init-p
   

3. Create .env files in the root of the client and server folders.

4. Run command

   docker compose up -d
   

5. Go to http://localhost:3000 and have fun!

What's Next:

• Add a user authentication system to the application to ensure that only authorized users can access the chat
• Support chat rooms system so that users can create private chat rooms and invite other users to join
• Implement a private room feature that allows users to have private conversations with one another
• Add a filter messages and user data system to the application to allow users to search for specific messages or users.

Images:

Home

Messages

Login Users