Projet de fin de formation

Réaliser le back-end et le front-end d'une application web.

Dump

Paris, une ville sale? Beaucoup trop d’incivilités qui font de Paris une des villes d’Europe les plus sales. Comment remédier à cela? Dump!

Dump est né de l’agacement de voir des déchets sauvages, de l’insalubrité et de encombrants sur les trottoirs. Pourtant, la ville de Paris multiplie les installations et actions, mais cela ne suffit pas. Parfois, des déchets restent sur le trottoir plusieurs jours. Autour des arrêts de bus, il y a de l’insalubrité. Désormais avec Dump, on peut signaler ces incivilités afin qu’elles soient traitées rapidement par le service de propreté de la ville.

Sur la plateforme Dump, nous pouvons “S’inscrire” afin de créer un compte utilisateur avec un formulaire, le modifier ou le supprimer sur son espace personnel “Mon compte”. Nous pouvons, une fois le compte créé, nous connecter à celui-ci via l’onglet “Connexion”. Une fois connecté, l’utilisateur atterrira sur une carte dynamique de Paris où sera affiché des “markers” correspondants à des signalements d’autres utilisateurs. L’utilisateur connecté pourra à son tour signaler une incivilité en allant sur la page “Signaler” pour y entrer les informations dans un formulaire.

Pour ce projet, j’ai créé une API REST avec Node.js afin de stocker les informations des utilisateurs et des signalements. J’ai également créé la base de données avec Mysql. Puis, j’ai créé la plateforme utilisateur avec React.js afin d’aller récupérer les informations sur la base de données grâce à l’API qui nous permet d’effectuer des échanges de données entre le serveur et le client. J’ai réalisé des maquettes avec un design minimaliste afin que les informations soient accessibles et claires pour tout le monde. La plateforme est également responsive de façon à être consultable sur tous les supports.

Back-end

1 – Création de mon UML avec MySQLWorkbench.
2 – Architecture de mon API:
Création du fichier config.json avec  Sequelize (ORM) et création de la base de donnée sur MAMP.
3 – Création du fichier server.js.
4 – Création du fichier apiRouter.js et création des routes sur ce fichier.
5 – Tester mes routes sur Postman.

6 – Création du fichier jwt.utils.js pour sécuriser l’accès au compte utilisateur.

7 – Création du fichier authentif_handler.js pour autoriser l’accès aux fonctionnalités.

Technologies

BACK-END

API REST - Javascript - NodeJs - Npm - ExpressJS Sequelize

BACK-END

ReactJS - HTML5 - CSS3 - SASS

Détails du Projet

LINK

Open Link pour l'API

LINK

Open Link pour l'application web ReactJS