O School Management System é um aplicativo baseado na web construído usando a pilha MERN (MongoDB, Express.js, React.js, Node.js). Tem como objetivo agilizar a gestão escolar, a organização das aulas e facilitar a comunicação entre alunos, professores e administradores.
Funções de usuário: O sistema oferece suporte a três funções de usuário: Administrador, Professor e Aluno. Cada função possui funcionalidades e níveis de acesso específicos.
Painel de administração: os administradores podem adicionar novos alunos e professores, criar turmas e disciplinas, gerenciar contas de usuários e supervisionar as configurações do sistema.
Acompanhamento de presença: os professores podem facilmente registrar a presença em suas aulas, marcar os alunos como presentes ou ausentes e gerar relatórios de presença.
Avaliação de desempenho: os professores podem avaliar o desempenho dos alunos fornecendo notas e feedback. Os alunos podem ver suas notas e acompanhar seu progresso ao longo do tempo.
Visualização de dados: os alunos podem visualizar seus dados de desempenho por meio de gráficos e tabelas interativos, ajudando-os a compreender rapidamente seu desempenho acadêmico.
Comunicação: Os usuários podem se comunicar facilmente através do sistema. Os professores podem enviar mensagens aos alunos e vice-versa, promovendo comunicação e colaboração eficazes.
git clone https://github.com/Yogndrr/MERN-School-Management-System.git
Abra 2 terminais em janelas/abas separadas.
Terminal 1: Configurando back-end
cd backend
npm install
npm start
Crie um arquivo chamado .env na pasta backend. Dentro dele escreva isto:
MONGO_URL = mongodb://127.0.0.1/school
Se você estiver usando o MongoDB Compass, poderá usar este link de banco de dados, mas se estiver usando o MongoDB Atlas, em vez deste link, escreva seu próprio link de banco de dados.
Terminal 2: Configurando Frontend
cd frontend
npm install
npm start
Agora, navegue até localhost:3000
no seu navegador. A API Backend estará em execução em localhost:5000
.
Você pode encontrar um erro ao se inscrever, seja um erro de rede ou um erro de carregamento que dura indefinidamente.
Para resolver isso:
Navegue até o arquivo frontend > .env
.
Remova o comentário da primeira linha. Depois disso, encerre o terminal frontend. Abra um novo terminal e execute os seguintes comandos:
cd frontend
npm start
Após concluir essas etapas, tente se inscrever novamente. Se o problema persistir, siga estas etapas adicionais para resolvê-lo:
Navegue até o arquivo frontend > src > redux > userRelated > userHandle.js
.
Adicione a seguinte linha após as instruções de importação:
const REACT_APP_BASE_URL = "http://localhost:5000" ;
process.env.REACT_APP_BASE_URL
por REACT_APP_BASE_URL
.IMPORTANTE: Repita o mesmo processo para todos os outros arquivos com “Handle” no nome.
Por exemplo, na pasta redux
, existem outras pastas como userRelated
. Na pasta teacherRelated
, você encontrará um arquivo chamado teacherHandle
. Da mesma forma, outras pastas contêm arquivos com “Handle” em seus nomes. Certifique-se de atualizar esses arquivos também.
O problema surge porque o arquivo .env
no frontend pode não funcionar para todos os usuários, embora funcione para mim.
Adicionalmente:
Ao testar o projeto, comece inscrevendo-se em vez de fazer login como convidado ou usar login normal, caso ainda não tenha criado uma conta.
Para utilizar o modo visitante, navegue até LoginPage.js
e forneça um email e senha de um projeto já criado no sistema. Isso simplifica o processo de login e, após criar sua conta, você poderá usar suas credenciais.
Essas etapas devem resolver o erro de rede no frontend. Se o problema persistir, sinta-se à vontade para entrar em contato comigo para obter mais assistência.
Ao tentar excluir itens, você poderá encontrar uma mensagem pop-up informando: "Desculpe, a função de exclusão foi desativada por enquanto." Esta mensagem aparece porque desativei a função de exclusão em meu site ativo para evitar que visitantes excluam itens. Se você deseja ativar o recurso de exclusão, siga estas etapas:
Navegue até o arquivo frontend > src > redux > userRelated > userHandle.js
.
Se você não fez nenhuma alteração, deverá encontrar a função deleteUser
na linha 71. Ela pode estar comentada. Pode ser assim:
// 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
acima e comente esta função deleteUser
que está atualmente em execução da linha 87 à linha 90: export const deleteUser = ( id , address ) => async ( dispatch ) => {
dispatch ( getRequest ( ) ) ;
dispatch ( getFailed ( "Sorry the delete function has been disabled for now." ) ) ;
}
Se você modificou o código anteriormente, poderá encontrar as funções deleteUser
em linhas diferentes. Nesse caso, remova o comentário do código original e comente o atual.
Em seguida, navegue até a pasta frontend > src > pages > admin
. Aqui, você encontrará diferentes pastas com o sufixo "Relacionado". Abra cada pasta e localize os arquivos prefixados com “Mostrar”.
Abra cada arquivo com "Show" como prefixo e procure uma função chamada deleteHandler
. Por exemplo:
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 é um trecho de exemplo de ShowClasses
. Em outros arquivos com "Mostrar" como prefixo, pode ser diferente.
Remova o comentário do código comentado dentro da função deleteHandler
e comente o código existente. Deve ser semelhante a isto:
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
também pode ser encontrada em arquivos prefixados com "View". Verifique esses arquivos e repita o mesmo processo.Se o problema persistir, sinta-se à vontade para entrar em contato comigo para obter mais assistência.
Não se esqueça de deixar uma estrela para este projeto se você achou a solução útil. Obrigado!