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

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

Construí un sistema de gestión académica full-stack para mi universidad, así es como lo hice

Gestionar una universidad es una tarea compleja que involucra la coordinación de estudiantes, profesores, cursos, horarios y calificaciones. En mi universidad, gran parte de este proceso se realizaba de forma manual o mediante hojas de cálculo dispersas, lo que a menudo resultaba en errores de datos, falta de transparencia y una comunicación ineficiente.

Decidí abordar este problema construyendo un Sistema de Gestión Académica (AMS) completo. Mi objetivo era crear una plataforma centralizada donde los administradores, los profesores y los estudiantes pudieran interactuar de manera fluida y segura.

En este artículo, compartiré el proceso, el stack tecnológico que utilicé y los desafíos que enfrenté.

El Stack Tecnológico

Para este proyecto, opté por el stack MERN, debido a su escalabilidad, su gran ecosistema y la facilidad de usar JavaScript en todo el desarrollo.

  • MongoDB: Una base de datos NoSQL para almacenar información flexible sobre usuarios, cursos y calificaciones.
  • Express.js: Un framework de backend minimalista y flexible para Node.js.
  • React.js: Para construir una interfaz de usuario dinámica y reactiva.
  • Node.js: El entorno de ejecución para el servidor.

Además, utilicé:

  • JWT (JSON Web Tokens): Para la autenticación y la gestión de sesiones.
  • Mongoose: Para el modelado de datos en MongoDB.
  • Axios: Para realizar peticiones HTTP desde el frontend al backend.
  • Tailwind CSS: Para un diseño rápido y moderno.

Características Principales

El sistema está diseñado con un control de acceso basado en roles (RBAC), lo que significa que las funcionalidades cambian según quién haya iniciado sesión.

1. Panel de Administración

El administrador tiene el control total del sistema:

  • Gestionar usuarios (crear, editar, eliminar estudiantes y profesores).
  • Crear y asignar cursos a los profesores.
  • Supervisar la actividad general del sistema.

2. Panel del Profesor

Los profesores pueden gestionar sus responsabilidades académicas:

  • Ver los cursos asignados.
  • Registrar la asistencia de los estudiantes.
  • Subir y gestionar las calificaciones de los alumnos.

3. Panel del Estudiante

Los estudiantes tienen una vista centrada en su progreso:

  • Ver sus cursos inscritos.
  • Consultar su historial de asistencia.
  • Revisar sus calificaciones finales.

Arquitectura del Sistema

Esquema de la Base de Datos

Utilicé Mongoose para definir esquemas claros. Aquí hay un ejemplo simplificado del modelo de User:

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  role: { 
    type: String, 
    enum: ['admin', 'teacher', 'student'], 
    default: 'student' 
  },
  enrolledCourses: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Course' }],
  assignedCourses: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Course' }]
}, { timestamps: true });

module.exports = mongoose.model('User', userSchema);

Implementación del Backend

El backend funciona mediante una serie de rutas protegidas por un middleware de autenticación. Este middleware verifica el token JWT y permite el acceso solo si el rol del usuario coincide con el requerido para la ruta.

// Middleware de autenticación
const auth = (roles = []) => {
  return (req, res, next) => {
    const token = req.header('Authorization');
    if (!token) return res.status(401).json({ msg: 'No hay token, permiso denegado' });

    try {
      const decoded = jwt.verify(token, process.env.JWT_SECRET);
      req.user = decoded;

      if (roles.length && !roles.includes(req.user.role)) {
        return res.status(403).json({ msg: 'No tiene permisos para esta acción' });
      }

      next();
    } catch (err) {
      res.status(401).json({ msg: 'Token no válido' });
    }
  };
};

Implementación del Frontend

En el frontend, utilicé React Context API para gestionar el estado global del usuario (autenticación y perfil). Esto permite que cualquier componente de la aplicación sepa si el usuario está conectado y qué rol tiene.

Para las peticiones a la API, creé una instancia de Axios configurada con la URL base y los interceptores para incluir automáticamente el token en las cabeceras de cada solicitud.

Desafíos y Aprendizajes

1. Gestión de Relaciones Complejas

Al principio, me costó manejar la relación entre estudiantes, cursos y calificaciones. Decidí que la mejor forma era tener un modelo de Grade separado que vinculara al Student, al Course y al Teacher, lo que facilitó las consultas y la integridad de los datos.

2. Seguridad y Roles

Implementar un control de acceso robusto fue crucial. No bastaba con saber si un usuario estaba autenticado; era vital asegurar que un estudiante no pudiera acceder a las rutas de creación de cursos mediante una simple manipulación de la URL o de las peticiones de la API.

3. Diseño Responsivo

Dado que los profesores a menudo necesitan registrar asistencia desde sus dispositivos móviles en el aula, asegurar que la interfaz fuera totalmente responsiva con Tailwind CSS fue una prioridad.

Conclusión

Construir este sistema de gestión académica fue una experiencia increíble que me permitió aplicar conceptos de desarrollo full-stack en un escenario del mundo real. Aprendí sobre la importancia de una arquitectura de base de datos bien planificada, la seguridad en las APIs y la gestión de estados complejos en el frontend.

Este proyecto no es solo un ejercicio de código, sino una solución funcional que demuestra cómo la tecnología puede transformar procesos administrativos tradicionales en sistemas eficientes y modernos.