A Slack-style chat app built on top of ...
- node
- express
- socket.io
- next.js
- react
- eslint (airbnb style guide)
- jest
- babel
- font awesome
- and a bunch of others libraries...
Tested on Chrome 60 (Linux Debian 8) (Node v.7.10)
- Server-side rendering by default (thanks to Next.js!)
- BEM conventions for CSS styling
- custom webpack config (allows importing css as modules). See example @
components/Error - chat messages and command validation
- shows when the other user typing
- prevent chatting when app is offline
- Various types of unit tests written in Jest: snapshot, state change (isolate tests - lots of headaches taken out, same result), mocks, wrapper (HOC)
- In general can work with 3+ clients, but some features (e.g. change name) won't as the server is not keeping track of the clients connected
- auto-scroll to bottom
- messages are animated!
(here I use yarn but npm should work too)
First install the dependencies ..: simply run yarn (or npm install)
- yarn run
dev: run app indevenvironment. Runs @localhost:3000 - yarn run
build: build app to run in anode server(output:out/) - yarn run
start: run app inproductionenvironment (after runningbuild) - yarn run
export: export app forstatic hosting(server part won't work) - yarn run
test: to run tests - yarn run
lint: to run eslint - yarn run
lint-fix: to fix eventual linting errors (relies on eslint capability of doing it!)
(open 2 windows to chat!)
<message>: send a normal message. You can also includes emoticons by typing(smile)and / or(frown). Prefix with/highlightto obtain 10% biffer font and background 10% darker. Prefix with/thinkto have the message appear in dark gray./nick: show your new name on the other chat/oops: remove last messages (both chats)/fadelast: show last message sent with 10% visibility (sender chat only)/countdown <seconds> <valid url>: to open a window with<valid url>after X ` on the other user's chat