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

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

Я створив full-stack систему управління академічною діяльністю для свого коледжу — ось як я це зробив

Коли я вступив до коледжу, я помітив, наскільки застарілими та неефективними були процеси управління. Все було або на папері, або в розрізнених Excel-таблицях. Це призводило до помилок, затримок та загального хаосу.

Тому я вирішив побудувати власну систему управління академічною діяльністю.

Технологічний стек

Для цього проєкту я обрав MERN stack, оскільки він дозволяє швидко створювати масштабовані вебдодатки:

  • MongoDB: NoSQL база даних для гнучкого зберігання даних про студентів, викладачів та курси.
  • Express.js: Веб-фреймворк для Node.js для створення API.
  • React: Бібліотека для створення динамічного та інтерактивного інтерфейсу користувача.
  • Node.js: Середовище виконання для серверної частини.

Основні можливості

Система була розроблена з урахуванням потреб трьох основних ролей:

1. Адміністратор

  • Керування користувачами (студенти, викладачі, персонал).
  • Створення та редагування курсів.
  • Призначення викладачів до курсів.
  • Моніторинг загальної статистики коледжу.

2. Викладач

  • Управління списками студентів.
  • Встановлення оцінок та відвідуваності.
  • Завантаження навчальних матеріалів.

3. Студент

  • Перегляд розкладу занять.
  • Перегляд своїх оцінок та успішності.
  • Доступ до навчальних ресурсів.

Архітектура системи

Backend (Серверна частина)

Я побудував RESTful API за допомогою Node.js та Express.js. Для безпеки я використав JSON Web Tokens (JWT) для автентифікації та авторизації користувачів. Кожен запит до захищених маршрутів потребує валідного токена.

Database (База даних)

Використовуючи MongoDB, я створив схеми для різних сутностей:

  • User: зберігає дані про облікові записи, ролі та паролі (захешовані за допомогою bcrypt).
  • Course: містить назву, опис та список студентів.
  • Grade: пов'язує студента, курс та отриману оцінку.

Frontend (Клієнтська частина)

Frontend був побудований на React. Я використовував React Router для навігації між сторінками та Axios для здійснення HTTP-запитів до нашого API. Для стилізації я обрав Tailwind CSS, що дозволило створити чистий та сучасний інтерфейс.

Виклики та вивчені уроки

Найбільшим викликом було проектування структури бази даних, яка була б достатньо гнучкою, але водночас забезпечувала цілісність даних. Також було непросто налаштувати складну логіку ролей (RBAC — Role-Based Access Control), щоб гарантувати, що студенти не мають доступу до функцій адміністратора.

Цей проєкт навчив мене багато чому: від проектування архітектури API до управління станом у складних React-додатках.

Висновок

Побудова цієї системи була неймовірним досвідом. Вона не лише допомогла мені покращити навички розробки, а й дала можливість створити щось справді корисне.