Project Nine: Chat

Have you sent or received any messages today? I bet you did and therefore are very familiar with instant messengers.

If not - I can recommend chatting with ChatGPT or AwarefyAI - those two are great friends of mine (and half of the globe it seems).

What do you think about implementing a chat today? Something simple and stylish, just to deep your feet into working with streams of events.

In your future work you could quickly swap source of events and adapt it to a variety of needs from comments and social media posts to real-time communication and AI helpers.

Chat Window: requirements and recipe

As a user I want to be able to send and receive messages, so that I can quickly communicate with an interlocutor

Here's an example of how a chat window can look like:

There are many ways how you can make a chat work and since the goal is to have a "white label" solution that you can adjust for specific needs - we can start with the basic requirements:

Requirements

1. There should be an input that allows one to send messages
2. Chat window should show text messages that you've sent
3. Chat window should show text messages that you've received
4. Chat window should be accessible and notify screen reader on each new event

Recipe

1. Design and layout a static message
2. If you'd like messages vary between those user sends and receive - layout static examples of those variations
3. Create input for user to send messages
4. Combine everything in a static chat prototype
5. Ensure that the chat is accessible
6. Hook the chat up to an event
7. Have a nice conversation with yourself

Hints

If you don't want to create a backend for a chat - you can use localStorage or window.postMessage to communicate between two tabs.

Use live regions or a specific role to ensure accessibility.

Think about different states of messages: what happens if a message fails to be sent for example? Are there any other states you'd like to incorporate?

Hard mode: Web Real-Time Communication Chat

There's not much going on in the local chat, isn't it? Luckily for us there's a whole WebRTC API available in every major browser.

Of course, to make it work you would in fact need a server, but after all - World Wide Web wouldn't be possible with just one computer. Do you think you can take on this challenge?

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?