Réseau social d’entreprise

Language: Javascript, HTML5, CSS, MySQL
Outils: NodeJS, ExpressJS, Vuejs, Axios

Création d’un réseau social d’entreprise reprenant les codes d’Instagram, 9GAG & Reddit.

Développement du back-end et du front-end, avec les fonctionnalités indispensables pour l’utilisateur: possibilité de poster une image/du texte, poster un commentaire sur un post, supprimer ses intéractions, modifier son profil etc…

01. Login / Register

L’utilisateur arrive sur la page « login » qui lui permet de s’identifier avec son adresse email et un mot de passe.

Si il n’a pas de compte, il peut cliquer sur « Pas de compte? Inscrivez-vous » et sera alors redirigé vers le formulaire d’inscription.

Le mot de passe est hashé avec Bcrypt, l’email doit être unique et la connexion est limitée à 3 erreurs d’identifiants/mot de passe.

02. Le mur

Une fois connecté, l’utilisateur obtient un token (ce token d’authentification sera présent à chaque requête Axios) et est redirigé vers « le mur » où il peut voir tous les posts et intéragir en laissant un commentaire ou cliquant sur « J’aime ».

 

Un commentaire est limité à 256 charactères et peut comporter une image/gif. On ne peut cliquer sur « J’aime » qu’une seule fois.

03. Publier un post

En cliquant sur le signe « + » situer en bas de page, une pop-up « Ajouter un post » apparaît.

On peut alors donner un titre, écrire du texte et y ajouter une photo.

04. Modifier ses posts/commentaires

L’utilisateur peut soit modifier/supprimer ses posts ou ses commentaires depuis le menu « Mes posts », soit directement depuis le mur.

Si on est l’auteur du post, 3 petits points apparaissent dans le coin supérieur droit. On a alors accès à un menu où l’on peut éditer ce post (titre/texte/image) ou tout simplement le supprimer.

Pour le commentaire, 2 icônes apparaissent, qui permettent d’éditer ou supprimer le commentaire.

05. Mon compte

Une fois connecté, l’utilisateur bénéficie d’un espace « Mon compte » qui lui permet de changer son avatar, son nom/prénom et son adresse mail.

06. Administrateur et menu administrateur

Si l’utilisateur est un administrateur, il a alors accès à la modification/suppression de n’importe quel post ou commentaire, depuis le mur (comme si il en était l’auteur) où depuis un menu dédié.

Depuis le menu dédié, il a une vue d’ensemble des derniers commentaires postés et accède à une liste des membres.

Il peut élever d’autres utilisateurs au rang d’administrateur ou les destituer.

Back-end

NodeJS
ExpressJS
MySQL
Sequelize
Multer

Sécurité

JsonWebToken
dotenv
Bcrypt
Helmet
RateLimit

Front-end

Vue.js
Axios
KeenUI