Chatter Coding Challenge 🤖  

 

Requirements 📖

Most of the work needs to be done in the Messages components. chatter/src/components/Messages/components/Messages.js

• Implement hooks to handle events (sending/receiving messages)
• Display messages (both sent and received)
• 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
  • Documentation: https://socket.io/
• Implement audio cues for sending/receiving messages
• Scroll to the bottom of the messages list when sending/receiving a message

 

What's Already Been Done 🏁

• 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

 

Botty Socket Events

See the Botty server documentation for more information.

• bot-typing: Emitted by Botty when they are typing in response to a user message.
• bot-message: Emitted by Botty with a message payload in response to a user message.
• user-message: Emitted by you/the client with a messsage payload

 

Message Classes

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

 

Think about 💡

• References to functions and current hook state
• How to interact with socket.io, events and payloads
• How React contexts work

 

Screenshots 🌄