CHAT

CONTEXTE

Ce projet a été réalisé en 1 semaine complète avec l’aide de 3 autres coéquipiers. Nous avions à disposition une API permettant d’envoyer et récupérer des messages sur un serveur et nous n’avions jamais utilisé auparavant Angular.

TRAVAIL REALISE

Nous avons crée un chat fonctionnel permettant de discuter avec d’autres personnes et de créer des salons de chat. Nous avons poussé le projet un peu plus loin en permettant à l’utilisateur de se connecter sur son compte via un portail, lui permettre de personnaliser la couleur de ses bulles de conversation, afficher les miniatures tweeter, instagram et youtube dans les messages et enfin proposer un design responsive suivant les directives du Material Design de Google.

Voici une vue du produit obtenu en mode desktop :

Notre application se compose donc en 2 parties, la liste des threads (ou des salons) à gauche, et la conversation active sur la droite.

Voici une vue du produit obtenu en mode mobile :

Interface en mode mobile : à gauche la liste des salons et à droite une conversation

Sur ce projet je me suis principalement occupé du responsive design afin d’offrir à l’utilisateur une interface adaptée et pratique quelque soit le support (smartphone/tablette/ordinateur). Comme on peux le voir sur l’image de gauche, l’interface se rétracte lorsque la résolution devient trop petite et laisse apparaître un bouton “sandwich” afin de pouvoir naviguer entre la liste des salons et l’écran du chat actuel. Chaque partie est en plein écran et l’on peu basculer entre les deux via le bouton “sandwich” et la flèche de retour.

TECHNOLOGIES UTILISEES

Angular, css, html, javascript, material design

Leave a Reply

Your email address will not be published. Required fields are marked *