al8876 / chatter

A interactive live chatroom built with React.js, WebSockets, and SASS.

Chatter

Chatter is a live, anonymous, and interactive chatroom built in React.js, WebSockets, and SASS.

Images

Homepage of Chatter

User can input a new username and display message.

Chatter Messages

Displayed messages appear with attached username in different colours for individual user.

Sending Images through URL

By inputting a image URL, Chatter can render the image to the online users.

Active Users Count

Chatter displays total online users.

Getting Started

Repository includes two important directories:

• Clone Chatter respository
• Install all dependencies (using the "npm install" command) in both the Chatter main directory and Chatter server directory. Note: This may take a while.
• Using node.js, run "npm start" in the chatty_server directory.
• Using node.js, run "npm start" in the main chatty directory.
• On your browser, use the URL "http://localhost:3000" to access Chatter chat room.

Dependencies

• Node 6.x or above
• React 15.4.x or above
• React-dom 15.4.x or above
• Express
• SASS
• Web Sockets
• UUID
• Web Pack
• Babel