MERN School Management System
1.0.0
Le système de gestion scolaire est une application Web construite à l'aide de la pile MERN (MongoDB, Express.js, React.js, Node.js). Il vise à rationaliser la gestion scolaire, l’organisation des classes et à faciliter la communication entre les étudiants, les enseignants et les administrateurs.
Rôles d'utilisateur : le système prend en charge trois rôles d'utilisateur : Administrateur, Enseignant et Étudiant. Chaque rôle a des fonctionnalités et des niveaux d’accès spécifiques.
Tableau de bord d'administration : les administrateurs peuvent ajouter de nouveaux étudiants et enseignants, créer des classes et des matières, gérer les comptes d'utilisateurs et superviser les paramètres du système.
Suivi des présences : les enseignants peuvent facilement prendre en compte les présences à leurs cours, marquer les élèves comme présents ou absents et générer des rapports de présence.
Évaluation des performances : les enseignants peuvent évaluer les performances des élèves en leur fournissant des notes et des commentaires. Les étudiants peuvent consulter leurs notes et suivre leurs progrès au fil du temps.
Visualisation des données : les étudiants peuvent visualiser leurs données de performance via des graphiques et des tableaux interactifs, les aidant à comprendre leurs performances académiques en un coup d'œil.
Communication : les utilisateurs peuvent communiquer sans effort via le système. Les enseignants peuvent envoyer des messages aux élèves et vice versa, favorisant ainsi une communication et une collaboration efficaces.
git clone https://github.com/Yogndrr/MERN-School-Management-System.gitOuvrez 2 terminaux dans des fenêtres/onglets séparés.
Terminal 1 : configuration du backend
cd backend
npm install
npm startCréez un fichier appelé .env dans le dossier backend. A l'intérieur, écris ceci :
MONGO_URL = mongodb://127.0.0.1/schoolSi vous utilisez MongoDB Compass, vous pouvez utiliser ce lien de base de données, mais si vous utilisez MongoDB Atlas, au lieu de ce lien, écrivez votre propre lien de base de données.
Terminal 2 : configuration du frontend
cd frontend
npm install
npm start Maintenant, accédez à localhost:3000 dans votre navigateur. L'API Backend s'exécutera sur localhost:5000 .
Vous pourriez rencontrer une erreur lors de votre inscription, soit une erreur réseau, soit une erreur de chargement qui dure indéfiniment.
Pour le résoudre :
Accédez au fichier frontend > .env .
Décommentez la première ligne. Après cela, terminez le terminal frontal. Ouvrez un nouveau terminal et exécutez les commandes suivantes :
cd frontend
npm startAprès avoir terminé ces étapes, essayez de vous inscrire à nouveau. Si le problème persiste, suivez ces étapes supplémentaires pour le résoudre :
Accédez au fichier frontend > src > redux > userRelated > userHandle.js .
Ajoutez la ligne suivante après les instructions d'importation :
const REACT_APP_BASE_URL = "http://localhost:5000" ;process.env.REACT_APP_BASE_URL par REACT_APP_BASE_URL .IMPORTANT : répétez le même processus pour tous les autres fichiers avec "Handle" dans leur nom.
Par exemple, dans le dossier redux , il existe d'autres dossiers comme userRelated . Dans le dossier teacherRelated , vous trouverez un fichier nommé teacherHandle . De même, d'autres dossiers contiennent des fichiers avec « Handle » dans leur nom. Assurez-vous également de mettre à jour ces fichiers.
Le problème se pose car le fichier .env dans le frontend peut ne pas fonctionner pour tous les utilisateurs, alors qu'il fonctionne pour moi.
En plus:
Lorsque vous testez le projet, commencez par vous inscrire plutôt que de vous connecter en tant qu'invité ou d'utiliser une connexion régulière si vous n'avez pas encore créé de compte.
Pour utiliser le mode invité, accédez à LoginPage.js et fournissez un e-mail et un mot de passe d'un projet déjà créé dans le système. Cela simplifie le processus de connexion et après avoir créé votre compte, vous pouvez utiliser vos informations d'identification.
Ces étapes devraient résoudre l’erreur réseau dans le frontend. Si le problème persiste, n'hésitez pas à me contacter pour obtenir de l'aide.
Lorsque vous essayez de supprimer des éléments, vous pouvez rencontrer un message contextuel indiquant : « Désolé, la fonction de suppression a été désactivée pour le moment. » Ce message apparaît car j'ai désactivé la fonction de suppression sur mon site en ligne pour empêcher les invités de supprimer des éléments. Si vous souhaitez activer la fonction de suppression, veuillez suivre ces étapes :
Accédez au fichier frontend > src > redux > userRelated > userHandle.js .
Si vous n'avez apporté aucune modification, vous devriez trouver la fonction deleteUser à la ligne 71. Elle peut être commentée. Cela pourrait ressembler à ceci :
// export const deleteUser = (id, address) => async (dispatch) => {
// dispatch(getRequest());
// try {
// const result = await axios.delete(`${process.env.REACT_APP_BASE_URL}/${address}/${id}`);
// if (result.data.message) {
// dispatch(getFailed(result.data.message));
// } else {
// dispatch(getDeleteSuccess());
// }
// } catch (error) {
// dispatch(getError(error));
// }
// }deleteUser ci-dessus et commentez cette fonction deleteUser qui s'exécute actuellement de la ligne 87 à la ligne 90 : export const deleteUser = ( id , address ) => async ( dispatch ) => {
dispatch ( getRequest ( ) ) ;
dispatch ( getFailed ( "Sorry the delete function has been disabled for now." ) ) ;
} Si vous avez déjà modifié le code, vous pouvez trouver les fonctions deleteUser sur différentes lignes. Dans ce cas, décommentez le code d'origine et commentez le code actuel.
Ensuite, accédez au dossier frontend > src > pages > admin . Ici, vous trouverez différents dossiers suffixés par « Related ». Ouvrez chaque dossier et localisez les fichiers préfixés par « Afficher ».
Ouvrez chaque fichier avec "Afficher" comme préfixe et recherchez une fonction nommée deleteHandler . Par exemple:
const deleteHandler = ( deleteID , address ) => {
console . log ( deleteID ) ;
console . log ( address ) ;
setMessage ( "Sorry, the delete function has been disabled for now." ) ;
setShowPopup ( true ) ;
// dispatch(deleteUser(deleteID, address))
// .then(() => {
// dispatch(getAllSclasses(adminID, "Sclass"));
// })
} Ceci est un exemple d'extrait de ShowClasses . Dans d'autres fichiers avec "Afficher" comme préfixe, cela peut différer.
Décommentez le code commenté dans la fonction deleteHandler et commentez le code existant. Cela devrait ressembler à ceci :
const deleteHandler = ( deleteID , address ) => {
// console.log(deleteID);
// console.log(address);
// setMessage("Sorry, the delete function has been disabled for now.");
// setShowPopup(true);
dispatch ( deleteUser ( deleteID , address ) )
. then ( ( ) => {
dispatch ( getAllSclasses ( adminID , "Sclass" ) ) ;
} )
}deleteHandler peut également être trouvée dans les fichiers préfixés par « View ». Vérifiez ces fichiers et répétez le même processus.Si le problème persiste, n'hésitez pas à me contacter pour obtenir de l'aide.
N'oubliez pas de laisser une étoile pour ce projet si vous avez trouvé la solution utile. Merci!
