- Display a list of all the conversations
- Allow the user to select a conversation
- Inside the conversation, there is a list of all the messages between these two users.
- As a user, you can type and send new messages in this conversation
Using a data fetching library will avoid a lot of repeated code and remove the need to use a state management library to handle the data.
Allows me to do typescript runtime validation
I wrapped all the components from the 3rd party library i use so it can easily be modified later on.
Here are a few screenshots of what I've implemented
Click to see the pages
Mobile list :
Desktop list :
Mobile conversation :
Mobile conversation when trying to send an empty message:
Desktop empty conversation :
Desktop conversation :
Desktop conversation on hover over a message :
