Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/truptigaonkar/mandatory-advanced-js1
Simple chat application using React and backend server Socket.io (Styling with Reactstrap, Google fonts, Font Awesome)
https://github.com/truptigaonkar/mandatory-advanced-js1
reactjs reactstrap socket-io
Last synced: about 2 months ago
JSON representation
Simple chat application using React and backend server Socket.io (Styling with Reactstrap, Google fonts, Font Awesome)
- Host: GitHub
- URL: https://github.com/truptigaonkar/mandatory-advanced-js1
- Owner: truptigaonkar
- Created: 2019-03-04T08:01:07.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T14:37:53.000Z (about 2 years ago)
- Last Synced: 2023-03-08T00:53:47.215Z (almost 2 years ago)
- Topics: reactjs, reactstrap, socket-io
- Language: JavaScript
- Homepage: http://truptigaonkar.github.io/mandatory-advanced-js1
- Size: 3.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Simple Chat Application - Advanced JavaScript with React - [Live Demo]( http://truptigaonkar.github.io/mandatory-advanced-js1/)
### Instructions
* Create a simple chat application using React and backend server - Socket.io server is provided http://mandatory-advanced-js1.devspace.host/.
* Socket.io is a library that enables real-time communication between a client and a server. The client and server communicates by sending and receiving events. Please refer to the documentation for more information. https://socket.io/docs/
#### Technologies
- Node
- React
- Backend: Socket.io library (https://socket.io/docs/ )
- reactstrap (https://reactstrap.github.io/)
#### Installation
**REACT**
```
$ git clone [email protected]:truptigaonkar/mandatory-advanced-js1.git
$ cd mandatory-advanced-js1.git
$ npm install
$ npm start
```
**Express**
```
$ node server/server.js
$ npm start
```
#### Events
The server sends the following events
* messages - This event is sent automatically when a client connects and will give a list of all messages on the server
* new_message - This event is sent to all clients (except the sender) when a new message is sent to the server
* A message sent from the server has the following structure
```
{
username: “A username”,
content: “A message”,
timestamp: 1551191228686, // A timestamp in milliseconds
id: “message-120”, // A unique ID
}
```
* To send a new message to the server an event called “message” is sent from the client. The message should have the following form:
```
{
username: “A username”,
content: “A message”,
}
```
#### The client
* Your task is to implement a client for this server. The client should be implemented using React and contain two views:
* A “login” screen where the user inputs a username
* A “chat” screen that shows all the messages and contains a text input field where the user can add new messages
* When sending a new message to the server it will not be returned to the sender (it’s only sent to all other connected clients) but it must still be shown in the client.
#### Validation
* The server has some limitations on the username and content
* The username can only contain alphanumeric characters, “-”, “_” and spaces and must be between 1 and 12 characters long
* The content must be between 1 and 200 characters long
* This validation should be added to the client.
#### Emojis
The client should handle emojis, similar to how it works in Slack.
* E.g. if the message contains the string “:heart:” it should be replaced with a heart emoji. You are required to support at least three different emojis.
#### Links
If a message contains a URL it should be automatically converted to a link.
#### Requirements
* If a message contains a URL it should be automatically converted to a link.
* It should contain a “login” screen with a text input and a button. This screen is shown when the app is opened.
* When a username is submitted the user is shown a “chat” screen with a text input for sending messages and a list of messages.
* The message list should be populated with the messages received from the server and new messages should be added automatically (including messages sent from the client)
* The chat screen should contain a “close” button so the user can return to the “login” screen.
* Support for emojis.
* Automatically convert URLs into links
#### My Contribution:
- [x] styling
- [x] reactstrap
- [x] Google Font
- [x] Font Awesome