MyChat

Live Demo @ https://mychat.codedting.com

Features

Authentication with username and password using JSON Web Token (JWT)
Chat room creation
Live updates of messages and rooms using polling
Emojis
Link detection
Chrome, Firefox, and Opera support

Built using:

React
Redux
Redux API Middleware
React Router

DraftJs
DraftJs Plugin Editor
Moment

Sass
WebPack
Babel

File Structure

MyChat
├── client
│   ├── components
│   │   └── // Reusable components and static views
│   ├── config
│   │   └── // Client configuration files
│   ├── containers
│   │   └── // Components that make up application views
│   ├── modules
│   │   └── // Redux actions, constants, and reducers
│   └── styles
│       └── // Sass mixins, variables, and imports
├── node_modules
│   └── // Dependencies
├── public
│   └── // Optimized html, js, and css files from `npm run build`
├── server
│   └── // Development server
└── // Application dot files, READMEs, and configs

scss files are located in directories of the components they are styling.
client/modules folder is a spin on redux ducks.
- Actions are created following FSA standard.
- API calls are made using Redux API Middleware RSAA.

Viewing the app for development

Requirements

MongoDb 3.2

Node 6

https://nodejs.org/en/

For OSX, homebrew can be used to install mongodb and node:

brew install mongodb
brew install node

Development

As configured currently, mongodb is required to run the development server.

The development server is using express and webpack-dev-middleware to serve the client. Install dependencies using npm:

npm install

Start dev server using:

npm start

The WEB server listens on port 9000 The API server listens on port 9001

Wait for the WebPack bundle to build then navigate to:

http://localhost:9000

Build

Optimized files to serve for production can be built using:

npm run build

Files will be output to the /public folder

dting/mychat