Redesign and Plan for the "Create a Course Plan" Page

[firepenguindisopanda]

Overview

The current page is setup to make 4 api requests when loaded and transforms the data on the frontend to the required format. Our attempt is to reduce this to make only one api call

The "Create a Course Plan" page is a critical component in the student advising system, enabling students to plan their coursework based on completed courses, eligible courses, and courses available for the semester. Given the complexity of the requirements, this redesign aims to improve the way data is sent from the backend and how it is handled and displayed on the frontend.

Data Requirements

The frontend requires data that includes:

• Completed Courses: Courses the student has already completed.
• Eligible Courses: Courses the student is eligible to take based on prerequisites, antirequisites and completed courses.
• Available Courses: Courses available in the current semester.

Each course needs to be associated with a specific category:

• L1CORE
• L2CORE
• L3CORE
• ADVELECTIVE
• CIELECTIVE
• CIMELECTIVE
• FOUN

API Design

To simplify data handling and reduce complexity on the frontend, it’s recommended to send all required data in a single API response. The backend will handle the logic of combining the three data sets (completed courses, eligible courses, available courses) and categorizing them into the appropriate sections.

API Endpoint

• Endpoint: /student/:studentId/course-plan/:semesterId
• Method: GET
• Parameters:

1. studentId: The ID of the student for whom the course plan is being created.
2. semesterId: The ID of the semester for which the courses are being planned.

Response Format

{
  "L1CORE": [
    {
      "courseId": "COMP1601",
      "courseName": "Computer Programming 1",
      "credits": 3,
      "completed": true,
      "available": false
    },
    ...
  ],
  "L2CORE": [
    ...
  ],
  ...
}

Each course object contains:

• courseId: Unique identifier for the course.
• courseName: The name of the course.
• credits: The number of credits for the course.
• completed: Boolean indicating if the student has completed the course.
• available: Boolean indicating if the course is available for the current semester.

Frontend Handling

On the frontend, the received data will be used to dynamically generate an accordion where each section (L1CORE, L2CORE, etc.) lists the courses under that category.
Each course will have a checkbox:

• If the course is completed, the checkbox will be checked and disabled (grayed out).
• If the course is available but not completed, the checkbox will be interactive, allowing the student to select it.
• The interface will also enforce a credit limit, ensuring students do not exceed the maximum number of credits allowed.