Student Personal Account for LMS

Development of Student Personal Account for LMS

The student personal account is the main entry point to the platform. From here, students manage their courses, track progress, get assignments, and receive certificates. A well-designed account reduces support questions and improves user retention.

Account Sections

Dashboard—first screen after login. Shows: active courses with progress, upcoming deadlines, recent notifications, streaks.

My Courses—list of all enrollments with filters (active, completed, suspended). Course card: cover, title, progress bar, last lesson.

Schedule—calendar of webinars and deadlines, integration with Google Calendar via iCal.

Assignments—summary of all open assignments: what to submit, what awaits review, what's already graded.

My Certificates—list of earned certificates with PDF download and share link options.

Settings—profile, notifications, security, payment methods.

Dashboard Architecture

// Aggregated dashboard data—single query
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;
  };
}

Dashboard loads in one API call—no N+1 queries in components.

Course Progress Bar

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">Last lesson: {course.lastLesson.title}</p>
          <div className="mt-2">
            <div className="flex justify-between text-xs text-gray-500 mb-1">
              <span>Progress</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>
  );
}

Notifications in Account

Notification center (bell icon in header) plus page for all notifications. Notification types:

• Assignment graded: "Your React work scored 92/100"
• Deadline in 24 hours
• New lesson added to course
• Reply to your forum post
• Webinar in 15 minutes

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);

Unread count cached in Redis: user:notifications:unread:{user_id}. Incremented on notification creation, reset when opening notification center.

Profile Settings

• Avatar: file upload → cropper (react-image-crop) → S3 storage
• Email change with verification on new address
• Password change with current password check
• Notification settings: which types and via which channels (email, push)
• Timezone: affects display of all dates in interface

Timeline

Dashboard with active courses, deadlines, and stats—4–5 days. Assignment, certificate, and schedule pages—3–4 days. Notification center with real-time updates—2–3 days. Profile settings—2–3 days.