Projet – Gestion des présences (La Plateforme_) Objectif du projet

Le but de ce projet est de réaliser une application front-end uniquement permettant aux étudiants de gérer leur présence à La Plateforme_. Les étudiants peuvent s’inscrire, se connecter, faire des demandes de présence via un calendrier, et ces demandes sont ensuite gérées par des modérateurs ou des administrateurs via un backoffice.

Le projet respecte les contraintes imposées :

HTML / CSS / JavaScript uniquement

Utilisation de Bootstrap

Données stockées dans un fichier JSON

Gestion des rôles (user, moderator, admin)

Aucune base de données ni back-end

Structure du projet

J’ai commencé par créer une arborescence claire pour séparer les responsabilités :

bigjob/ │── index.html │── backoffice.html │ ├── styles/ │ └── main.css │ ├── js/ │ ├── app.js │ ├── auth.js │ ├── calendar.js │ ├── backoffice.js │ └── utils.js │ ├── data/ │ └── db.json │ └── assets/

Chaque dossier a un rôle précis :

styles/ : le CSS du projet

js/ : toute la logique JavaScript

data/ : les données simulées (fake database)

assets/ : ressources visuelles (optionnel)

Authentification (inscription / connexion)

J’ai mis en place :

Un formulaire de connexion

Un formulaire d’inscription

Lors de l’inscription :

L’email est obligatoirement vérifié par domaine (seuls les emails La Plateforme_ sont acceptés)

Les utilisateurs sont enregistrés dans un fichier JSON chargé dans le localStorage

Lors de la connexion :

Les identifiants sont vérifiés côté front

Une session est stockée dans le localStorage

Gestion des données (JSON + localStorage)

Comme il n’y a pas de back-end :

Les données viennent du fichier data/db.json

Au premier chargement, ce fichier est copié dans le localStorage

Toutes les modifications (utilisateurs, demandes, rôles) sont faites côté client

Le JSON contient :

Les utilisateurs

Les rôles

Les demandes de présence

Les domaines email autorisés

Calendrier de présence

Une fois connecté :

L’utilisateur voit un calendrier mensuel

Il peut cliquer sur un jour non passé

Il peut choisir :

« Je viens »

« Je ne viens pas »

Règles appliquées :

Impossible de faire ou modifier une demande sur une date passée

Impossible de modifier une demande déjà validée ou refusée

Les demandes sont affichées avec leur statut (en attente, acceptée, refusée)

L’utilisateur peut aussi consulter un tableau avec l’historique de ses demandes.

🛠️ Backoffice (modérateur / admin)

Un backoffice séparé est accessible uniquement :

Aux modérateurs

Aux administrateurs

Dans le backoffice, on peut :

Voir toutes les demandes de présence

Filtrer par statut

Accepter ou refuser une demande

Une fois qu’une demande est traitée :

L’étudiant ne peut plus la modifier

Gestion des rôles (admin uniquement)

Les administrateurs ont une section supplémentaire :

Liste de tous les utilisateurs

Possibilité d’ajouter ou retirer les rôles :

moderator

admin

Cela permet de gérer les droits directement depuis l’interface, sans modifier le code.

Interface et responsive

Bootstrap est utilisé pour :

La mise en page

Le responsive

Les composants (modals, boutons, tables)

Le site est utilisable sur ordinateur, tablette et mobile

Lancer le projet

Important : Le projet utilise fetch() pour charger le fichier JSON, donc il doit être lancé avec un serveur local.

Solution recommandée :

Installer l’extension Live Server sur VSCode

Faire clic droit sur index.html

Cliquer sur “Open with Live Server”

Conclusion

Ce projet m’a permis de :

Structurer un projet front-end complet

Gérer des données sans back-end

Mettre en place une authentification et des rôles

Appliquer des règles métier côté client

Créer une interface claire et responsive

L’ensemble du projet respecte les consignes et fonctionne entièrement côté front.