Разработка личного кабинета студента для LMS

Разработка личного кабинета студента для LMS

Личный кабинет студента — главная точка входа в платформу. Отсюда студент управляет своими курсами, видит прогресс, получает задания и сертификаты. Хорошо спроектированный кабинет снижает количество вопросов в поддержку и удерживает пользователей.

Разделы личного кабинета

Дашборд — первый экран после входа. Показывает: активные курсы с прогрессом, ближайшие дедлайны, последние уведомления, streak.

Мои курсы — список всех записей с фильтрами (активные, завершённые, приостановленные). Карточка курса: обложка, название, прогресс-бар, последний урок.

Расписание — календарь вебинаров и дедлайнов, интеграция с Google Calendar через iCal.

Задания — сводка по всем незакрытым заданиям: что нужно сдать, что ожидает проверки, что уже проверено.

Мои сертификаты — список полученных сертификатов с возможностью скачать PDF и поделиться ссылкой.

Настройки — профиль, уведомления, безопасность, способы оплаты.

Архитектура дашборда

// Агрегированные данные для дашборда — один запрос
interface StudentDashboard {
  activeCourses: {
    id: string;
    title: string;
    coverUrl: string;
    progress: number;
    lastLesson: { id: string; title: string };
    nextDeadline: { title: string; dueAt: Date } | null;
  }[];
  upcomingDeadlines: {
    assignmentId: string;
    title: string;
    courseName: string;
    dueAt: Date;
    status: 'not_started' | 'in_progress' | 'submitted';
  }[];
  upcomingEvents: {
    id: string;
    title: string;
    startsAt: Date;
    joinUrl: string;
  }[];
  recentActivity: {
    type: string;
    description: string;
    createdAt: Date;
  }[];
  stats: {
    totalCourses: number;
    completedCourses: number;
    totalXp: number;
    currentStreak: number;
    certificatesCount: number;
  };
}

Дашборд загружается одним API-вызовом — никаких N+1 запросов в компонентах.

Прогресс-бар курса

function CourseProgressCard({ course }) {
  return (
    <Link to={`/courses/${course.id}/continue`} className="block rounded-xl border p-4 hover:shadow-md">
      <div className="flex gap-3">
        <img src={course.coverUrl} className="w-16 h-16 rounded-lg object-cover" />
        <div className="flex-1 min-w-0">
          <h3 className="font-medium truncate">{course.title}</h3>
          <p className="text-sm text-gray-500 mt-1">Последний урок: {course.lastLesson.title}</p>
          <div className="mt-2">
            <div className="flex justify-between text-xs text-gray-500 mb-1">
              <span>Прогресс</span>
              <span>{course.progress}%</span>
            </div>
            <div className="h-1.5 bg-gray-100 rounded-full">
              <div
                className="h-full bg-blue-500 rounded-full transition-all duration-500"
                style={{ width: `${course.progress}%` }}
              />
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
}

Уведомления в кабинете

Центр уведомлений (колокольчик в хедере) + страница всех уведомлений. Типы уведомлений:

• Задание проверено: «Ваша работа по React получила оценку 92/100»
• Дедлайн через 24 часа
• Новый урок добавлен в курс
• Ответ на ваш пост в форуме
• Вебинар через 15 минут

CREATE TABLE notifications (
  id          UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id     UUID REFERENCES users(id),
  type        VARCHAR(100) NOT NULL,
  title       VARCHAR(500),
  body        TEXT,
  action_url  VARCHAR(2000),
  is_read     BOOLEAN DEFAULT FALSE,
  created_at  TIMESTAMPTZ DEFAULT NOW()
);
CREATE INDEX ON notifications (user_id, is_read, created_at DESC);

Непрочитанный счётчик кэшируется в Redis: user:notifications:unread:{user_id}. Инкрементируется при создании уведомления, сбрасывается при открытии центра уведомлений.

Настройки профиля

• Аватар: загрузка файла → кроппер (react-image-crop) → сохранение в S3
• Смена email с подтверждением на новый адрес
• Смена пароля с проверкой текущего
• Настройки уведомлений: какие типы и по каким каналам (email, push)
• Тайм-зона: влияет на отображение всех дат в интерфейсе

Сроки

Дашборд с активными курсами, дедлайнами и статистикой — 4–5 дней. Страницы заданий, сертификатов, расписания — 3–4 дня. Центр уведомлений с real-time обновлениями — 2–3 дня. Настройки профиля — 2–3 дня.