Front-end technical test

A proof of concept of a messaging interface.

Following intructions : docs/intructions.md

Getting Started

Prerequisites

Docker
Docker-Compose

Installation

Clone the repo

git clone https://github.com/Timer91/frontend-technical-test

Launch the project with Docker
```
docker-compose up --build
```

How to use

On your browser, open :

http://localhost:3000/messenger

Project architecture

This project has been thinking in Web Components.

Messenger page

Conversations
├─ ConversationItem
Chat
├─ Messages
│  ├─ MessageItem
├─ SendMessage

On this app:

you are logged by default with the first user (id: 1)
the provided json-server API is used for getting user's conversations and send some messages into it
the getted conversations are listed in Conversations component
the getted messages are display on Messages component
you can send messages with SendMessage component

Those components works with a main context which store the selected conversation ID. Conversations and Chat components are self-reliant and responsive. Moreover, you can pass it a custom CSS class for implement it whereever you would. Indeed, you can put the Conversations component at the right of your page fix to the border, and open a Chat component each time you select a conversation, like Messenger.

What next

[] Implement a SSO or a homemade authenticate service
[] Implement a notification system
[] Use socket.io library
[] Implement a loading component like Messenger' one
[] Implement more unit and integration tests

Author

Jérémie (Timer91) Marais

Acknowledgements

Thanks to LeBonCoin for giving me the opportunity to let me demonstrate my skills.