Teacher Personal Account for LMS

Development of Instructor Personal Account for LMS

The instructor personal account differs from the student account by fundamentally different tasks: course management, assignment grading, student communication, performance analytics. A well-designed account minimizes time spent on administrative tasks.

Account Sections

Instructor Dashboard—summary: ungraded submissions (with numbers and priority), cohort statistics (active students, average progress), upcoming events (webinars).

My Courses—list of courses taught by instructor. Switch between draft, published, and archive.

Course Builder—create and edit course structure, lessons, assignments.

Gradebook—table of all students × all assignments. Grades, category averages, final scores.

Assignment Review—queue of ungraded submissions with review interface.

Students—list of enrolled students with progress, ability to message, unenroll, extend access.

Analytics—progress charts, retention, problematic lessons.

Dashboard: Review Queue

Ungraded submissions are the most important part. Sort by deadline:

interface TeacherDashboard {
  pendingReviews: {
    submissionId: string;
    studentName: string;
    studentAvatar: string;
    assignmentTitle: string;
    courseName: string;
    submittedAt: Date;
    deadlineAt: Date | null;
    isOverdue: boolean;
  }[];
  activeCohortsStats: {
    cohortName: string;
    totalStudents: number;
    activeThisWeek: number;
    avgProgress: number;
    atRiskCount: number; // Inactive 7+ days
  }[];
  upcomingWebinars: { title: string; startsAt: Date; enrolledCount: number }[];
}

Course Builder

Drag-and-drop course structure editor:

function CourseStructureEditor({ courseId }) {
  const { sections, reorderSections, reorderLessons } = useCourseEditor(courseId);

  return (
    <DndContext onDragEnd={handleDragEnd}>
      <SortableContext items={sections}>
        {sections.map(section => (
          <SortableSection key={section.id} section={section}>
            <SortableContext items={section.lessons}>
              {section.lessons.map(lesson => (
                <SortableLesson key={lesson.id} lesson={lesson} />
              ))}
            </SortableContext>
          </SortableSection>
        ))}
      </SortableContext>
    </DndContext>
  );
}

Lesson can be: video, text, presentation (embedded slider), assignment, quiz, webinar. Lesson settings: required/optional, available immediately or by deadline, requires completion of previous lesson.

Gradebook

Virtualized table for large cohorts (200+ students × 50+ assignments):

import { useVirtualizer } from '@tanstack/react-virtual';

function Gradebook({ courseId }) {
  const { students, assignments, grades } = useGradebook(courseId);

  return (
    <div className="overflow-auto">
      <table>
        <thead>
          <tr>
            <th className="sticky left-0 z-10 bg-white">Student</th>
            {assignments.map(a => (
              <th key={a.id} className="min-w-[80px]">{a.shortTitle}</th>
            ))}
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          {students.map(student => (
            <tr key={student.id}>
              <td className="sticky left-0 bg-white">{student.name}</td>
              {assignments.map(a => {
                const grade = grades[student.id]?.[a.id];
                return (
                  <td key={a.id} className={gradeColor(grade)}>
                    {grade ? `${grade.score}/${a.maxScore}` : '—'}
                  </td>
                );
              })}
              <td className="font-bold">{calculateFinalGrade(student.id)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Course Analytics

Charts:

• Student progress over time (histogram: lessons completed by cohort)
• Retention: what % are active after 1/2/4 weeks
• Problematic lessons: where students most often stop

At-risk student table:

-- Students inactive 7+ days with progress < 50%
SELECT u.name, u.email, cp.percentage, cp.last_activity_at,
       (CURRENT_DATE - cp.last_activity_at::date) AS days_inactive
FROM course_progress cp
JOIN users u ON u.id = cp.student_id
WHERE cp.course_id = $1
  AND cp.completed_at IS NULL
  AND cp.percentage < 50
  AND cp.last_activity_at < NOW() - INTERVAL '7 days'
ORDER BY days_inactive DESC;

Student Communication

Instructor can: message specific student (private message), send message to group (announcement with push+email), leave comment on graded assignment.

Timeline

Dashboard with review queue and statistics—4–5 days. Course builder with drag-and-drop—7–10 days. Gradebook with virtualization—3–4 days. Analytics with charts—4–5 days.