hellotakako / socket-chat-example Goto Github PK

Add settings page or modal window

Example messsages:
"{User} joined"
"{User} left"

Implement React and material-UI.
Branch: react-migrate

• webpack configuration
  https://www.codecademy.com/articles/react-setup-iii
• migrate to React.js
• implement Material-UI
• Make the page mobile-friendly
• Proxy error on localhost: ECONNREFUSED
  https://nodejs.org/api/errors.html#errors_common_system_errors
• network configuration. connection b/w react.js and node.js on Heroku

For readability and maintenance.

• make the favicon
• set the favicon

The connection starts working after refreshing /room page.

Show a modal window to explain the user how to use the app.
(Only for the user, not other users in the room)

• Home page with "create room" button
  Implement Nickname on the homepage.
  Give unique room URL to the user.

• Add Dark theme
• toggle button for switching the theme

Set the height of message all same, if the message is white spaces or tabs, etc.
If the message is complete blank, ignore the submit.

Add “{user} is typing” functionality.

Add Logout button and delete cookie when logged out.

• Specify the parts you want to test
• Add those to .travis.yml file

When user typed from pc, the message shown on smartphone.
But pc client doesn't show the message when typed from smartphone.

Add time after each message

Enable image(.jpg, .gif, .png) upload.

Store the messages on client side during the session.
Consider to add buttons to export the messages or store the backup on the server.

Give nicknames for each user when they join the room.

• Get nickname value on homepage

Show who’s online.

• get each user's session ID
• get each user's nickname
• console.log users
• map all users in subContents.js section
• add toggle button to show/hide the sub contents area
• all cookies expire when the user went back home(/)

Reference:
https://dev.to/bravemaster619/how-to-prevent-multiple-socket-connections-and-events-in-react-531d

Enable emoji.

Add private messaging.

A thread for Issues on "User is typing..." message

Add message notification function, icon or sound when someone commented.
Toggle the function on/off with settings.

On current app,
when the message hit the bottom of the window, user need to scroll down.
Also the bottom part of message is covered by the text input box.

Add a function that owner can set a password to verify other users when they join the room.