v4 release

Author: juhi-saha

.DS_Store

@@ -1,138 +1,144 @@
-<div style="width:100%">
-    <div style="width:50%;">
-        <div align="center">
-        <img align="center" width="180" height="180" alt="CometChat" src="./Screenshots/logo.png">
-        </div>
-    </div>
-</div>
-
-</br></br>
-
-> **Note**
-
-Version 4 CometChat UI Kits 
-
-We’ve introduced a major update to CometChat UI kits. Version 4 features a modular architecture that gives you enhanced flexibility to build and customize your web and mobile apps. Please switch to the branch [v4](https://github.com/cometchat-pro/cometchat-chat-sample-app-react/tree/v4) to check out the sample app based on this version. [Visit our documentation](https://www.cometchat.com/docs/react-v4-uikit/overview) to read more about this.
-<br/><br/>
-
-# CometChat Kitchen Sink Sample App (React)
-
-<p align="left">
-    <a href="https://github.com/cometchat-pro/cometchat-pro-react-sample-app/releases/" alt="Releases">
-        <img src="https://img.shields.io/github/v/release/cometchat-pro/cometchat-pro-react-sample-app" />
-    </a>
-    <a href="https://img.shields.io/github/languages/top/cometchat-pro/cometchat-pro-react-sample-app">
-        <img src="https://img.shields.io/github/languages/top/cometchat-pro/cometchat-pro-react-sample-app" />
-    </a>
-    <a href="https://github.com/cometchat-pro/cometchat-pro-react-sample-app/stargazers">
-        <img src="https://img.shields.io/github/stars/cometchat-pro/cometchat-pro-react-sample-app?style=social" />
-    </a>
-    <a href="https://twitter.com/CometChat">
-        <img src="https://img.shields.io/twitter/follow/CometChat?label=CometChat&style=social" />
-    </a>
+<!-- PROJECT LOGO -->
+<div>
+    <img alt="CometChat" src="https://avatars2.githubusercontent.com/u/45484907?s=200&v=4" width="180" height="180" alt="CometChat" />
+</div>    
+<h2>CometChat React Sample App</h3>
+<p>
+  CometChat Kitchen Sink Sample App (built using <b>CometChat UI Kits</b>) is a fully functional real-time messaging app capable of private (one-on-one), group messaging, voice & video calling.
+  <br />
+  <a href="https://www.cometchat.com/docs/v4/react-uikit/overview"><strong>Explore the docs »</strong></a>
+  <br />
+  <br />
+  <a href="https://github.com/cometchat-pro/cometchat-chat-sample-app-react/issues">Report Bug</a>
 </p>
 
-![alt text](./Screenshots/main.png "Main")
+##
+
+[![Platform](https://img.shields.io/badge/Platform-React-blue?logo=react&color=%235fd3f3)](#) [![Language](https://img.shields.io/badge/Language-Typescript-blue?logo=typescript&color=%232f74c0)](#)
+[![Version](https://img.shields.io/badge/Version-4-blue?color=red)](#)
+<a href="https://github.com/cometchat-pro/cometchat-chat-sample-app-react/releases/" alt="Releases">
+<img src="https://img.shields.io/github/v/release/cometchat-pro/cometchat-chat-sample-app-react?label=Release&color=brightgreen" />
+</a>
+<a href="https://github.com/cometchat-pro/javascript-react-chat-ui-kit/stargazers">
+<img src="https://img.shields.io/github/stars/cometchat-pro/javascript-react-chat-ui-kit?style=social" />
+</a>
+<a href="https://twitter.com/CometChat">
+<img src="https://img.shields.io/twitter/follow/CometChat?label=CometChat&style=social" />
+</a>
+
+<!-- TABLE OF CONTENTS -->
+
+## Table of Contents
+
+- [About the Project](#about-the-project)
+  - [Built With](#built-with)
+- [Getting Started](#getting-started)
+  - [Dependencies](#dependencies)
+  - [Installing](#installing)
+  - [Usage](#usage)
+    - [Run locally](#run-project-locally)
+  - [Help](#help)
+- [Contributing](#contributing)
+- [Support](#support)
+- [License](#license)
+- [About Authors](#about-authors)
+
+<!-- ABOUT THE PROJECT -->
+
+## About The Project
 
 CometChat Kitchen Sink Sample App (built using **CometChat UI Kit**) is a fully functional real-time messaging app capable of private (one-on-one), group messaging, voice & video calling.
 
-## Features
-- Login
-- Private(1-1) & Group Conversations
-- Voice & video calling & conferencing
-- Rich Media Attachments
-- Typing Indicators
-- Text, Media and Custom messages
-- Read receipts
-- Online Presence Indicators
-- Message History
-- Users & Friends List
-- Groups List
-- Search by users and groups
-- Conversations List
-- Threaded Conversations
+### Built With
 
- ## Extensions
+- [React](https://react.dev)
+- [CometChat](https://cometchat.com)
 
- [Thumbnail Generation](https://www.cometchat.com/docs/extensions/thumbnail-generation) | [Link Preview](https://www.cometchat.com/docs/extensions/link-preview) | [Rich Media Preview](https://www.cometchat.com/docs/extensions/rich-media-preview) | [Smart Replies](https://www.cometchat.com/docs/extensions/smart-replies)| [Emojis](https://www.cometchat.com/docs/extensions/emojis) | [Polls](https://www.cometchat.com/docs/extensions/polls) | [Reactions](https://www.cometchat.com/docs/extensions/reactions) | [Stickers](https://www.cometchat.com/docs/extensions/stickers)
+<!-- GETTING STARTED -->
 
-<hr/>
+## Getting Started
 
-## Prerequisites
+Simply clone or fork this repo and run it using the instructions below to see all features in action. Or use it as a starter template/boilerplate and make edits to suit your needs.
 
-Before you begin, ensure you have met the following requirements:
+## Dependencies
 
-- React `npm install react@17.0.2`
+- CometChat - [Sign up for CometChat](https://app.cometchat.com) and create an app to obtain your keys and other credentials
 
-- React DOM `npm install react-dom@17.0.2`
+- npm
 
-- React scripts `npm install react-scripts@4.0.3`
+  ```sh
+  npm install npm@latest -g
+  ```
 
-___
+## Installing
 
-## Installing React Sample App
+1. Clone the repo
 
-1. Clone this repository `git clone https://github.com/cometchat-pro/javascript-react-chat-app.git`
-2. Navigate to the root directory and replace `APP_ID`, `REGION` and `AUTH_KEY` with your CometChat `App ID`, `Region` and `Auth Key` in src/consts.js file.
+   ```sh
+   git clone https://github.com/cometchat-pro/cometchat-chat-sample-app-react.git -b v4
+   ```
 
-![alt text](./Screenshots/constants.png "Constants")
+2. Change to the working directory
 
-3. Install dependencies
+   ```sh
+   cd cometchat-chat-sample-app-react
+   ```
 
-    a. Add node-sass dependency in your project.
-    ```javascript
-    npm install node-sass@version
-    ```
-    <b> Note</b>: Cross check for the compatible version of this dependency with your system's node version in the link given below <br />
-        <a href="https://www.npmjs.com/package/node-sass">https://www.npmjs.com/package/node-sass</a>
+3. Install dependencies via NPM
 
-    b.
+   ```sh
+   npm install
+   ```
 
-    ```javascript
-    npm install
-    ```
-___
+4. Replace `APP_ID`, `REGION` and `AUTH_KEY` with your CometChat `App ID`, `Region` and `Auth Key` in `src/constants.ts` file.
 
-## Running the sample app
+   ![Replacing constants in src/constants.ts](./Screenshots/constants.png "Replacing constants in src/constants.ts")
 
-```javascript
-  npm start
+<!-- USAGE EXAMPLES -->
+
+## Usage
+
+This app contains all features offered by CometChat through its UI Kit. [Read more about the React UI Kit here.](https://www.cometchat.com/docs/v4/react-uikit/overview)
+
+### Run project locally
+
+```sh
+npm start
 ```
-___
 
-## Add UI Kit to your project
+To learn about React UI Kit Integration, please [click here](https://www.cometchat.com/docs/v4/react-uikit/integration).
 
-Learn more about how to integrate [UI Kit](https://github.com/cometchat-pro/cometchat-chat-uikit-react/) inside your app.
+## Help
 
----
+To learn more about our UI kits, visit our [documentation](https://www.cometchat.com/docs/v4/react-uikit/overview).
 
-# Troubleshooting
+If you are still facing issues while running this project or integrating with our UI Kits, please connect with our real time support via the [CometChat Dashboard](https://app.cometchat.com/).
 
-- To read the full dcoumentation on UI Kit integration visit our [Documentation](https://www.cometchat.com/docs/react-chat-ui-kit/overview).
+<!-- CONTRIBUTING -->
 
-- Facing any issues while integrating or installing the UI Kit please connect with us via real time support present in <a href="https://app.cometchat.com/">CometChat Dashboard.</a>
+## Contributing
 
----
-# Contributors
+Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**. Sincere thanks to all our [contributors](https://github.com/cometchat-pro/cometchat-chat-sample-app-react/graphs/contributors)!
 
-Thanks to the following people who have contributed to this project:
+You are requested to follow the contribution guidelines specified in [CONTRIBUTING.md](./CONTRIBUTING.md) while contributing to the project :smile:.
 
-[@priyadarshininadar](https://github.com/priyadarshininadar) <br>
-[@ajaygajra](https://github.com/ajaygajra) <br>
-[@prathamesh-majgaonkar](https://github.com/prathamesh-majgaonkar) <br>
-[@mayur-bhandari](https://github.com/mayur-bhandari)
+## Support
 
+Please connect with our real time support via the [CometChat Dashboard](https://app.cometchat.com/).
 
----
+<!-- LICENSE -->
 
-# Contact
+## License
 
-Contact us via real time support present in [CometChat Dashboard.](https://app.cometchat.com/)
+This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
 
----
+## About Authors
 
-# License
+This project is created & maintained by: <br/>
+[⚔️ @priyadarshininadar](https://github.com/priyadarshininadar) 🛡 <br>
+[⚔️ @juhi-saha](https://github.com/juhi-saha) 🛡 <br>
+[⚔️ @raj-dubey](https://github.com/raj-dubey1) 🛡
 
----
+The names and logos for CometChat are trademarks of CometChat, Inc.
 
-This project uses the following [license](https://github.com/cometchat-pro/javascript-react-chat-app/blob/master/LICENSE).
+We love open source software! See [our other projects](https://github.com/cometchat-pro) or [sign up with us](https://app.cometchat.com/signup) to start using our product.