Titre du projet : SmartStudent – Une application simple d'inscription et de suivi des étudiants
Présentation
SmartStudent .Il s'agit d'une application web conçue pour simplifier et numériser le processus
d'inscription et de suivi des étudiants (nous sommes confrontés à ce problème au Centre d'éducation
mondial de Brazzaville). De nombreux centres d'apprentissage, notamment les petits établissements,
s'appuient sur des formulaires papier pour l'inscription des étudiants. Cette méthode est inefficace et
complique la récupération des données. SmartStudent , remplace les systèmes papier par une interface
électronique simplifiée qui stocke les dossiers des étudiants dans une base de données (j'utiliserai JSON
pour stocker les données de cette mission).
Public cible
• Enseignants et administrateurs du Centre d'éducation mondiale (par exemple, classes EnglishConnect).
• Tuteurs gérant plusieurs élèves.
• Responsables de programmes d'éducation communautaire.
• Centres sans base de données ni système informatique complexes, mais nécessitant un suivi
numérique simple.
Fonctions principales (8 fonctions)
1. Formulaire d'inscription des élèves
Formulaire permettant de recueillir les données des élèves : nom complet, sexe, âge, numéro
de téléphone, adresse, cours de religion, cours EnglishConnect, coordonnées d'urgence (nom
du père et/ou de la mère, numéro de téléphone) et date d'inscription.
2. Affichage de la liste des élèves
Affichage de la liste de tous les élèves inscrits dans un tableau clair, paginé et trié.
3. Recherche par nom
Barre de recherche permettant de trouver un élève en saisissant une partie de son nom.
4. Affichage des détails de l'élève
Cliquez sur un élève pour afficher toutes ses informations en détail.
5. Modification des informations de l'élève
Fonctionnalité permettant de mettre à jour/modifier les informations de n'importe quel élève.
6. Supprimer un élève
Fonctionnalité permettant de supprimer un dossier d'élève (avec fenêtre de confirmation).
7. Design adaptatif
Fonctionne aussi bien sur ordinateur que sur mobile, ce qui le rend accessible aux téléphones et
tablettes.
8. Stockage de données simulé grâce à une API JSON temporaire
Simule une base de données en stockant les dossiers des élèves localement ou en utilisant un
backend factice.
Fonctionnalités supplémentaires (je vais essayer d'être plus créatif avec ces fonctionnalités)
• Génération de QR code
Génération d'un QR code pour chaque élève, renvoyant à son profil (fonctionnalité facultative/à venir).
• Exportation des données au format CSV
Permettre aux administrateurs d'exporter la liste des élèves au format CSV.
• Système de connexion
Connexion administrateur simple pour accéder au système et protéger les données.
Wireframes
Desktop View
Mobile View
Données externes
API #1: [Link]
Utilisé en option pour simuler les avatars des étudiants (photos) lors de l'inscription.
API #2: Quotable API
Affichez des citations motivantes ou liées à l'éducation sur le tableau de bord pour une impression
professionnelle.
Liste des modules
1. Module d'authentification
Connexion administrateur
2. Module d'inscription
Validation des saisies et logique de soumission des formulaires.
3. Module Liste des étudiants
Récupération et affichage des étudiants sous forme de tableau.
4. Module Recherche
Recherche par nom avec résultats instantanés.
5. Module Informations sur les étudiants
Affichage, modification ou suppression des informations sur les étudiants.
6. Module Stockage des données
Gestion de l'enregistrement et de la récupération des données depuis JSON.
7. Module Widget de devis
Affichage des citations depuis l'API Quotable.
8. Module de mise en page de l'interface utilisateur
Gestion de la navigation, de la réactivité et du style.
Identité graphique
• Palette de couleurs :
Couleur principale : #005792 (bleu marine)
Couleur secondaire : #FFB400 (jaune chaud)
Arrière-plan : #F5F7FA (gris clair)
• Typographie :
Titres : Roboto Slab
Corps : Open Sans
• Icône de l'application :
Silhouette simple d'une personne avec une coche (inscrite).
Chronologie
lundi :
• Finalisation des wireframes.
• Configuration de Vite et de la structure des dossiers.
• Implémentation du formulaire d'inscription et stockage des données dans localStorage.
Mardi :
• Création de la vue liste des étudiants, de la fonctionnalité de recherche et des pages de détails des
étudiants.
• Intégration de l'API de citations.
• Début du peaufinage de l'interface utilisateur et de la mise en page réactive.
Mercredi:
• Implémentation des fonctionnalités de modification/suppression. • Finaliser le style.
• Terminer les tests et le déploiement.
• Soumettre le projet final.
Planification de projet
Trello Board: [Link]
Défis
• Gérer efficacement la structure des données sans véritable back-end.
• Mettre en œuvre un design réactif pour une expérience mobile optimale.
• Gérer avec précision les actions de modification et de suppression.
• Rendre la recherche performante et conviviale.