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

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

J'ai conçu un système de gestion académique full-stack pour mon université — voici comment

Gérer une institution éducative est une tâche complexe qui implique de coordonner de nombreux éléments, notamment les étudiants, les enseignants, les cours, les programmes et les résultats académiques. Dans mon université, une grande partie de ces processus était encore gérée manuellement ou via des feuilles de calcul éparpillées, ce qui entraînait des erreurs et une perte de temps considérable.

Pour résoudre ce problème, j'ai décidé de construire un Système de Gestion Académique (AMS) complet. Ce projet m'a permis de mettre en pratique mes compétences en développement full-stack et de créer un outil capable de centraliser et de simplifier les opérations quotidiennes de l'établissement.

La pile technologique (Tech Stack)

Pour ce projet, j'ai opté pour la pile MERN, qui est idéale pour construire des applications web scalables et performantes :

  • MongoDB: Une base de données NoSQL pour stocker les données des utilisateurs, des cours et des notes de manière flexible.
  • Express.js: Un framework backend pour gérer les routes API et la logique serveur.
  • React.js: Une bibliothèque frontend pour créer une interface utilisateur dynamique et réactive.
  • Node.js: Un environnement d'exécution JavaScript pour construire le serveur.

En complément, j'ai utilisé :

  • Tailwind CSS pour un design moderne et responsive.
  • JWT (JSON Web Tokens) pour une authentification sécurisée.
  • Bcrypt pour le hachage des mots de passe.
  • Axios pour les requêtes HTTP entre le frontend et le backend.

Fonctionnalités clés

Le système est conçu autour de trois rôles principaux, chacun ayant un tableau de bord spécifique et des permissions distinctes :

1. Administrateur (Admin)

L'administrateur possède un contrôle total sur le système. Ses fonctionnalités incluent :

  • Gestion des utilisateurs : Ajouter, modifier ou supprimer des comptes d'étudiants et d'enseignants.
  • Gestion des cours : Créer de nouveaux cours et les assigner à des départements ou des enseignants.
  • Gestion des départements : Organiser l'université en différentes facultés ou départements.
  • Vue d'ensemble : Un tableau de bord affichant des statistiques globales sur l'université.

2. Enseignant (Faculty)

Les enseignants peuvent gérer leurs responsabilités académiques :

  • Gestion des présences : Marquer l'assiduité des étudiants pour leurs cours respectifs.
  • Gestion des notes : Saisir et mettre à jour les résultats des examens et des évaluations.
  • Gestion des cours : Consulter la liste des cours qui leur sont assignés.

3. Étudiant (Student)

Les étudiants disposent d'un accès limité pour consulter leurs informations :

  • Profil personnel : Consulter leurs informations de contact et académiques.
  • Suivi des cours : Voir la liste des cours auxquels ils sont inscrits.
  • Résultats et assiduité : Consulter leurs notes et leur taux de présence en temps réel.

Architecture du système

L'application suit une architecture client-serveur classique :

  1. Frontend (Client) : L'interface utilisateur construite avec React communique avec le backend via des appels API REST.
  2. Backend (Serveur) : Le serveur Node/Express traite les requêtes, vérifie l'authentification via les middlewares JWT et interagit avec la base de données.
  3. Base de données : MongoDB stocke les documents structurés (utilisateurs, cours, inscriptions, etc.).

Modèle de données (Exemple simplifié)

Voici à quoi ressemble la structure d'un utilisateur dans la base de données :

{
  "_id": "65a1b2c3d4e5f6g7h8i9j0k1",
  "name": "Jean Dupont",
  "email": "jean.dupont@univ.edu",
  "password": "$2a$10$hashedpassword...",
  "role": "student",
  "department": "Informatique",
  "enrolledCourses": ["course_id_1", "course_id_2"]
}

Défis rencontrés et solutions

1. Contrôle d'accès basé sur les rôles (RBAC)

L'un des plus grands défis a été de m'assurer qu'un étudiant ne puisse pas accéder aux routes de l'administrateur ou modifier ses propres notes.

  • Solution : J'ai implémenté des middlewares de protection sur le backend qui vérifient non seulement la validité du token JWT, mais aussi le rôle de l'utilisateur extrait du token avant d'autoriser l'accès à une route spécifique.

2. Gestion de l'état complexe

Avec de nombreuses données circulant entre les composants React (informations utilisateur, listes de cours, etc.), la gestion de l'état est devenue complexe.

  • Solution : J'ai utilisé l'API Context API de React pour fournir un état global (comme l'utilisateur connecté) à toute l'application sans avoir recours au "prop drilling".

3. Relations entre les données dans MongoDB

Contrairement aux bases de données SQL, MongoDB n'utilise pas de jointures natives. Gérer les relations entre les étudiants, les cours et les enseignants a nécessité une réflexion approfondie.

  • Solution : J'ai utilisé une approche hybride, utilisant des références (ObjectIds) pour les relations complexes et l'imbrication (embedding) pour les données qui sont toujours lues ensemble.

Conclusion

La construction de ce système de gestion académique a été une expérience d'apprentissage incroyable. Cela m'a permis de comprendre comment concevoir une application de bout en bout, de la modélisation de la base de données à la création d'une interface utilisateur intuitive.

Ce projet n'est qu'une première version. À l'avenir, j'aimerais ajouter des fonctionnalités telles que la génération automatique de bulletins de notes en PDF, un système de paiement des frais de scolarité en ligne et un module de communication entre étudiants et professeurs.