lucasmrl/chat-app

A chat app built with Node.js, Socket.io, React.js, and Tailwind CSS.

Chat-app 🦜

A chat app built with Node.js, Socket.io, React.js, and Tailwind CSS.

View Demo · Report Bug · Request Feature

About The Project

A real-time app to exchange messages with connected users. Built for learning purposes. This was the first time using Socket.io, so I decided to follow their tutorial to create a chat app and I added a few of the suggested features.

Built With

• Node.js
• Socket.io
• React.js
• Tailwind CSS

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

You need to have npm installed.

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/lucasmrl/chat-app.git

2. From the root, install NPM packages

   npm install

3. From the CLIENT directory, install NPM packages

   npm install

4. Run the project using this command:

   npm run dev

Deploy (Example using Heroku)

• uncomment lines 10-13 from "server.js"

   // app.use(express.static(path.join(__dirname, "client/build")));
   // app.get("/*", function (req, res) {
   //   res.sendFile(path.join(__dirname, "client/build", "index.html"));
   // });

Features

• Support for nickname
• Message to connected users when someone connects or disconnects
• List with online users
• Private messages
• Mobile friendly

Future improvements

• Add “{user} is typing” functionality.
• Support for changing avatar image
• Option to create/join different "rooms"
• Add rich text editor
• Add support for videos, images, and GIFs.

License

Distributed under the MIT License. See LICENSE for more information.

chat-app's Issues

In a few iPhones, nothing shows up on the screen when using Safari/Chrome

2 reports of users not being able to open the chat on iOS devices (Safari & Chrome)

User chat abuse

https://youtu.be/fmIjfh1jpIc

connect to the database

store data in the MySQL database and retrieve data from it.

Break chat when user use big nickname.

Void messages

I can send void messages.

Prevent user to send private message to self

Add random join/leave messages when user connect to chat.

Break chat when user send big message

Chat not set on full screen.

Can you make responsible chat on all screen size?

System:

Bug:

Break chat when user select reply to big username.

User avatars are not perfect circles

User avatars are weirdly shaped

the image above is a demonstration of the issue

User with `null` nickname

Sometimes I show messages null left the chat 👋🏻. Can you fix it?