Urbateur

Développement back-end et front-end de la plateforme urbateur

Développement front-end & back-end

Ce projet consistait à la création d'un réseau social permettant de mettre en relations les différents acteurs du domaine de l'artisanat et de l'architecture. L'objectif principal était de construire une plateforme permettant aux utilisateurs d'interagir entre eux. Lumen et Angular 9 ont été utilisés durant ce projet.

Dans un premier temps, j'ai commencé à découper le projet en de petits modules afin de pouvoir mieux m'organiser. Ainsi, un module est chargé du Mur de l'utilisateur, un autre pour son Réseau, un autre pour la Messagerie Instantanée etc...

Page d'accueil de happy closet

Intégration de la maquette

La maquette ayant été fourni par le graphiste, il a fallu passer à son intégration et commencer à donner vie au projet. Angular 9 a été utilisé pour le development front de la plateforme ce qui permet d'avoir une interface très interactive et fluide pour l'utilisateur.

J'ai utilisé Angular 9 car il est entièrement basé sur TypeScript. TypeScript étant du JavaScript typé, il permet de valider le code Javascript à l'avance et de rendre la maintenance du projet un peu plus abordable. En ce qui concerne le CSS, j'ai utilisé SASS afin de faciliter l'écriture du CSS et de mieux l'organiser.

Profil de l'utilisateur

Urbateur présente différents types d'utilisateur et l'interface doit s'adapter en fonction du type de l'utilisateur. Ainsi, en fonction des données qui seront envoyé par le back-end, nous activons ou désactivons les différents modules de la plateforme.

Système de publication

Comme tout réseau social, Urbateur permet à ses utilisateurs de publier sur leur profil. La publication peut être de type texte, vidéos, photos, offre d'emploi ou encore demande d'emploi. Les options de publication s'affichent en fonction du type de l'utilisateur.

Pour le téléversement des vidéos ou des photos, le fichier est divisé en de petites parties d'environ 1 méga et chaque morceau est par la suite envoyé au serveur. Si l'envoi d'un morceau échoue à cause d'une erreur ou d'un problème d'internet, on continue de réessayer l'envoie jusqu'à cela fonctionne. Ainsi l'utilisateur n'aura pas besoin de reprendre tout le téléversement lors d'un problème d'internet.

Messagerie de Urbateur

Une Messagerie instantanée

Urbateur possède une messagerie instantanée permettant à ses membres d'interagir entre eux. Un utilisateur peut donc envoyé un message, une photo ou une vidéo à un membre de son réseau. Il est aussi possible de créer des groupes de conversations.

Websocket

Le protocole websocket, grâce aux canaux full-duplex qu'il crée par dessus la couche TCP permet d'assurer une communication bidirectionnelle entre le serveur et le client. Il intervient ainsi dans la messagerie pour permettre aux utilisateurs de recevoir les messages instantanément.

Roles

  • Développeur Back-end
  • Développeur Front-end

Technologies

  • Lumen
  • Angular 9
  • Socket.io
Projet précédent
Happy Closet
Projet suivant
Fink.ma
Me retrouver