MERN School Management System
1.0.0
El sistema de gestión escolar es una aplicación basada en web creada utilizando la pila MERN (MongoDB, Express.js, React.js, Node.js). Su objetivo es agilizar la gestión escolar, la organización de las clases y facilitar la comunicación entre estudiantes, profesores y administradores.
Roles de usuario: el sistema admite tres roles de usuario: administrador, profesor y estudiante. Cada rol tiene funcionalidades y niveles de acceso específicos.
Panel de administración: los administradores pueden agregar nuevos estudiantes y profesores, crear clases y materias, administrar cuentas de usuario y supervisar la configuración del sistema.
Seguimiento de asistencia: los profesores pueden tomar fácilmente la asistencia a sus clases, marcar a los estudiantes como presentes o ausentes y generar informes de asistencia.
Evaluación del desempeño: los maestros pueden evaluar el desempeño de los estudiantes proporcionando calificaciones y comentarios. Los estudiantes pueden ver sus calificaciones y realizar un seguimiento de su progreso a lo largo del tiempo.
Visualización de datos: los estudiantes pueden visualizar sus datos de desempeño a través de gráficos y tablas interactivos, lo que les ayuda a comprender su desempeño académico de un vistazo.
Comunicación: los usuarios pueden comunicarse sin esfuerzo a través del sistema. Los profesores pueden enviar mensajes a los estudiantes y viceversa, promoviendo una comunicación y colaboración efectivas.
git clone https://github.com/Yogndrr/MERN-School-Management-System.gitAbra 2 terminales en ventanas/pestañas separadas.
Terminal 1: Configuración del backend
cd backend
npm install
npm startCree un archivo llamado .env en la carpeta backend. Dentro escribe esto:
MONGO_URL = mongodb://127.0.0.1/schoolSi está utilizando MongoDB Compass, puede utilizar este enlace de base de datos, pero si está utilizando MongoDB Atlas, en lugar de este enlace, escriba su propio enlace de base de datos.
Terminal 2: Configuración de la interfaz
cd frontend
npm install
npm start Ahora, navega hasta localhost:3000 en tu navegador. La API de backend se ejecutará en localhost:5000 .
Es posible que encuentres un error al registrarte, ya sea un error de red o un error de carga que continúa indefinidamente.
Para resolverlo:
Navegue hasta la frontend > .env .
Descomentar la primera línea. Después de eso, finalice la terminal frontend. Abra una nueva terminal y ejecute los siguientes comandos:
cd frontend
npm startDespués de completar estos pasos, intente registrarse nuevamente. Si el problema persiste, siga estos pasos adicionales para resolverlo:
Navegue hasta el archivo frontend > src > redux > userRelated > userHandle.js .
Agregue la siguiente línea después de las declaraciones de importación:
const REACT_APP_BASE_URL = "http://localhost:5000" ;process.env.REACT_APP_BASE_URL con REACT_APP_BASE_URL .IMPORTANTE: repita el mismo proceso para todos los demás archivos que tengan "Manejar" en sus nombres.
Por ejemplo, en la carpeta redux , hay otras carpetas como userRelated . En la carpeta teacherRelated , encontrará un archivo llamado teacherHandle . De manera similar, otras carpetas contienen archivos con "Handle" en sus nombres. Asegúrese de actualizar estos archivos también.
El problema surge porque es posible que el archivo .env en la interfaz no funcione para todos los usuarios, mientras que a mí sí.
Además:
Cuando pruebe el proyecto, comience registrándose en lugar de iniciar sesión como invitado o utilizar el inicio de sesión normal si aún no ha creado una cuenta.
Para usar el modo invitado, navegue hasta LoginPage.js y proporcione un correo electrónico y una contraseña de un proyecto ya creado en el sistema. Esto simplifica el proceso de inicio de sesión y, después de crear su cuenta, puede utilizar sus credenciales.
Estos pasos deberían resolver el error de red en la interfaz. Si el problema persiste, no dudes en ponerte en contacto conmigo para obtener más ayuda.
Al intentar eliminar elementos, es posible que aparezca un mensaje emergente que diga: "Lo sentimos, la función de eliminación ha sido desactivada por ahora". Este mensaje aparece porque deshabilité la función de eliminación en mi sitio en vivo para evitar que los invitados eliminen elementos. Si desea habilitar la función de eliminación, siga estos pasos:
Navegue hasta el archivo frontend > src > redux > userRelated > userHandle.js .
Si no ha realizado ningún cambio, debería encontrar la función deleteUser en la línea 71. Puede estar comentada. Podría verse así:
// 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 anterior y comente esta función deleteUser que se está ejecutando actualmente desde la línea 87 a la línea 90: export const deleteUser = ( id , address ) => async ( dispatch ) => {
dispatch ( getRequest ( ) ) ;
dispatch ( getFailed ( "Sorry the delete function has been disabled for now." ) ) ;
} Si ha modificado previamente el código, puede encontrar las funciones deleteUser en diferentes líneas. En este caso, descomente el código original y comente el actual.
A continuación, navegue hasta la carpeta frontend > src > pages > admin . Aquí encontrará diferentes carpetas con el sufijo "Relacionados". Abra cada carpeta y busque los archivos con el prefijo "Mostrar".
Abra cada archivo con "Mostrar" como prefijo y busque una función llamada deleteHandler . Por ejemplo:
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"));
// })
} Este es un fragmento de ejemplo de ShowClasses . En otros archivos con "Mostrar" como prefijo, puede diferir.
Descomente el código comentado dentro de la función deleteHandler y comente el código existente. Debería parecerse a esto:
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 también se puede encontrar en archivos con el prefijo "Ver". Verifique esos archivos y repita el mismo proceso.Si el problema persiste, no dudes en ponerte en contacto conmigo para obtener más ayuda.
No olvides dejar una estrella para este proyecto si la solución te resultó útil. ¡Gracias!
