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.

Objectif · Explorer le protocole WebSocket avec de la collaboration en temps réel, et tester Redis.

Aperçu

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

  1. FrontReact

    Une SPA avec React Router pour la navigation entre les pages.

  2. BackExpress · WebSocket

    La logique métier, et la messagerie en temps réel entre utilisateurs via WebSocket.

  3. AuthRedis · OTP

    Inscription en deux étapes : les données de l'utilisateur sont stockées temporairement dans Redis sous un identifiant UUID, glissé dans un JWT envoyé au front. Quand l'utilisateur valide le code OTP, cet identifiant permet de relire Redis et de créer le compte. Sur la version en ligne, cette étape est aujourd'hui désactivée, tout comme la réinitialisation du mot de passe.

  4. DonnéesPostgreSQL

    Les données principales. Un script de seed la préremplit avec les noms et logos des technologies, récupérés via l'API svgl.app.

  5. MédiasCloudinary

    Le stockage des images.

Stack technique

ReactExpress.jsTailwindCSSWebSocketPostgreSQLRedisCloudinary

Liens