Realtime chat app

A full-feature messenger clone built with React and Nestjs

Backend

This is the backend for the 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:

REACT_APP_API_URL=http://localhost:3001/api
REACT_APP_WEBSOCKET_URL=http://localhost:3001
REACT_APP_GIPHY_API_KEY=

Previews

Summary

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