Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/thaoanhhaa1/chatapp-cnm-web

Chat App - ReactJS
https://github.com/thaoanhhaa1/chatapp-cnm-web

agora-sdk axios google-maps-api mui-material reactjs redux redux-thunk redux-toolkit sass socket-io swiper-js tailwindcss

Last synced: 2 days ago
JSON representation

Chat App - ReactJS

Host: GitHub
URL: https://github.com/thaoanhhaa1/chatapp-cnm-web
Owner: thaoanhhaa1
Created: 2024-01-09T12:30:52.000Z (about 1 year ago)
Default Branch: master
Last Pushed: 2024-05-29T04:23:58.000Z (8 months ago)
Last Synced: 2025-01-08T03:19:40.329Z (29 days ago)
Topics: agora-sdk, axios, google-maps-api, mui-material, reactjs, redux, redux-thunk, redux-toolkit, sass, socket-io, swiper-js, tailwindcss
Language: JavaScript
Homepage: https://lola.iuh-mern.id.vn/
Size: 3.87 MB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        


  


  

  


  Chat App

  






    

    



## 🚩 Table of Contents

-   [🚩 Table of Contents](#-table-of-contents)

    -   [Built With](#built-with)

    -   [Installation](#installation)

    -   [Features](#features)

    -   [Contact](#contact)

### Built With

This section list major frameworks/libraries used to bootstrap my project.

![Redux Toolkit](https://img.shields.io/badge/Redux_Toolkit-764ABC.svg?style=for-the-badge&logo=redux&logoColor=white)

![React](https://img.shields.io/badge/react-%2320232a.svg?logo=react&logoColor=%2361DAFB&style=for-the-badge)

![SocketIO](https://img.shields.io/badge/Socket.io-010101.svg?style=for-the-badge&logo=socketdotio&logoColor=white)

![I18next](https://img.shields.io/badge/i18next-26A69A.svg?style=for-the-badge&logo=i18next&logoColor=white)

![MUI](https://img.shields.io/badge/Material_UI-0081CB.svg?style=for-the-badge&logo=material-ui&logoColor=white)

![Axios](https://img.shields.io/badge/Axios-FF0000.svg?style=for-the-badge&logo=axios&logoColor=white)

![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)

![Agora](https://img.shields.io/badge/Agora-02569B.svg?style=for-the-badge&logo=agora&logoColor=white)

![Google Maps](https://img.shields.io/badge/Google_Maps-4285F4.svg?style=for-the-badge&logo=google-maps&logoColor=white)

![Sass](https://img.shields.io/badge/Sass-CC6699.svg?style=for-the-badge&logo=sass&logoColor=white)

### Installation

1. Clone the repo

    ```sh

    git clone https://github.com/thaoanhhaa1/ChatApp-CNM-web.git

    ```

2. Install NPM packages

    ```sh

    npm install

    ```

3. Run web

    ```sh

    npm start

    ```

### Features

-   Multi-language

    -   My chat app uses i18next, so you can easily add a new language if you want.

-   Dark mode

    -   The application supports dark mode.

-   Sign up

    -   The application allows users to sign up for accounts. To sign up, users need to provide their full name, email or phone number, gender, date of birth.

-   Sign in

    -   The application requires a username (phone or email address) and password to sign in.

-   Friend Management

    -   A user can send a friend request to another user, recall friend request, accept or reject a friend request, unfriend a friend.

-   Create new group

    -   The user can create a group, which must have at least three people (including the creator), create a group layout that only shows people who are friends of the user, and the user can enter the group name and avatar (optional).

-   Chat 1 - 1 with socketIO

    -   Chat 1-1: The user can chat text messages that come with emojis and send images, files, locations and call. More users can react to messages, delete messages, delete me messages, pin messages, play video files, preview file, preview link, and reply to previous messages.

-   Chat group with socketIO

    -   Chat group: Chat groups can add new members to the group. With admin roles, users can remove users, yield admin roles, and add new deputy. The user can chat text messages that come with emojis and send images, files, locations and call. More users can react to messages, delete messages, delete me messages, pin messages, play video files, preview file, preview link, and reply to previous messages.

### Contact

Hà Anh Thảo - [email protected]

[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com?user=thaoanhhaa1&theme=vue-dark&date_format=j%2Fn%5B%2FY%5D)](https://git.io/streak-stats)





Nguyễn Thị Trung Hiếu - [email protected]

[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com?user=NguyenHieu09&theme=vue-dark&date_format=j%2Fn%5B%2FY%5D)](https://git.io/streak-stats)