CSC/ECE 517 Spring 2025 - E2539 Reimplement Student Task View (Frontend + Backend)

About Expertiza

Expertiza is a robust, open-source web platform designed to empower educational environments that emphasize project-based learning. It streamlines collaborative activities—such as peer reviews, surveys, and team assignments—into an engaging, interactive experience that supports both teaching and learning.

For Instructors/mentors: Expertiza offers a comprehensive suite of tools to manage assignments, provide timely and constructive feedback, and track performance metrics. This enables educators to monitor student progress effectively and ensure optimal learning outcomes.

For Students: The platform is designed with learner engagement at its core. It allows students to actively participate in tasks, collaborate seamlessly with peers, and evaluate each other’s work. This approach not only promotes academic growth but also enhances critical thinking, problem-solving, and teamwork skills.

Expertiza’s flexible architecture makes it ideal for a wide range of educational scenarios—from individual assignments to complex group projects and dynamic peer-review processes—ensuring an enriched, adaptive learning environment for all users.

Introduction

The E2539: Reimplement Student Task View project is focused on improving the Student Task View in the Expertiza application. The current interface is static, lacks responsiveness, and uses mocked data, limiting its effectiveness for real-world use.

The project’s primary goal is to redesign this view using React.js and TypeScript on the frontend and Ruby on Rails on the backend. This new version will provide a modern, interactive experience where students can efficiently manage assignments, track progress, and access feedback in real-time.

Tech Stack:

Frontend: React.js, TypeScript
Backend: Ruby on Rails (API)
Database: MySQL

Key Improvements:

Replace mocked data with live backend integration
Create a responsive and accessible task list view
Design and implement a detailed Student Task Details page
Add a visual timeline for deadlines
Improve usability through tooltips and modular components

✅ Final UI Displays

Login Account

Username: niki
Password: password

Student Tasks Screen

This screen presents a table view of all tasks assigned to the current student. Each row summarizes an individual task, including assignment name, current stage, and due dates. It provides a quick overview of progress across multiple assignments, with clickable links that navigate to the detailed task view (StudentTaskDetail). The layout is clean and responsive, allowing students to easily track their workload at a glance.

Student Task Detail Screen

This screen provides an in-depth view of a specific task selected from the task table. It includes detailed metadata such as assignment name, team, topic, and due dates, displayed in a responsive grid. A visual timeline tracks the student’s progress across stages like submission and review, using intuitive status indicators. This view helps students clearly understand their responsibilities and upcoming deadlines for each assignment.

Problem Statement

The previous Student Task View within the Expertiza application provides essential assignment details, deadlines, and progress tracking but falls short in delivering a responsive, user-friendly experience. The previous interface's limitations hinder students from efficiently managing their tasks, submitting assignments, and accessing feedback.

This project aims to reimplement the Student Task View using React.js and TypeScript for the frontend. The goal is to transform the current view into a modern, interactive, and accessible platform that offers real-time updates and streamlined task management.

Key challenges to address include:

Backend Integration: Rebuild and connect the backend to support newly introduced functionalities, ensuring smooth data flow, accurate task state synchronization, and real-time responsiveness across the interface.

Consisstent UI with Tooltips: Enhance the StudentTasks table by incorporating a reusable Tooltip component on key columns (e.g., Review Grade), providing contextual guidance without overwhelming the interface.

Detailed Task View: Design and implement a dedicated Task Details screen that clearly displays essential information such as assignment name, due date, current stage, review status, and earned badges.

Interactive Task Management: Introduce interactive elements—including submission actions, revision request buttons, and feedback viewers—to make task progression intuitive and user-friendly.

Dynamic Timeline Visualization: Create a visual timeline that outlines all relevant deadlines, highlights the current date and time, and gives students an at-a-glance understanding of their progress and upcoming tasks.

Acceptance Criteria:

The task view shows a visual representation of the different stages of the task (e.g., submission, review, feedback).
Each stage is clearly labeled and the current stage is highlighted.
The stages are navigable, allowing students to see what is coming next or what actions are needed.

Design

Student Task Overview Design Diagram

This design diagram outlines the key components involved in the reimplementation of the Student Task View within the Expertiza application. The focus is on creating a responsive, modern, and interactive experience for students to manage their assignments effectively. Below is an overview of the system architecture:

Full Stack Overview:

1. Frontend Development

The Student Task View serves as the central interface for students to interact with their tasks. It provides:

Displays task details, including assignment name, due date, current stage, review status, and badges.
Includes interactive elements for submitting assignments, requesting revisions, and viewing feedback.
Features a visual timeline for task due dates with a dynamic indicator for the current date and time.
Provides task stage navigation to track progress.

2. Backend Development

Manages the task data, user interactions, and real-time updates.
Provides RESTful APIs that handle task-related queries and updates.
Handles user authentication and ensures the task data is accessible and up-to-date.

3. MySQL Database System

Stores task details, user data, and timelines.
Ensures data persistence and efficient querying for task-related information.

Component Integration Flow:

Navigation Initiation:
- User clicks the “Assignments” tab in the navigation bar.
- 2. React Router updates the URL to /student_tasks.
- 3. StudentTasks component loads and displays the list of assignments.
- 4. User clicks on a specific assignment name from the table.
- 5. Router updates the URL to /student_tasks/:id, triggering navigation to the StudentTaskDetails view.

Data Loading & Component Communication

sequenceDiagram
  participant StudentTasks
  participant API
  participant Database
  participant DOM

  StudentTasks->>API: GET /tasks
  API->>Database: Query task list
  Database-->>API: Return task data
  API-->>StudentTasks: JSON response
  StudentTasks->>DOM: Render timeline & metadata

Simplified UML Diagram

This Classes Relationship is a summary of the previous team setup. It involves several models that manage the relationships between students, assignments, and teams. Each Institution has many Users, where users can be students or instructors. A User (student) can have multiple Participants, which represent the student’s involvement in various Assignments. Each Assignment belongs to a Course and can have many Participants assigned to it. A Team is composed of multiple TeamsUser records, with each TeamsUser linking a User (student) to a specific team for an assignment. The Participant model ties the student to a Team for an assignment, indicating that the student is part of that team. There is no dedicated StudentTask table; instead, the Assignment, Participant, and Team models handle the relationships between students, their tasks, and the teams they are part of.

Student Task UI Design Diagram

The Student Task UI diagram visualizes how students interact with and manage their assignments within the Expertiza application. The diagram emphasizes the layout and functionalities available to students, focusing on clarity and usability. Here’s an explanation of each component:

1. Task Details Section:

Displays essential information about a task, such as:
Assignment Name: Clearly presented as the title of the task.
Due Date: Shows when the task is due, helping students track deadlines.
Current Stage: Displays the student’s current position in the task workflow (e.g., Submission, Review, Feedback).
Review Status: Indicates whether the task has been reviewed or is pending.
Badges: Any relevant achievement or status badges that show progress, completion, or special recognition.

2. Task Interaction Buttons:

Submit Assignment: A button that allows students to submit their work.
Request Revision: Students can request revisions for assignments that are pending review or feedback.
View Feedback: A button to view feedback from reviewers, which helps students improve their work.

3. Timeline Section:

Visual representation of all the task deadlines.
Includes a dynamic indicator showing the present day and time, helping students track their current position relative to upcoming tasks.
Each task’s due date is visually represented in a timeline, making it easier to manage multiple tasks.

4. Task Stage Navigation:

A step-by-step visual representation of the task stages (e.g., Submission, Review, Feedback).
Each stage is clearly labeled, with the current stage highlighted.
Students can navigate between stages to see their progress and identify which actions are needed next.

Improved Implementation of Backend

In the most recent version of the backend, the StudentTask Controller was created by another team. Our role was to design an improvement plan for this controller, focusing on enhancing functionality, permissions, task retrieval, and testing processes. The controller follows RESTful principles and integrates seamlessly with the React frontend.

Action Permissions

The action_allowed? method will ensure that only authorized users, such as students and specific roles, can interact with student tasks. It will authenticate the user, verify their role, and ensure they have the necessary permissions to access or modify student task data. Unauthorized access will be blocked with an appropriate error message.

1. Purpose: Ensure secure access to task data through role-based authorization.

2. Key features:

Blocks non-student users from write operations
Verifies task ownership before showing details
Complies with FERPA data privacy requirements

class Api::V1::StudentTasksController < ApplicationController
  before_action :authenticate_user!
  before_action :authorize_student!, except: [:list]

  private

  def authorize_student!
    return if current_user.student? && owns_task?
    render json: { error: "Access denied" }, status: :forbidden
  end

  def owns_task?
    @student_task.participant.user == current_user
  end
end

Task Retrieval

List Action: This action will return all tasks assigned to the currently logged-in student, organized in a structured JSON format. It ensures students can view their tasks clearly and efficiently.

Method: GET [Populate task list view]

/api/v1/student_tasks/list

Comprehensive Testing with RSwag

Test Case	Description / Input	Expected Outcome
Student accesses their own task	Authenticated student requests their assigned task	200 OK with task details
Student not participating in any assignment	Authenticated student with no assignment attempts to access a task	404 Not Found

Tests will be created for each API endpoint, covering:

Successful Task Retrieval: Verifying that valid requests return the expected task data.

Error Scenarios: Ensuring that tasks are not retrieved if the task ID is invalid, if the user is unauthorized, or if the task does not exist.

Edge Cases: Handling scenarios like empty task lists, non-existent participant IDs, or invalid authentication tokens.

These tests will be incorporated into the Continuous Integration pipeline to maintain robust error handling and prevent regressions.

Enhancement: Relevant File Details

Student_Task.rb:

Added multiple new attributes via attr_accessor (course, review_grade, stage_deadline.) to enrich task data.

 attr_accessor :assignment, :course, :current_stage, :participant, :stage_deadline, :topic, :permission_granted, :deadlines, :review_grade

create_from_participant: Builds a StudentTask with relevant metadata extracted from the Participant.

   # create a new StudentTask instance from a Participant object.
    def self.create_from_participant(participant)
      new(
        assignment: participant.assignment.name,                          # Name of the assignment associated with the student task
        course: participant.assignment.course.name,
        topic: participant.topic,                                         # Current stage of the assignment process
        current_stage: participant.current_stage,                         # Participant object
        stage_deadline: parse_stage_deadline(participant.stage_deadline), # Deadline for the current stage of the assignment
        permission_granted: participant.permission_granted,               # Topic of the assignment
        deadlines: sample_deadlines,
        review_grade: generate_review_grade(participant),
        participant: participant                                          # Boolean indicating if Publishing Rights is enabled
      )
    end

sample_deadlines: Provides mock deadline data for testing or placeholder UI use.

   # Generates a sample list of assignment deadlines relative to today's date.
    # This is likely used for testing or placeholder UI data.
    def self.sample_deadlines
      today = Date.today
      [
        { id: 1, date: (today - 15).to_s, description: "Submission deadline" },
        { id: 2, date: (today - 3).to_s, description: "Round 1 peer review" },
        { id: 2, date: (today - 3).to_s, description: "Round 2 peer review" },
        { id: 2, date: (today + 7).to_s, description: "Review deadline" },
      ]
    end

generate_review_grade: Generates a simulated review score with randomized logic, used for demonstration or test purposes.

    # Generates a simulated review grade for a participant.
    # This is likely placeholder logic for demonstration or testing purposes.
    def self.generate_review_grade(participant)
      # Randomly decide whether the participant has reviews or not
      if [true, false].sample
        reviews = rand(1..6)
        base_score_per_review = 10
        penalty_percent = [0, 10, 25, 50].sample
        raw_score = reviews * base_score_per_review
        final_score = (raw_score * (1 - penalty_percent / 100.0)).round
    
        "Score: #{final_score}/100 \n" \
        "Comment: #{reviews} reviews x #{base_score_per_review} pts/review x #{100 - penalty_percent}% = #{final_score} points \n" \
        "Explanation penalty (-#{penalty_percent}%)"
      else
        "N/A"
      end
    end

Routes.rb:

Reused routes for student_tasks, including custom actions list and view to support UI rendering of task listings and detail views.

      resources :student_tasks do
        collection do
          get :list, action: :list
          get :view
        end
      end

Seeds.rb:

Set up a sample student user (niki) for testing.

  # Create first student with specific name "niki"
  student_user_ids << User.create!(
    name: "niki",
    email: "niki@example.com",
    password: "password",
    full_name: "Niki Jones",
    institution_id: 1,
    role_id: 5
  ).id

Created a predefined list of assignment names.

  # Generate Specific Assignments names
  puts "Creating assignments with specific names"
  assignment_names = [
    "Program 1",
    "Program 3",
    "Program 4",
    "Program 5",
    "OSS Program 1",
    "OSS Program 2",
    "Program 6",
    "Program 7"
  ]

Generated participants across all assignments for all students, with randomized stage data (current_stage, stage_deadline, topic) and team assignments to simulate realistic scenarios.

  puts "assigning participants to all students for all assignments"
  participant_ids = []
  # Array of possible stages
  stages = ["Not started", "In progress", "Submitted", "Reviewed", "Finished"]
  puts "Today is: #{Date.today + rand(1..10).days}"
  student_user_ids.each do |student_id|
    assignment_ids.each do |assignment_id|
      team_id = team_ids.sample # randomly assign a team for the assignment
      participant = Participant.create(
        user_id: student_id,
        stage_deadline: Date.today + rand(1..10).days,
        topic: "Topic #{rand(1..5)}",
        permission_granted: true,
        current_stage: stages.sample,
        assignment_id:,
        team_id:
      )
      if participant.persisted?
        participant_ids << participant.id
      else
        puts "Failed to create Participant: #{participant.errors.full_messages.join(', ')}"
      end
    end
  end

Reimplementation of Frontend

The new UI redesign replicates the functionality of the original page, now leveraging TypeScript for type safety and React for dynamic rendering. This approach enhances the user experience by providing a more responsive and accessible interface, while adhering to modern design principles.

Data Fetching

The frontend communicates with the backend in real time, retrieving assignment details, deadlines, and review statuses dynamically to provide up-to-date task information.

React Component Design

The new design breaks down the UI into reusable React components, such as Header, Task Timeline, and TaskItem, to handle specific parts of the interface. This modular approach enhances code readability, maintainability, and reusability, promoting best practices in React development.

Relevant File Details

StudentTaskDetail.tsx:

1. Purpose: Displays comprehensive task details with interactive progress visualization.

2. Key Features:

a. Fetches task-specific data using URL params (useParams)

b. Visual timeline with status indicators (completed/current/pending)

c. Responsive grid layout for metadata display

3. Code Snippet:

...
import { useParams, Link, useLocation } from "react-router-dom";
const StudentTaskDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  // Get StudentDetails from Parent Component: StudentTasks.
  const StudentDetailsData = location.state;

  const taskDetails = MockedStudentTaskDetails;

  return (
    <div className={styles.container}>
      {/* Add Heading */}
      ...
      <div>
        {/* Add Interative Clickable Links List */}
        ...
      </div>
      <div>
        {/* Add Timeline + TimeStage  */}
        ...
      </div>
      <div> Footer </div>
      <Link to="/student_tasks" className="back-link">
        ...
      </Link>
    </div>
  );
};

export default StudentTaskDetail;

StudentTaskDetail.module.css

1. Purpose: Provides scoped styling for detail view components.

2. Code Snippet:

/* StudentTaskDetail.module.css */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  gap: 25px;
}

.header {
  text-align: left;
  padding: 20px 0;
  font-size: x-large;
  /* border-bottom: 2px solid #eee; */
}

...

StudentTasks.tsx:

1. Purpose: Main view for assignment list with navigation links.

2. Key Features:

a. Iterates through task data and renders individual cards for each task

b. Allows navigation to detailed task view via clickable links

c. Dynamically reflects current status or completion state

d. Supports responsive design for different screen sizes

3. Code Snippet:

Fetches task data from the backend (/student_tasks/list)

...
 // State to hold tasks
  const [tasks, setTasks] = useState<Task[]>([]);

  // Fetch student tasks from the backend when the component mounts
  useEffect(() => {
    const fetchStudentTasks = async () => {
      try {
        const response = await axiosClient.get(`/student_tasks/list`);
        setStudentTasksData(response.data);
      } catch (error) {
        console.error("Error fetching student tasks:", error);
      }
    };

    fetchStudentTasks();
  }, []);

  // Parse and update tasks whenever studentTasksData changes
  useEffect(() => {
    setTasks(parseStudentTasks(studentTasksData));
  }, [studentTasksData]);
...

Parses and structures raw task data into usable format

  /**
   * Converts a raw list of student task data into a structured array of Task objects
   */
  function parseStudentTasks(rawList: any[]): Task[] {
    return rawList.map((item) => {
      const participant = item.participant || {};
      const course = item.course || {};
      return {
        id: participant.id,
        assignment: item.assignment ?? "N/A",
        course: course ?? "CSC 517", // Not present in data, defaulting
        topic: participant.topic ?? "N/A",
        currentStage: item.current_stage ?? participant.current_stage ?? "N/A",
        reviewGrade: item.review_grade ?? "N/A",
        badges: item.badges ?? false, // Adjust if you have badges logic elsewhere
        stageDeadline: item.stage_deadline ?? participant.stage_deadline ?? "",
        publishingRights: participant.permission_granted ?? false,
        deadlines: item.deadlines, // Additional fields for StudentTaskDetails
      };
    });
  }

Renders each task as a row with a clickable link
Supports responsive UI and navigation with react-router

    {
      accessorKey: "assignment",
      header: "Assignment",
      cell: (info: CellContext<Task, string>) => {
        const id = info.row.original.id;
        const matchedTask = tasks.find((task) => task.id === id);
        return (
          <Link to={`/student_task_detail/${id}`} state={{ task: matchedTask }}>
            {info.getValue()}
          </Link>
        );
      },
    },

App.tsx

1. Purpose: Manages navigation hierarchy and accessibility.

2. Key relative feature: Provides skip links and landmark regions between StudentTasks and StudentTaskDetail components.

3. Code Snippet:

<Route path="/student_tasks" element={<StudentTasks />}>  
  <Route path=":id" element={<StudentTaskDetail />} />  
</Route>

Additional Work

ToolTip.tsx

As part of the UI refinement, we introduced a common Tooltip component to provide consistent, contextual information across the application. This component was specifically integrated into the StudentTasks table, replacing hardcoded or inline tooltips.

By using this reusable Tooltip, we ensure:

Consistent styling and behavior throughout the UI.
Improved maintainability, allowing future updates in one place.
Enhanced usability, giving students clear guidance on table headings and columns like review grade.

StudentTasks.tsx

...
import ToolTip from "components/ToolTip";
...
 cell: (info: CellContext<Task, Task["reviewGrade"]>) =>
        info.getValue() === "N/A" ? (
          "NA"
        ) : (
          <ToolTip id="info.row.original" info={info.row.original.reviewGrade || ""} />
        ),
...

Table.tsx

...
import ToolTip from "components/ToolTip";
...
{comment && <ToolTip id="" info={comment} />}
...

Design Principles

In designing the Student Task View reimplementation, we adhere to key software design principles to ensure maintainability, scalability, and readability. The codebase follows the Single Responsibility Principle (SRP) by ensuring that each component and function has a well-defined purpose, reducing the likelihood of unintended changes. Separation of Concerns is maintained by structuring logic into modular components, making the system easier to debug and extend.

Single Responsibility Principle (SRP)

Each function and component in the frontend will focus on a specific aspect of task management, such as rendering assignment details, managing deadlines, or handling submission interactions.

The backend will separate concerns by structuring controllers and services to isolate business logic from request handling.

Don't Repeat Yourself (DRY) Principle

Common functionalities, such as fetching assignment details, checking deadlines, and managing user interactions, will be abstracted into reusable utility functions to reduce redundancy.

Shared logic between different views (e.g., task details and submission interactions) will be extracted into reusable React components and backend services.

Encapsulation & Modularity

In the frontend, state management will be handled efficiently using React hooks and context, preventing unnecessary re-renders and ensuring data consistency.

In the backend, controllers will delegate logic to service classes, limiting the exposure of business logic and maintaining a clear separation between data access and processing.

Responsive & Accessible Design

The UI will follow responsive design principles, ensuring that the Student Task View adapts to different screen sizes and devices.

Test Plan

Test Plan for Student Task View Reimplementation
Test ID	Test Case	Description	Test Steps	Expected Results	Priority	Status
TC1	Verify Task Details Display	Verify that task details (assignment name, due date, current stage, review status, and badges) are displayed correctly.	1. Open task view. 2. Check if the assignment name, due date, current stage, review status, and badges are displayed.	The task view should display the assignment name, due date, current stage, review status, and associated badges in a clear, readable format.	High	Passed
TC2	Verify Dynamic Updates for Task Details	Verify that task details update dynamically when changes occur.	1. Change task details in the backend. 2. Refresh task view.	Task details should update automatically without manual refresh and display the latest data.	High	Passed
TC3	Verify Task Interaction Buttons	Verify that buttons for task actions (submit, revise, view feedback) are visible and functional.	1. Open task view. 2. Check visibility of buttons (submit, revise, feedback). 3. Click each button and observe the action.	Buttons are visible, clickable, and trigger the correct action (e.g., submitting, requesting revision, viewing feedback).	High	Passed
TC4	Verify Task View Updates After Task Interaction	Verify that the task view updates after submitting or requesting a revision.	1. Submit a task. 2. Check if the task view updates to reflect the submission status.	After interaction, task view updates appropriately (e.g., shows "submitted" status after submission).	Medium	Passed
TC5	Verify Timeline Shows Task Due Dates	Verify that the timeline displays task due dates correctly.	1. Open task timeline view. 2. Check that all task due dates are visually displayed on the timeline.	The timeline should show the correct due dates for all tasks.	High	Passed
TC6	Verify Dynamic Present Day Indicator on Timeline	Verify that the timeline includes a dynamic indicator showing the present day and time.	1. Open task timeline view. 2. Check for a dynamic indicator showing the present day and time.	A dynamic indicator should reflect the current day and time on the timeline.	Medium	Passed
TC7	Verify Tasks Are Represented on the Timeline	Verify that tasks are visually represented on the timeline according to their due dates.	1. Open task timeline view. 2. Check that tasks are placed according to their respective due dates on the timeline.	Tasks are visually represented and placed on the timeline based on their respective due dates.	High	Passed
TC8	Verify Task Stages Display Correctly	Verify that the task stages (e.g., submission, review, feedback) are displayed correctly.	1. Open task view. 2. Check if the task stages (submission, review, feedback) are displayed.	Task stages should be clearly displayed with appropriate labels (e.g., "Submission", "Review", "Feedback").	High	Passed
TC9	Verify Current Stage Is Highlighted	Verify that the current stage is visually highlighted.	1. Open task view. 2. Check if the current stage is visually highlighted.	The current stage should be visually highlighted (e.g., different color or bold text).	High	Passed
TC10	Verify Task Stages Are Navigable	Verify that the task stages are navigable, allowing students to track progress.	1. Open task view. 2. Click on different stages to navigate through them.	Students can navigate through stages and see details for each stage.	Medium	Passed

Relevant Links

Pull Requests

Backend: https://github.com/expertiza/reimplementation-back-end/pull/194

Frontend: https://github.com/expertiza/reimplementation-front-end/pull/97

Repos

Backend Repo

Frontend Repo

Visual Presentation

Demonstration Video Kindly change quality to 720p

Developer Guidance

Backend

Setup & Run (via Docker)

Run the following commands from your project root to start the backend environment using Docker:

docker-compose down            # Stops and removes containers, networks, and volumes
docker-compose build --no-cache  # Rebuilds images from scratch without cache
docker-compose up              # Starts the app with fresh containers

Within the container

After starting the containers, access the Rails backend container and run the necessary setup commands:

docker-compose exec web bash     # Open a terminal session inside the backend container

Once inside the container, run:

bundle install                 # Installs necessary gems
rake db:migrate:reset         # Drops, creates, and runs migrations from scratch
rake db:seed                  # Seeds initial test/development data

Frontend

Frontend Setup & Run

For setting up and running the frontend, use the following commands:

npm install          # Installs necessary Node.js packages
npm start            # Starts the frontend application on your local server

Future Scope

With the Student Task(Details) View now redesigned—integrating backend models like Assignment, Participant, and Team into a responsive React UI—there are several impactful directions to further enhance Expertiza:

Dedicated StudentTask Abstraction

Although a StudentTask model exists in the codebase, it currently lacks a backing database table. Creating a dedicated StudentTask table would centralize key data—such as status, deadlines, progress, and feedback—for each student-task instance. This enhancement would:

Simplify frontend API consumption
Improve task-level granularity
Enable easier audit logging and analytics tracking per student-task instance

AI-Driven Smart Feedback Integration

Leverage NLP models to provide students with automated writing feedback, peer review summaries, or rubric suggestions. This would be especially useful after assignment submission, augmenting instructor or peer feedback.

Customizable Task Workflow Engine

Convert the current static stage indicators into a flexible workflow engine. Instructors could define custom task flows like “Draft → Peer Review → Instructor Review → Publish.” Key benefits include:

Greater flexibility across disciplines
Reusability for assignments with unique workflows
Dynamic visual rendering of new workflows in the timeline view

Mentor

Anvitha Reddy Gutha <agutha@ncsu.edu>

Members

Chinmay Nayak <cnayak@ncsu.edu>
Joannes Koomson <jokoomso@ncsu.edu>
Jing Huang <jhuang42@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2539 Reimplement Student Task View (Frontend + Backend)

About Expertiza

Introduction

Tech Stack:

Key Improvements:

✅ Final UI Displays

Login Account

Student Tasks Screen

Student Task Detail Screen

Problem Statement

User Stories

Tasks Table and Navigation

Task Details Display

Task Interaction

View Timeline

Task Stage Navigation

Design

Student Task Overview Design Diagram

Full Stack Overview:

Component Integration Flow:

Simplified UML Diagram

Student Task UI Design Diagram

Improved Implementation of Backend

Action Permissions

Task Retrieval

Comprehensive Testing with RSwag

Enhancement: Relevant File Details

Student_Task.rb:

Routes.rb:

Seeds.rb:

Reimplementation of Frontend

Data Fetching

React Component Design

Relevant File Details

StudentTaskDetail.tsx:

StudentTaskDetail.module.css

StudentTasks.tsx:

App.tsx

Additional Work

ToolTip.tsx

Design Principles

Single Responsibility Principle (SRP)

Don't Repeat Yourself (DRY) Principle

Encapsulation & Modularity

Responsive & Accessible Design

Test Plan

Relevant Links

Pull Requests

Repos

Visual Presentation

Developer Guidance

Backend

Setup & Run (via Docker)

Within the container

Frontend

Frontend Setup & Run

Future Scope

Dedicated StudentTask Abstraction

AI-Driven Smart Feedback Integration

Customizable Task Workflow Engine

Mentor

Members

Navigation menu

Search