𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗔𝗰𝗮𝗱𝗲𝗺𝗶𝗰 𝗠𝗮𝗻𝗮𝗴𝗲𝗺𝗲𝗻𝘁 𝗦𝘆𝘀𝘁𝗲𝗺

My college used paper registers for attendance and Excel sheets for marks. Notices stayed on physical boards. My team decided to digitize this entire process.

We built Student Sphere.

The system uses three distinct dashboards:

Student Dashboard:

  • View attendance and eligibility
  • Check grades
  • Download study notes
  • Submit assignments digitally
  • View semester notices

Faculty Dashboard:

  • Update attendance and marks
  • Upload notes and lab reports
  • Set assignment deadlines
  • Post notices to specific semesters
  • Review student submissions

Admin Dashboard:

  • Approve new registrations
  • Manage user accounts
  • Promote entire semesters
  • View system statistics
  • Manage all notices

Technical Stack:

Frontend:

  • HTML5, CSS3, and Vanilla JavaScript
  • No frameworks like React or Vue
  • Single CSS file for all pages
  • Responsive design for mobile to 4K screens

Backend:

  • Node.js and Express.js v5
  • JWT authentication
  • Bcrypt password hashing
  • REST API with 30+ endpoints

Database and Deployment:

  • MongoDB Atlas
  • Frontend hosted on Netlify
  • Backend hosted on Render
  • Android app built with Java via WebView

We faced two major technical hurdles.

Challenge 1: API Performance The faculty dashboard initially made 46 separate API calls to load student data. This caused a 14 second delay. I replaced individual calls with a single MongoDB $in query. This reduced load times significantly.

Challenge 2: Single Page Application without React We built a role-based SPA using only vanilla JavaScript. We managed routing and state manually. We used CSS media queries to ensure zero horizontal scrolling on mobile devices.

Key Lessons:

  • Building without frameworks teaches you how web technology works under the hood.
  • Performance optimization is more important than adding new features.
  • Early database schema decisions impact the entire project.
  • Deployment requires careful management of CORS and environment variables.

This project was built by five students from Ramgovind Institute of Technology, Koderma, under the guidance of Mr. Ajay Kumar Dangi.

Live Website: https://studentsphere0.netlify.app

Frontend GitHub: https://github.com/sumankumarsinghrajput/studentsphere-frontend

Backend GitHub: https://github.com/sumankumarsinghrajput/studentsphere-backend

Ho costruito un sistema di gestione accademica full-stack per il mio college - ecco come

Gestire un college comporta una quantità enorme di dati e processi: iscrizioni, frequenza, esami, gestione del personale e molto altro. Spesso, questi processi sono gestiti manualmente o tramite sistemi obsoleti, il che porta a inefficienze e potenziali errori.

Per risolvere questo problema, ho deciso di costruire un sistema di gestione accademica completo utilizzando lo stack MERN.

Lo Stack Tecnologico

Per questo progetto, ho scelto lo stack MERN per la sua scalabilità e la sua natura basata su JavaScript, che mi ha permesso di mantenere un linguaggio coerente sia nel frontend che nel backend.

  • MongoDB: Un database NoSQL flessibile per gestire i dati strutturati e non strutturati.
  • Express.js: Un framework web minimalista per Node.js per costruire l'API REST.
  • React: Una libreria JavaScript per la creazione di un'interfaccia utente reattiva e dinamica.
  • Node.js: Un ambiente di runtime JavaScript per eseguire il codice sul server.

Funzionalità Principali

Il sistema è progettato con tre ruoli principali: Amministratore, Docente e Studente.

1. Pannello di Amministrazione

L'amministratore ha il controllo totale sul sistema:

  • Gestione degli utenti (aggiunta, rimozione o modifica di studenti e docenti).
  • Creazione e gestione dei corsi.
  • Monitoraggio delle iscrizioni.
  • Gestione delle assenze e dei voti a livello globale.

2. Pannello del Docente

I docenti possono gestire le loro attività quotidiane:

  • Registrazione delle presenze degli studenti.
  • Inserimento e aggiornamento dei voti.
  • Gestione del materiale didattico per i corsi assegnati.

3. Pannello dello Studente

Gli studenti hanno una vista limitata ma essenziale:

  • Visualizzazione del proprio profilo e dei corsi iscritti.
  • Controllo delle presenze e dei voti.
  • Accesso ai materiali caricati dai docenti.

Architettura del Sistema

Backend e API

Il backend è costruito con Node.js ed Express.js. Ho implementato un'architettura RESTful per gestire le richieste dal frontend. L'autenticazione è gestita tramite JSON Web Tokens (JWT), garantendo che ogni richiesta sia sicura e che gli utenti possano accedere solo alle funzionalità consentite dal loro ruolo.

Schema del Database

Utilizzando MongoDB, ho definito schemi chiari per:

  • User: per memorizzare credenziali, ruoli e informazioni personali.
  • Course: per dettagli come nome, codice, docente e studenti iscritti.
  • Attendance: per tracciare la presenza giornaliera.
  • Grade: per collegare gli studenti ai corsi e ai relativi voti.

Frontend

Il frontend è stato sviluppato con React. Per la gestione dello stato globale, ho utilizzato l'API Context (o Redux), che permette di mantenere l'informazione dell'utente autenticato in tutta l'applicazione. Per lo styling, ho scelto Tailwind CSS, che mi ha permesso di creare un'interfaccia pulita e responsive in tempi rapidi.

Sfide e Apprendimenti

Costruire questo sistema non è stato privo di sfide:

  1. Modellazione dei dati: Gestire le relazioni tra studenti, corsi e docenti in un database NoSQL richiede una pianificazione attenta per evitare ridondanze eccessive o query inefficienti.
  2. Gestione dei permessi (RBAC): Implementare il controllo degli accessi basato sui ruoli (Role-Based Access Control) è stato fondamentale per garantire che uno studente non potesse, ad esempio, modificare i propri voti.
  3. Gestione dello stato: Mantenere l'interfaccia utente sincronizzata con i dati del backend in tempo reale ha richiesto una gestione accurata degli effetti (useEffect) e dello stato in React.

Conclusione

Questo progetto mi ha permesso di approfondire la mia conoscenza dello sviluppo full-stack e di comprendere come integrare diversi componenti per creare un'applicazione robusta e funzionale. È stato un viaggio incredibile di apprendimento, dalla progettazione del database alla creazione di un'interfaccia utente intuitiva.