Я создал полнофункциональную (Full Stack) систему управления академической деятельностью

В моем колледже для учета посещаемости использовали бумажные журналы, а для оценок — таблицы Excel. Объявления висели на физических досках. Моя команда решила оцифровать весь этот процесс.

Мы создали Student Sphere.

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

Панель студента:

  • Просмотр посещаемости и допуска к занятиям
  • Проверка оценок
  • Скачивание учебных материалов
  • Цифровая сдача заданий
  • Просмотр объявлений по семестрам

Панель преподавателя:

  • Обновление посещаемости и оценок
  • Загрузка конспектов и лабораторных работ
  • Установка дедлайнов для заданий
  • Публикация объявлений для конкретных семестров
  • Проверка работ студентов

Панель администратора:

  • Одобрение новых регистраций
  • Управление учетными записями пользователей
  • Перевод студентов на следующий семестр
  • Просмотр статистики системы
  • Управление всеми объявлениями

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

Frontend:

  • HTML5, CSS3 и Vanilla JavaScript
  • Без использования фреймворков вроде React или Vue
  • Один CSS-файл для всех страниц
  • Адаптивный дизайн: от мобильных устройств до экранов 4K

Backend:

  • Node.js и Express.js v5
  • JWT-аутентификация
  • Хеширование паролей с помощью Bcrypt
  • REST API с более чем 30 эндпоинтами

База данных и развертывание:

  • MongoDB Atlas
  • Frontend размещен на Netlify
  • Backend размещен на Render
  • Android-приложение, созданное на Java через WebView

Мы столкнулись с двумя серьезными техническими трудностями.

Проблема 1: Производительность API Изначально панель преподавателя выполняла 46 отдельных API-запросов для загрузки данных студентов. Это приводило к задержке в 14 секунд. Я заменил отдельные вызовы одним запросом MongoDB $in. Это значительно сократило время загрузки.

Проблема 2: Single Page Application без React Мы создали SPA с разграничением ролей, используя только Vanilla JavaScript. Мы вручную управляли роутингом и состоянием. Мы использовали CSS media queries, чтобы обеспечить отсутствие горизонтальной прокрутки на мобильных устройствах.

Ключевые уроки:

  • Разработка без фреймворков учит тому, как веб-технологии работают «под капотом».
  • Оптимизация производительности важнее, чем добавление новых функций.
  • Решения по схеме базы данных, принятые на ранних этапах, влияют на весь проект.
  • Развертывание требует тщательного управления CORS и переменными окружения.

Этот проект был разработан пятью студентами из Ramgovind Institute of Technology, Koderma, под руководством г-на Аджая Кумара Данги (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. Это приводило к неэффективности, ошибкам в данных и трудностям с доступом к информации в реальном времени.

Решив эту проблему, я разработал полнофункциональную (full-stack) систему управления академической деятельностью. В этой статье я подробно расскажу о технологическом стеке, архитектуре и процессе разработки.

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

Для этого проекта я выбрал популярный стек MERN, так как он обеспечивает высокую производительность и масштабируемость.

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

Дополнительные инструменты:

  • Tailwind CSS: Для стилизации интерфейса.
  • JSON Web Tokens (JWT): Для безопасной аутентификации и авторизации.
  • Mongoose: ODM (Object Data Modeling) для упрощения взаимодействия с MongoDB.
  • Redux/Context API: Для управления состоянием приложения.

Основные возможности

Система поддерживает три основные роли пользователей: Администратор, Преподаватель и Студент.

1. Администратор (Admin)

  • Управление пользователями (создание, обновление, удаление студентов и преподавателей).
  • Управление курсами и программами обучения.
  • Назначение преподавателей на курсы.
  • Просмотр общих отчетов по колледжу.

2. Преподаватель (Faculty)

  • Управление своими курсами.
  • Отметка посещаемости студентов.
  • Выставление и редактирование оценок.
  • Доступ к спискам студентов в своих группах.

3. Студент (Student)

  • Просмотр своих курсов и расписания.
  • Просмотр оценок и посещаемости.
  • Доступ к учебным материалам (если предусмотрено).

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

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

Сервер построен на базе Node.js и Express.js. Я реализовал RESTful API, который обрабатывает запросы от фронтенда.

Основные эндпоинты:

  • POST /api/auth/login: Аутентификация пользователя.
  • GET /api/students: Получение списка студентов (только для админа).
  • POST /api/grades: Добавление оценки (для преподавателя).
  • GET /api/courses: Получение списка курсов.

Безопасность обеспечивается с помощью JWT. При входе пользователь получает токен, который затем отправляется в заголовке Authorization для защиты защищенных маршрутов.

Frontend (Клиентская часть)

Интерфейс разработан с использованием React. Для навигации я использовал react-router-dom, а для управления состоянием — Context API (или Redux).

Компоненты разделены на:

  • Общие компоненты: Кнопки, поля ввода, модальные окна.
  • Страницы: Dashboard, Login, Student Profile, Course List и т. д.
  • Защищенные маршруты (Protected Routes): Компоненты, которые проверяют наличие токена и роль пользователя перед рендерингом страницы.

База данных

Я использовал MongoDB с Mongoose для определения схем данных.

Пример схемы пользователя (User Schema):

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', 'faculty', 'student'], required: true },
  // Другие поля...
});

Трудности, с которыми я столкнулся

1. Сложные связи в базе данных

Связывание студентов с курсами, а курсов с преподавателями потребовало тщательного проектирования схем. Я использовал ссылки (references) в Mongoose для реализации связей «многие ко многим».

2. Управление состоянием (State Management)

Когда приложение разрослось, передача данных через пропсы (props) стала неудобной. Переход на Context API помог централизованно управлять данными пользователя и состоянием аутентификации.

3. Безопасность

Обеспечение того, чтобы студент не мог получить доступ к функциям администратора, потребовало реализации middleware для проверки ролей на стороне сервера.

Заключение

Создание этой системы помогло мне значительно углубить знания в области full-stack разработки. Я научился проектировать базы данных, создавать защищенные API и строить сложные интерфейсы на React.

В будущем я планирую добавить:

  • Уведомления в реальном времени (с помощью Socket.io).
  • Возможность загрузки учебных материалов (PDF, видео).
  • Интеграцию с платежными системами для оплаты обучения.

Если вам понравилась эта статья, не забудьте поставить лайк и подписаться!