Skip to content
React: Lightweight SPA chat app. The client-side app communicates with a server via WebSockets for multi-user real-time updates.
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
chatty_server
screenshots
src
styles
.babelrc
.eslintrc
.gitignore
.jshintrc
LICENSE
README.md
index.html
package-lock.json
package.json
server.js
webpack.config.js

README.md

Chatty App - Lighthouse Labs Assignment

Lightweight single-page chat app built with ReactJS in Node. The client-side app communicates with a server via WebSockets for multi-user real-time updates.

Built using the provided React Simple Boilerplate.

Screenshots

Key features

More features

Morning theme

Afternoon theme

Night theme

Installation and Startup:

The repository contains both the front-end application in chatty-app/ and the server in chatty-app/chatty_server/. After cloning the repository, install dependencies:

chatty-app/ $ npm i
...
chatty-app/chatty_server $ npm i

Start both servers:

chatty-app/ $ npm start  // (localhost:3000)
...
chatty-app/chatty_server $ npm start  // (localhost:3001)

Then connect to the client in your browser at: http://localhost:3000/

Enabling Giphy Support

In order to use the Giphy API, you must set up an API key and make it accessible to Chatty App. Here's how you do that:

  1. Go to developers.giphy.com and make an account (or log in), and generate an API key
  2. Open chatty_server/secrets-example.js, and replace <your Giphy API key goes here> with your key. Make sure you wrap it in quotes: "API KEY"
  3. Rename secrets-example.js to secrets.js

That's it! Now you should be able to use the Giphy API.

Features

Core Project Requirements

  • When any connected user sends a chat message, all connected users receive and display the message
  • When any connected user changes their name, all connected users are notified of the name change
  • Notifications are styled differently from chat messages
  • Header will display the count of connected users
  • When the number of connected users changes, this count will be updated for all connected users

Bonus Features

Here are some other things that I added to make this project my own:

  • Custom CSS
  • 3 Themes that are automatically applied depending on the time of day
  • Placeholder text before the client has received messages (randomly shows 1 of 10 conversation starters)
  • User is greeted by the server upon receiving their first notification, and told about app features
  • Support for /setcolor command in the chat bar, which allows users to change their username color. (E.g. /setcolor red or /setcolor #006699)
  • Giphy API: users can enter /gif query in the chat bar, where query will be sent to the Giphy API. The server will randomly send back one of the returned gifs to be displayed in the browser
  • /help shows a list of commands

Dependencies

  • React
  • React DOM
  • Webpack
  • Express
  • Giphy JS SDK
  • UUID
  • ws (WebSockets)

Dev Dependencies

  • Babel Core
  • Babel Loader
  • Babel Preset ES 2015
  • Babel Preset React
  • Babel Preset Stage 0
  • CSS Loader
  • ESlint
  • ESlint React
  • Node Sass
  • Sass-Loader
  • SockJS Client
  • Style Loader
  • Webpack
  • Webpack Dev Server
You can’t perform that action at this time.