In order to describe our application requirements, the same as previously, we start with user stories:
- As a user, I can introduce myself to the chat
- As a user, I can see real time the list of chat participants
- As a user, I can enter and submit a message
- As a user, I can see messages of chat participants as they are coming
If putting it onto wireframes, the first screen will be a simple prompt for a username:
The second screen contains a sidebar with participants and the main area with the conversation thread and a form to submit a message:
The second screen shares header and footer with the first one, but the main section consists of a participant list (on the left) and chat pane (on the right). The chat pane comprises incoming messages and submission form.
