Challenge Overview
The HiWire Chat application will be a skeleton design of a chat application, similar to Slack or Rocket.chat.
The application will be a single window with scrolling chat and a simulated backend, but all on the client-side.
The client wants this prototype to encompass many rich chat features like:
* Message display, and editing
* Typing indicator
* Custom and regular emoji support
* Video, picture, and document upload, with preview
* User avatar images
* Animations and transitions
* Bold, italics, code formatting, Katex support
* React-Native clients for mobile devices and desktop
Browser requirements
We'll be targeting all modern browsers - IE, Firefox, Safari, and Chrome. If there are problems with supporting a specific browser, please bring this up in the forum right away. Mobile targets will be handled by a future React Native implementation.
React
The implementation will be done in React. Future challenges will also integrate with React-Native and Electron.io for native mobile and desktop clients.
Your solution must be easily deployable and testable on Heroku
UI
We recently implemented a large prototype of a React application called HiWire. For this challenge, we'll reuse the chat part of that UI for the message display. We can tweak this a bit for message input to match the requirements below, but message display should follow the UI as closely as possible.
The converted React Native prototype, as well as the design files, will be available in the forum. Focus on the "Messages" portion of the screens.
Initial challenge requirements
This initial challenge will define the base functionality of the prototype, including:
* Message display and scrolling
* Text entry
* Message editing
* Typing indicator
Message display and scrolling
The message display should support showing a good number of past messages that can be mocked initially. New messages entered should be displayed in the list in the UI, but this won't be persistent. Messages should be easily scrolled, and the input panel for typing a new message should remain at the bottom of the message panel.
Feel free to use code from rocket.chat for this, but we want to match the UI structure defined below.
Multiple users
Since we won't have a persistent backend for the chat messages, we'll simulate this in the browser using local storage and local storage events.
To simulate multiple users, we'll have two endpoints to the deployed site, like:
"chat-submission.herokuapp.com/user1" and "chat-submission.herokuapp.com/user2"
The page shown on /user1 will simulate user1 and the page shown on /user2 will simulate user2. Each will add messages under either user1 or user2.
The goal is to be able to open two browser tabs or windows, one with /user1 and one with /user2. We'll be able to enter messages, edit, and delete messages as user1 and see the results on the /user2 window, and vice versa. This will also be used for testing the typing indicator described below.
Message abstraction
The message and local storage definition must be easily swapped out for a real implementation using websockets at a later date. Please make sure that the general mock using local storage is well encapsulated to make it easy to swap out with the real backend functionality later.
Text entry
Text entry should be similar to what's already in rocket.chat (see the existing code section below). Your implementation must initially support:
* Bold
* Italics
* Strike through
* Multiple lines
* Katex formatting and rendering (https://www.npmjs.com/package/katex)
A future challenge will implement code formatting and emojis.
Message Editing and Deleting
Previous messages should be editable and deletable by the user. The should be able to bring up a menu for a previous message they've written and see two options:
* Edit
* Delete
When an edit is active, we'll highlight the message being edited and will change the background colour of the message panel to light blue to indicate an edit is active.
Once a message has been edited, please show text next to the message time that says "(edited)"
To delete a message, we'll first show a popup that says "Are you sure you want to delete this message? You will not be able to recover the message once it has been deleted".
The message should then be removed from the scrolling message display.
Typing indicator
When a user is typing, we want an indicator shown to other users that the user is typing. You can see this implemented in Slack, with small text underneath the message input panel that says "{Username} is typing".
For this challenge, we'll show the typing message when using the tab-communication defined above, as user1 is typing (displayed on user2) or as user2 is typing (displayed on user1)
Configuration
The username and user avatar image shown for user1 and user2 should be configurable so we can tweak this in the future.
Existing code
The existing Rocket.chat platform is open source and MIT licensed, so we can use it here. The customer has explicitly stated that they like the rocket.chat input panel for typing / editing messages, so please reuse that implementation for this challenge. We'll be making future changes to it in other challenges:
https://github.com/RocketChat/Rocket.Chat
Submission
Your submission must include:
* The code meeting the requirements above
* A detailed README.md covering how to build and deploy the application locally, and also how to deploy to Heroku
* Validation information (either a separate doc or in the README.md) for each of the requirements above
* A video showing the interactions for things like editing, and the typing indicator
The application will be a single window with scrolling chat and a simulated backend, but all on the client-side.
The client wants this prototype to encompass many rich chat features like:
* Message display, and editing
* Typing indicator
* Custom and regular emoji support
* Video, picture, and document upload, with preview
* User avatar images
* Animations and transitions
* Bold, italics, code formatting, Katex support
* React-Native clients for mobile devices and desktop
Browser requirements
We'll be targeting all modern browsers - IE, Firefox, Safari, and Chrome. If there are problems with supporting a specific browser, please bring this up in the forum right away. Mobile targets will be handled by a future React Native implementation.
React
The implementation will be done in React. Future challenges will also integrate with React-Native and Electron.io for native mobile and desktop clients.
Your solution must be easily deployable and testable on Heroku
UI
We recently implemented a large prototype of a React application called HiWire. For this challenge, we'll reuse the chat part of that UI for the message display. We can tweak this a bit for message input to match the requirements below, but message display should follow the UI as closely as possible.
The converted React Native prototype, as well as the design files, will be available in the forum. Focus on the "Messages" portion of the screens.
Initial challenge requirements
This initial challenge will define the base functionality of the prototype, including:
* Message display and scrolling
* Text entry
* Message editing
* Typing indicator
Message display and scrolling
The message display should support showing a good number of past messages that can be mocked initially. New messages entered should be displayed in the list in the UI, but this won't be persistent. Messages should be easily scrolled, and the input panel for typing a new message should remain at the bottom of the message panel.
Feel free to use code from rocket.chat for this, but we want to match the UI structure defined below.
Multiple users
Since we won't have a persistent backend for the chat messages, we'll simulate this in the browser using local storage and local storage events.
To simulate multiple users, we'll have two endpoints to the deployed site, like:
"chat-submission.herokuapp.com/user1" and "chat-submission.herokuapp.com/user2"
The page shown on /user1 will simulate user1 and the page shown on /user2 will simulate user2. Each will add messages under either user1 or user2.
The goal is to be able to open two browser tabs or windows, one with /user1 and one with /user2. We'll be able to enter messages, edit, and delete messages as user1 and see the results on the /user2 window, and vice versa. This will also be used for testing the typing indicator described below.
Message abstraction
The message and local storage definition must be easily swapped out for a real implementation using websockets at a later date. Please make sure that the general mock using local storage is well encapsulated to make it easy to swap out with the real backend functionality later.
Text entry
Text entry should be similar to what's already in rocket.chat (see the existing code section below). Your implementation must initially support:
* Bold
* Italics
* Strike through
* Multiple lines
* Katex formatting and rendering (https://www.npmjs.com/package/katex)
A future challenge will implement code formatting and emojis.
Message Editing and Deleting
Previous messages should be editable and deletable by the user. The should be able to bring up a menu for a previous message they've written and see two options:
* Edit
* Delete
When an edit is active, we'll highlight the message being edited and will change the background colour of the message panel to light blue to indicate an edit is active.
Once a message has been edited, please show text next to the message time that says "(edited)"
To delete a message, we'll first show a popup that says "Are you sure you want to delete this message? You will not be able to recover the message once it has been deleted".
The message should then be removed from the scrolling message display.
Typing indicator
When a user is typing, we want an indicator shown to other users that the user is typing. You can see this implemented in Slack, with small text underneath the message input panel that says "{Username} is typing".
For this challenge, we'll show the typing message when using the tab-communication defined above, as user1 is typing (displayed on user2) or as user2 is typing (displayed on user1)
Configuration
The username and user avatar image shown for user1 and user2 should be configurable so we can tweak this in the future.
Existing code
The existing Rocket.chat platform is open source and MIT licensed, so we can use it here. The customer has explicitly stated that they like the rocket.chat input panel for typing / editing messages, so please reuse that implementation for this challenge. We'll be making future changes to it in other challenges:
https://github.com/RocketChat/Rocket.Chat
Submission
Your submission must include:
* The code meeting the requirements above
* A detailed README.md covering how to build and deploy the application locally, and also how to deploy to Heroku
* Validation information (either a separate doc or in the README.md) for each of the requirements above
* A video showing the interactions for things like editing, and the typing indicator