Welcome to our coding challenge! Please read this file carefuly, as it contains all of the information you need.
Mobile view:
The project starts with an error. Let's fix the error and get things rolling.
- Show the initial Botty message by default (can be found in
common/constants) - Submit a message and render it to the list.
- Use sockets to:
- Send the user's message to Botty
- Show a typing message when Botty is typing
- Handle incoming Botty messages and display them
- Scroll to the bottom of the messages list when sending/receiving a message
Most of the work needs to be done in the Messages components.
- Socket setup/configuration with the Botty server (botty.alexgurr.com)
- All UX and UI, including for messages
- All components, including a message and typing message component
- A context for setting the latest message, which will change the preview in the left user list
- Hooks for playing send/receive sounds
See the Botty server documentation for more information.
bot-typing: Received from Botty when they are typing in response to a user message.bot-message: Received from Botty with a message payload in response to a user message.user-message: Emitted by you/the client with a messsage payload
We've provided Message components and classes. Here's some information about the classes.
.message--last: The last message in a group.message--typing: The message the user sees when the recipient is typing.message--me: Denotes a user message