https://github.com/orgball2608/reactchatapp

Realtime Chat App (React, TailwindCSS, Redux Toolkit, Socket.IO-client, Peerjs,... )
https://github.com/orgball2608/reactchatapp

animejs emoji-mart peerjs react-hook-form react-infinite-scroll-component reactjs redux redux-toolkit socket-io-client tailwindcss typescript yup

Last synced: 2 months ago
JSON representation

Realtime Chat App (React, TailwindCSS, Redux Toolkit, Socket.IO-client, Peerjs,... )

• Host: GitHub
• URL: https://github.com/orgball2608/reactchatapp
• Owner: orgball2608
• Created: 2022-12-14T13:17:48.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-08-02T16:41:02.000Z (about 2 years ago)
• Last Synced: 2025-06-09T21:08:35.461Z (4 months ago)
• Topics: animejs, emoji-mart, peerjs, react-hook-form, react-infinite-scroll-component, reactjs, redux, redux-toolkit, socket-io-client, tailwindcss, typescript, yup
• Language: TypeScript
• Homepage:
• Size: 8.86 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Realtime chat app

A full-feature messenger clone built with React and Nestjs

## Backend

This is the backend for the [NestChatApp](https://github.com/orgball2608/NestChatApp) project.

## Main technology used

- React, Typescript, Tailwind

- Redux toolkit

- Socket.io

- Peerjs

- React-infinite-scroll-component

- Emoji-mart

## Features

- Create conversations (personally, group)

- Allow sending

  - Text

  - Image

  - Multi image

  - File

  - Multi file

  - Stickers (from zalo)

  - Gif (from giph)

  - Emoji (emoji-mart)

- Online, offline friend status

- Video call, call (accept, reject, hang up, turn off mic, camera, hidden shortcut)

- Group video call, call (accept, reject, hang up, turn off mic, camera, hidden shortcut)

- Scroll top to load message

- Recipient is typing status

- Send friend request, reject, view profile, ....

- Show if user has seen message

- Drop file to upload

- Paste image from clipboard

- Send reactions to message (like, love, care, haha, wow, sad, angry)

- Unsent message

- Delete message

- Reply message

- Forward message

- Change conversation settings

  - Change theme

  - Change emoji icon

  - Change nickname

- Change group conversation settings

  - Change theme

  - Change title

  - Change emoji icon

  - Change nickname

  - Change avatar

- View conversation images, files

- Detect link an add an anchor to it

- ....

## Installation

- Clone the project

- Run `npm install`

- Create your own firebase project

- Create your own giphy developer account

- Example .env file:

```env

REACT_APP_API_URL=http://localhost:3001/api

REACT_APP_WEBSOCKET_URL=http://localhost:3001

REACT_APP_GIPHY_API_KEY=

```

## Previews

![register](https://github.com/orgball2608/ReactChatApp/assets/81631701/9c8155a3-6904-4136-9c6f-fcd72ef1810e)

![chat](https://github.com/orgball2608/ReactChatApp/assets/81631701/11478a8c-c0fe-4411-a6d2-e01b1dce3776)\

![chat-7](https://github.com/orgball2608/ReactChatApp/assets/81631701/f6b35a01-f78b-4b4b-a45d-5f6d3b4c53fe)

![chat-6](https://github.com/orgball2608/ReactChatApp/assets/81631701/394db553-3bcf-4051-baff-ccea593339f2)

![Screenshot 2023-08-02 225539](https://github.com/orgball2608/ReactChatApp/assets/81631701/d9fb1393-c80f-4bb6-8bb3-0b281c707881)

![call-1](https://github.com/orgball2608/ReactChatApp/assets/81631701/5ede92ce-21aa-42c0-8cb0-cd4b0f434558)

![call](https://github.com/orgball2608/ReactChatApp/assets/81631701/ce6e8042-ccdf-4e10-8823-357be5f73b6c)

![call-4](https://github.com/orgball2608/ReactChatApp/assets/81631701/9b563e61-118a-4e73-b737-02f2fa290baa)

![friend](https://github.com/orgball2608/ReactChatApp/assets/81631701/f5ce0ce4-e56a-4bdf-80d4-9ba1fe41627f)

## Summary

👉 If you like this project, give it a star ✨ and share 👨🏻‍💻 it to your friends 👈