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

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

Zbudowałem full-stackowy system zarządzania akademickiego dla mojej uczelni – oto jak to zrobiłem

Budowanie projektów, które rozwiązują realne problemy, jest najlepszym sposobem na naukę. Kiedy zauważyłem, jak bardzo nasza uczelnia potrzebuje nowoczesnego systemu do zarządzania danymi studentów, procesami i ocenami, postanowiłem wziąć sprawy w swoje ręce. Tak powstał mój system zarządzania akademickiego.

Stos technologiczny (Tech Stack)

Aby stworzyć wydajną i skalowalną aplikację, zdecydowałem się na stos MERN:

  • MongoDB: Elastyczna baza danych NoSQL do przechowywania złożonych danych o studentach, kursach i ocenach.
  • Express.js: Minimalistyczny framework backendowy dla Node.js, który obsługuje nasze API.
  • React: Biblioteka frontendowa do budowy dynamicznego i responsywnego interfejsu użytkownika.
  • Node.js: Środowisko uruchomieniowe, które napędza całą logikę po stronie serwera.
  • Tailwind CSS: Framework CSS, który pozwolił mi na szybkie i nowoczesne stylowanie komponentów.
  • JWT (JSON Web Tokens): Do bezpiecznej autentykacji i autoryzacji użytkowników.

Kluczowe funkcjonalności

System został zaprojektowany z uwzględnieniem trzech głównych ról użytkowników, z których każda ma dedykowany panel i uprawnienia:

1. Panel Administratora

Administrator posiada najwyższe uprawnienia i może zarządzać całym systemem:

  • Dodawanie, edytowanie i usuwanie użytkowników (studentów oraz wykładowców).
  • Zarządzanie kursami, semestrami i wydziałami.
  • Monitorowanie ogólnych statystyk uczelni.

2. Panel Wykładowcy

Wykładowcy mogą zarządzać swoimi zajęciami i studentami:

  • Dodawanie i aktualizowanie ocen studentów.
  • Prowadzenie listy obecności na zajęciach.
  • Tworzenie i zarządzanie materiałami kursowymi.

3. Panel Studenta

Studenci mają dostęp do informacji dotyczących ich własnej ścieżki edukacyjnej:

  • Podgląd ocen i obliczona średnia ocen.
  • Sprawdzanie harmonogramu zajęć.
  • Monitorowanie własnej obecności.

Architektura systemu

System opiera się na architekturze klient-serwer, co zapewnia wyraźny podział między logiką prezentacji a logiką biznesową.

Backend

Backend to API typu REST zbudowane w Node.js i Express. Każde żądanie przychodzące do chronionych endpointów jest weryfikowane przez middleware sprawdzające poprawność tokena JWT. Dane są bezpiecznie przechowywane w bazie MongoDB.

Frontend

Frontend to aplikacja typu Single Page Application (SPA) stworzona w React. Wykorzystałem react-router-dom do zarządzania nawigacją oraz axios do komunikacji z backendem. Dzięki Tailwind CSS interfejs jest w pełni responsywny i przyjazny dla użytkownika.

Wyzwania i nauka

Proces budowy tego systemu był dla mnie ogromną lekcją. Do największych wyzwań należały:

  • Zarządzanie stanem: Synchronizacja danych między różnymi komponentami Reacta, aby zapewnić spójność interfejsu.
  • Modelowanie danych: Mimo że MongoDB jest bazą NoSQL, zaprojektowanie schematów tak, aby poprawnie odzwierciedlały relacje między studentami, kursami i ocenami, wymagało sporego wysiłku.
  • Bezpieczeństwo: Implementacja poprawnego przepływu autentykacji, aby upewnić się, że użytkownicy mają dostęp wyłącznie do danych, do których są uprawnieni.

Podsumowanie

Budowa tego systemu zarządzania akademickiego była niesamowitą przygodą. Pozwoliła mi nie tylko pogłębić wiedzę o stosie MERN, ale także zrozumieć, jak projektować kompleksowe systemy, które muszą radzić sobie z różnymi rolami użytkowników i złożonymi relacjami danych. To doświadczenie przygotowało mnie do budowania jeszcze bardziej zaawansowanych aplikacji w przyszłości.