Année Universitaire : 2025-2026
Énoncé de Projet : Application Web JavaScript
Le respect des consignes sera pris en compte pour l'évaluation de ce travail, en plus
de la qualité du travail rendu.
Description générale
Vous allez développer une application web complète en utilisant JavaScript, HTML5 et CSS3,
sans frameworks modernes (React, Angular, [Link]).
Le thème du projet est libre : e-commerce, gestion de bibliothèque, application de santé,
plateforme éducative, gestion hôtelière, etc. Choisissez un sujet qui vous intéresse !
Ce projet représente la première note du contrôle continu.
Objectifs principaux
1. Développer au moins 5 entités CRUD (Créer, Lire, Modifier, Supprimer)
2. Créer un tableau de bord avec statistiques et minimum 5 graphiques
3. Implémenter un système d'authentification
4. Assurer l'internationalisation (3 langues : Français, Arabe, Anglais)
5. Garantir un design responsive et professionnel
6. Utiliser uniquement JavaScript natif (ES6+)
Fonctionnalités Obligatoires
? Authentification
• Page de connexion avec validation
• Utilisateurs par défaut :
o Admin : admin@[Link] / admin123
o User : user@[Link] / user123
• Stockage de session dans localStorage
• Bouton de déconnexion
? Navigation
• Navbar : Logo, nom utilisateur, déconnexion, sélecteur de langue
• Menu latéral : Liens vers Dashboard et les 5 entités CRUD
• Menu responsive
? Entités CRUD (minimum 5)
Pour chaque entité :
1. Créer
• Formulaire avec validation complète
• Messages d'erreur en temps réel
• Confirmation après creation
Pr. Nouhaila Moussammi Matière : Programmation Web - JavaScript
1
Année Universitaire : 2025-2026
2. Lire - Liste
• Tableau avec pagination (10, 25 ou 50 éléments/page)
• Tri par colonnes (ascendant/descendant)
• Filtres (au moins 2 par entité)
• Barre de recherche en temps réel
• Export CSV
• Boutons : Voir détails, Modifier, Supprimer
3. Consulter - Détails
• Page dédiée avec informations complètes
• Export PDF de la fiche
• Boutons : Retour, Modifier, Supprimer
4. Modifier
• Formulaire pré-rempli
• Validation identique à la création
• Confirmation de mise à jour
5. Supprimer
• Modal de confirmation
• Message explicite avant suppression
• Confirmation après suppression
? Dashboard (Tableau de bord)
1. Cartes d'indicateurs (KPI)
• Minimum 6 cartes affichant les statistiques clés
• Exemple : Nombre total par entité, revenus, utilisateurs actifs, etc.
2. Graphiques (minimum 5 types différents)
a. Pie Chart (Diagramme circulaire)
b. Donut Chart (Diagramme en anneau)
c. Bar Chart (Diagramme en barres)
d. Line Chart (Graphique linéaire)
e. Au choix : Scatter Plot, Histogram, Area Chart, etc.
Bibliothèques recommandées : [Link], ApexCharts, ECharts
3. Filtres dynamiques
• Filtres par période (jour, semaine, mois, année)
• Filtres par catégorie/type
• Mise à jour automatique des graphiques
? Internationalisation (i18n)
Ø 3 langues obligatoires :
• Français (par défaut)
• Arabe (avec support RTL)
• Anglais
Ø Éléments à traduire :
• Tous les textes de l'interface
• Messages d'erreur et de confirmation
• Labels de formulaires
• Sauvegarde de la langue dans localStorage
? Sources de Données
Vous avez deux options pour gérer les données :
Ø Option 1 : APIs publiques
Utiliser des APIs REST publiques pour récupérer et manipuler des données :
Pr. Nouhaila Moussammi Matière : Programmation Web - JavaScript
2
Année Universitaire : 2025-2026
APIs suggérées :
• JSONPlaceholder : Users, Posts, Comments, Albums, Photos
• Reqres : Users avec opérations CRUD
• FakeStoreAPI : Products, Categories, Carts, Users
• DummyJSON : Products, Users, Posts, Comments, etc.
• The Cat API : Images de chats avec informations
• PokeAPI : Données Pokémon
• REST Countries : Informations sur les pays
• OpenLibrary API : Livres et auteurs
Note : Pour les opérations Create, Update, Delete, certaines APIs ne modifient pas
réellement les données mais simulent les réponses. Vous pouvez compléter avec le
localStorage.
Ø Option 2 : Données Locales + localStorage
Ø Option 3 : Stratégie hybride recommandée
• Charger les données initiales depuis une API ou un JSON
• Stocker dans localStorage pour la persistance
• Toutes les opérations CRUD modifient le localStorage
• Option pour "réinitialiser" les données
Spécifications Techniques
? Technologies Obligatoires
• HTML5 (sémantique, validation W3C)
• CSS3 (Flexbox/Grid, responsive)
• JavaScript vanilla (ES6+)
? Bibliothèques Autorisées
• CSS : Bootstrap, Tailwind, Bulma, Materialize
• JavaScript :
o Graphiques : [Link], ApexCharts, ECharts
o PDF : jsPDF, [Link]
o Utilitaires : Lodash, [Link], [Link]
o UI : SweetAlert2 (pour les modals/alertes élégantes)
o Icônes : Font Awesome, Bootstrap Icons
? Strictement Interdit
• Frameworks : React, Angular, [Link]
• [Link] pour le backend
• Templates pré-faits complets
• Génération de code par IA
Fonctionnalités JavaScript obligatoires
• Votre code doit démontrer :
o Manipulation du DOM : querySelector, createElement, appendChild
o Gestion des événements : addEventListener, délégation d'événements
o LocalStorage : setItem, getItem, [Link]/stringify
o Programmation asynchrone : fetch(), async/await, Promises
o Méthodes de tableaux : map, filter, reduce, find, sort
o Fonctions ES6 : Arrow functions, paramètres par défaut
o Gestion d'erreurs : try/catch
Pr. Nouhaila Moussammi Matière : Programmation Web - JavaScript
3
Année Universitaire : 2025-2026
• Bonus (Points supplémentaires)
o Classes ES6 et Programmation Orientée Objet (POO)
o Modules JavaScript (import/export)
Calendrier de réalisation
Date Activité
24 novembre • Présentation de l'énoncé
Séances suivantes • Suivi régulier du projet
Mi-décembre • Rendu final
Dates ultérieures • Soutenances (communiquées plus tard)
Livrables
1. Code source (Format ZIP) :
• Nom du fichier : NOM_Prenom_JS_Projet.zip (ou NOM1_NOM2_JS_Projet.zip pour
binôme)
• Contenu :
o Tous les fichiers HTML, CSS, JS
o Dossier assets (images, icônes)
o Fichiers JSON (si applicable)
2. Rapport PDF (8-12 pages)
• Page de garde : Titre, nom(s), date, logos
• Table des matières
• Introduction : Contexte, thème choisi
• Analyse : Entités, schéma de navigation, maquettes
• Réalisation : Architecture, captures d'écran, extraits de code
• Fonctionnalités avancées : Défis, solutions
• Tests : Validation W3C, responsive, navigateurs
• Conclusion : Bilan, compétences acquises
• Annexes : Code important, validations
3. Présentation PowerPoint (10-12 slides)
Durée de la soutenance : 10 minutes maximum
Grille d'évaluation
1. Documents (8 points)
Ø Rapport : /4
• Structure et contenu (2 pts)
• Qualité rédaction et mise en forme (2 pts)
Ø Présentation (diapositive) : /4
• Design et clarté (2 pts)
• Contenu et organisation (2 pts)
2. Soutenance (12 points)
Ø Présentation orale : /4
• Clarté et structure (2 pts)
• Gestion du temps (10 min max) (1 pt)
• Qualité de l'expression (1 pt)
Pr. Nouhaila Moussammi Matière : Programmation Web - JavaScript
4
Année Universitaire : 2025-2026
Ø Difficultés techniques du projet : /4
• Démonstration live des fonctionnalités (2 pts)
• Explication des choix techniques (1 pt)
• Qualité du code présenté (1 pt)
Ø Réponses aux questions : /4
• Maîtrise du sujet (2 pts)
• Pertinence des réponses (2 pts)
3. Bonus (jusqu'à +2 points)
• Classes ES6 et POO (+1 pt)
• Dark mode (+0,5 pt)
• Recherche en temps réel avec debouncing (+0,5 pt)
• Système de permissions/rôles (+0,5 pt)
• Mode hors ligne (+0,5 pt)
4. Pénalités
• Retard de rendu : -2 points/jour
• Validation W3C échouée : -0,5 pt/page (max -2)
• Plagiat & AI : 0/20 + sanctions
Total : 20 points
Exemple 1 :
Pr. Nouhaila Moussammi Matière : Programmation Web - JavaScript
5
Année Universitaire : 2025-2026
Exemple 2 :
Exemple 3 :
Pr. Nouhaila Moussammi Matière : Programmation Web - JavaScript
6