Foreword

This project have been developed following an NFLabs challenge for its hiring process. The app is a front-end only slack clone.

A live version is available here: react-slack.heroku.com

You can read the original instructions here.

Usage

Make sure you have Node.js and npm installed. If you do not, please visit Node.js install page

This project has been developed with Node.js v5.12.0 & npm 3.8.6 .

Short Version

Type

npm install
npm start

Open http://localhost:8080/

Long Version

Install

First you should install the dependencies by running npm install.

Bundling

You can bundle the source files into a single javascript file by running npm run bundle

Test

The tests can be run by typing npm run test.

Additionally use npm run test:watch for continuous testing while coding.

Linting

Javascript

You can lint the code manually by running npm run lint. Continuous linting via your favorite editor is recommended.

CSS

CSS linting is done following airbnb styleguides for SCSS (a superset of CSS). There is no pre-processing or transpiling on the project vanilla CSS. It is simply linted using scss-lint.

There is no CSS linting automation, please follow scss-lint instructions if you want to lint your vanilla CSS (you will need ruby). A linting plugin for your favorite editor is recommended.

The linting rules are the one linked in the instructions (airbnb css styleguides) with some additions due to vanilla CSS lack of advanced features:

ColorVariable: Disabled
VendorPrefix: Disabled
MergeableSelector: Disabled
Comment : Disabled

Running a local Webserver

You can start a local server by running npm run webserver

Project Structure

File Tree

├── INSTRUCTIONS.md
├── README.md
├─┬ app
│ ├─┬ actions
│ │ ├── index.js
│ │ ├── message.js
│ │ ├── room.js
│ │ ├── session.js
│ │ └── types.js
│ ├─┬ api
│ │ ├── database.js
│ │ ├── db.json
│ │ ├── delete.js
│ │ ├── get.js
│ │ ├── index.js
│ │ ├── post.js
│ │ └── put.js
│ ├─┬ components
│ │ ├─┬ container
│ │ │ ├── channel-row.js
│ │ │ ├── channel-table.js
│ │ │ ├── channel.js
│ │ │ ├── comment-box.js
│ │ │ ├── home.js
│ │ │ ├── index.js
│ │ │ ├── message-entry.js
│ │ │ ├── message.js
│ │ │ └── user-row.js
│ │ ├─┬ presentational
│ │ │ ├── chat-window.js
│ │ │ ├── index.js
│ │ │ ├── loading.js
│ │ │ ├── message-list.js
│ │ │ ├── sidebar.js
│ │ │ ├── user-table.js
│ │ │ └── welcome.js
│ │ └── prop-types.js
│ ├── index.js
│ ├─┬ reducers
│ │ ├── index.js
│ │ ├── message.js
│ │ ├── room.js
│ │ └── session.js
│ ├── router.js
│ └── store.js
├── index.html
├─┬ mock-database
│ └── main.js
├── package.json
├─┬ public
│ ├── favicon.ico
│ ├─┬ img
│ │ ├── avatar-0.png
│ │ ├── ...
│ │ ├── avatar-7.png
│ │ └── logo.png
│ └── style.css
├─┬ test
│ ├─┬ components
│ │ ├── container.js
│ │ └── presentational.js
│ ├── setup.js
│ └── state.json
└── webpack.config.js

Dependencies

All dependencies are listed under dev-dependencies in package.json

Bundler

webpack: Webpack
webpack-dev-server: Webpack dev server

Transpiler

babel-core: Babel
babel-loader: Babel loader for webpack
babel-preset-es2015: Babel es2015 preset
babel-preset-react: Babel react preset

Virtual DOM framework

react: React
react-dom: React DOM

State Container

redux: Redux
react-redux: React bindings

Linter

eslint: Javascript Linter
eslint-loader : ESLint loader for webpack
eslint-plugin-react: Linting react
eslint-config-airbnb: Airbnb guidelines
eslint-plugin-jsx-a11y: Linting jsx
eslint-plugin-import: Linting imports

Mocking database

babel-cli: For running the database generator directly in ES6.
chance: A generator of random strings, numbers, etc.

Utilities

lodash: Utility library
immutable: Immutable Data Collections

Test framework

mocha: Testing framework.
chai: Assertion library.
enzyme: Dom manipulation library.
chai-enzyme: Chai - Enzyme bindings.
jsdom: Simulating the DOM in javascript for testing.

poksme/front-end-challenge