Screenshots

The system runs in production with full feature parity across staff and student roles, dark and light themes, and three responsive breakpoints. Every screenshot below is from the live app: no mockups.

Staff dashboard

Real-time analytics with interactive Chart.js visualizations: grade distribution by letter range, graded vs. ungraded enrollment ratio, course enrollment totals, and student demographics by major. Theme toggles instantly without page reload.

Student management

Full CRUD on the student roster with auto-generated student IDs (initials + 3-digit sequence), live search across name/email/major, ML risk assessment per student, and admin password reset.

Enrollment and grade tracking

Enroll students in courses by semester, assign letter grades that auto-convert to grade points (A=4.0, B+=3.33, etc.), and update grades inline. The UNIQUE constraint on (student_id, course_id, semester) prevents duplicate enrollments.

Student portal

Students log in with their auto-generated ID and see a personalized dashboard: GPA, enrolled courses, total credits, and per-course grades. Different navigation, different view, same authentication layer.

AI risk assessment

The Random Forest model runs on the Flask microservice and returns a risk classification with a confidence score and human-readable recommendation. Staff and students see the same model output, formatted appropriately for each role.

Authentication

A single login page routes users to the correct portal based on their role. Theme detection uses prefers-color-scheme with manual override persisted in localStorage.

Responsive design

Every page adapts from desktop to tablet to mobile. Tables on desktop transform into stacked card layouts on mobile, navigation collapses to fit the viewport, and form fields stack vertically.