/gitter-clone

Portfolio Project clone of gitter.im

Primary LanguageJavaScript

Gitter-clone

Build Status codecov

preview gif

This is app was built as portfolio piece representing a subset of the features of Troupe Technology's wonderful chat app, Gitter.


Major features

  • MD / syntax highlighting support for messages
  • Messages grouped into bursts
  • Create Channels
  • Load previous messages in channel
  • Send Messages to all subscribed clients on channel

Built with

React makes it really easy to focus on the view in a declarative way. I like that it makes it easy to write composable, testable UI. Routing is handled by react router.

Redux is where the fun is at. Maintain a flat minimal state, with dictionary of normalized objects. I use reselect to compute derived data. Redux devtools are also great, I kept it enabled on production for anyone wanting to easily take a look at the app's state.

Fantastic code bundler once you get past the learning curve. I use it for a number of things including: transpile ES2015+ javascript to ES5 with Babel, compile Sass into css, optimize assets, hot reload code, build minimized split production code, + more.

It's nice to have JS everywhere. Express is fast and minimal. The backend is pretty simple with a router, a few controllers, and basic db interactions. Logging handled by winston.

This project doesn't currently require a ton of data persistence. MongoDB + Mongoose make it easy to quickly update the Schema. If the project continues to grow I will probably switch to a relational DB. Also Mongo is still trendy.

Unit tests run by Jest. If you haven't seen Jest recently, you should take another look. Enzyme is used for React support and SuperTest is used for HTTP assertions. Enzyme-to-JSON is also great and worth checking out in conjunction with the other test utilities.

Continuous integration handled by the super fast SemaphoreCI. Passing merges to master are auto deployed with help from pm2.

Application hosted on Ubuntu Digital Ocean droplet. SSH is fun!


Setup

If you don't have yarn commands can be run with npm. First, clone and cd into the repo and install the dependencies.

$ git clone https://github.com/tylercrosse/gitter-clone.git
$ cd gitter-clone
$ yarn install

Additional commands:

yarn dev
  • Start development server on 127.0.0.1:3333
yarn build
  • Build a production version of the app.
yarn start
  • Start production server on 127.0.0.1:3333 to serve built app. Requires the build command to have already been run.
yarn test
  • Run all of the projects tests using jest.
yarn lint
  • Lint all of the projects javascript files using eslint.

Contributing

Thank you for your interest! Unfortunately, I'm not currently taking contributions.