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

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

Saya membina sistem pengurusan akademik full-stack untuk kolej saya, ini caranya

Sebagai seorang pelajar, saya sering melihat betapa rumitnya proses pengurusan akademik di kolej kami. Segala-galanya dilakukan secara manual—daripada pendaftaran pelajar sehinggalah kepada pengurusan gred. Ini bukan sahaja memakan masa, tetapi juga terdedah kepada kesilapan manusia.

Oleh itu, saya memutuskan untuk membina sesuatu yang boleh menyelesaikan masalah ini: sebuah Sistem Pengurusan Akademik Full-Stack.

Teknologi yang Digunakan (Tech Stack)

Untuk membina sistem ini, saya memilih stack MERN kerana fleksibiliti dan skalabilitinya.

Frontend

  • React.js: Untuk membina antara muka pengguna (UI) yang dinamik dan responsif.
  • Tailwind CSS: Untuk penggayaan (styling) yang pantas dan moden.
  • Redux Toolkit: Untuk pengurusan state yang cekap di seluruh aplikasi.

Backend

  • Node.js: Persekitaran masa larian (runtime environment) untuk menjalankan JavaScript di pelayan.
  • Express.js: Kerangka kerja (framework) web untuk membina API yang teguh.
  • MongoDB: Pangkalan data NoSQL untuk menyimpan data pelajar, guru, dan kursus secara fleksibel.
  • Mongoose: ODM untuk memudahkan interaksi dengan MongoDB.

Pengesahan & Keselamatan

  • JSON Web Tokens (JWT): Untuk menguruskan sesi pengguna dan memastikan keselamatan API.
  • Bcrypt.js: Untuk penyulitan (hashing) kata laluan pengguna.

Ciri-ciri Utama

Sistem ini direka dengan tiga peranan pengguna yang berbeza:

1. Pentadbir (Admin)

  • Menguruskan profil guru dan pelajar.
  • Menambah, mengemas kini, atau memadam kursus.
  • Memantau aktiviti keseluruhan sistem.

2. Guru (Teacher)

  • Menguruskan kehadiran pelajar bagi kursus yang diajar.
  • Memasukkan dan mengemas kini gred pelajar.
  • Melihat senarai pelajar dalam kelas mereka.

3. Pelajar (Student)

  • Melihat jadual kursus.
  • Menyemak kehadiran mereka.
  • Melihat gred dan prestasi akademik mereka.

Cabaran yang Dihadapi

Membina projek ini bukanlah tanpa cabaran. Antara perkara yang paling sukar adalah:

  • Reka Bentuk Skema Pangkalan Data: Memastikan hubungan antara pelajar, guru, dan kursus adalah betul dan efisien dalam pangkalan data NoSQL.
  • Pengurusan State: Menguruskan data pengguna yang kompleks merentasi pelbagai komponen React memerlukan pemahaman yang mendalam tentang Redux.
  • Keselamatan API: Melindungi laluan (routes) sensitif supaya hanya pengguna dengan peranan yang betul sahaja boleh mengaksesnya.

Kesimpulan

Membina sistem pengurusan akademik ini telah memberikan saya banyak pengalaman berharga dalam pembangunan web full-stack. Ia bukan sekadar tentang menulis kod, tetapi tentang memahami keperluan pengguna dan membina penyelesaian yang berfungsi.

Projek ini adalah langkah besar dalam perjalanan saya sebagai pembangun perisian, dan saya tidak sabar untuk terus belajar dan membina lebih banyak lagi!