Develup·Novembre 2024

Présentation

Develup est une application web conçue pour permettre aux développeurs de collaborer sur des projets web, gérer leurs projets et communiquer en temps réel. L'application s'inspire du concept de LeBonCoin : un utilisateur peut poster un projet en précisant les critères souhaités (technologies, rythme de travail, rôle recherché, etc.), et ce projet s'affiche sur la plateforme. D'autres utilisateurs (intégrateurs, designers, développeurs..) peuvent alors échanger en temps réel pour savoir si le projet correspond à leurs attentes. Ce projet m'a permis d'explorer le protocole WebSocket en mettant en place une collaboration en temps réel et m'a aussi permis de tester Redis.

Vidéo

Fonctionnalités

  • Créer un compte utilisateur.
  • Se connecter.
  • Demander la réinitialisation du mot de passe (mot de passe oublié).
  • Ajouter, modifier ou supprimer un projet.
  • Modifier son profil.
  • Rechercher un projet selon les technologies et le rythme de travail souhaités.
  • Accéder à la page détail d'un projet.
  • Accéder à la page détail d'un utilisateur.
  • Modifier son mot de passe.
  • Supprimer son compte.
  • Communiquer en temps réel avec un utilisateur.
  • Changer de thème (clair / sombre).

Architecture

Le front-end de Develup est construit en React avec React Router pour gérer la navigation entre les pages. Le back-end repose sur Express, et les données principales sont stockées dans une base de données relationnelle PostgreSQL. Un script de seeding est utilisé pour préremplir la base avec les noms et images associés à chaque technologie ou langage, en récupérant les données via l'API https://svgl.app/api. Pour l'inscription sécurisée des utilisateurs via 2FA, une base de données en mémoire Redis est utilisée. Lors de la validation du formulaire d'inscription, toutes les informations de l'utilisateur sont temporairement stockées dans Redis, associées à un identifiant généré avec UUID. Cet identifiant est ensuite intégré dans un JWT et envoyé au front. Une fois que l'utilisateur valide le code OTP, l'identifiant est récupéré depuis le JWT afin de lire les données dans Redis et finaliser l'enregistrement de l'utilisateur. Étant un projet personnel et de test, certaines fonctionnalités ne sont plus présentes, notamment la réinitialisation du mot de passe et l'authentification via 2FA.

Stack technique

ReactExpress.jsTailwindCSSWebSocketPostgreSQLRedisCloudinary

Liens