CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

Github repository

Here are the links to the front-end and back-end reimplementations:

Front end:
https://github.com/Shravsssss/reimplementation-front-end

These repositories are connected to the GitHub Project, which contains the necessary issues for project implementation.
https://github.com/users/Shravsssss/projects/1

Expertiza Background

Expertiza is an open-source web application built on Ruby on Rails that enables instructors to create customized assignments with topic lists for students to choose from. It facilitates team formation, allowing students to collaborate on assignments and projects. Expertiza supports peer review processes where students can provide feedback on each other's submissions across various document formats, including URLs and wiki pages. This freely available platform provides a flexible and comprehensive solution for managing assignments, teamwork, and peer evaluations.

Project Description

Enhance the student task view interface in Expertiza by re-implementing the front-end using React JS and TypeScript. The primary objectives are to improve responsiveness, and usability, provide real-time updates, and enhance the overall student experience.

This project will concentrate on the following features:

1. Task Details Display: Show all the important information about assignments like name, due date, progress, review status, and any badges.
2. Task Interaction: Make it easy for users to submit, request revisions, and see feedback. Let them move through different parts of the task easily.
3. Timeline: Show a visual timeline with due dates and let users easily see where they are in the task.
4. Lazy Loading: Make the page load faster by only loading what's needed, so users have a smoother experience.

Peer Review Information

For those who wish to access the Expertiza application linked to this assignment, the login details are provided below:

Instructor credentials: Username -> admin, Password -> password123

Sample Data Used

An interface called "Deadlines" was created in the "interfaces.ts" file of the repository. This interface was designed to structure information related to deadlines. The implementation can be viewed here, with the code added at the end of the file.

To obtain the next upcoming deadline, code was added in the DeadlineUtil.tsx file. Here's a simplified version of the code:

export const getNextDeadline = (): Deadline | null => {
  const now = new Date();
  // Filter the deadlines to get only the upcoming ones
  const upcomingDeadlines = deadlines.filter(deadline => new Date(deadline.date) > now);
  // Return the earliest upcoming deadline, or null if there are no upcoming deadlines
  return upcomingDeadlines.length > 0 ? upcomingDeadlines[0] : null;
};

Moreover, dummy data for the deadlines was included, which is then displayed by the "Deadlines" component within the "StudentTaskView" component. This data serves testing purposes, and it's recommended that future team members delete this file if real data can be retrieved from the database. This data is also located in the same file. Here is the dummy deadlines data provided below

export const deadlines: Deadline[] = [
    {
        id: 1,
        date: "2024-03-22",
        description: "Submit Assignment Round 1",
    },
    {
        id: 2,
        date: "2024-03-27",
        description: "Review Assignment Round 1",
    },
    {
        id: 3,
        date: "2024-04-04",
        description: "Submit Assignment Round 2",
    },
    {
        id: 4,
        date: "2024-04-07",
        description: "Review Assignment Round 2",
    },
];

Files modified in current project

The App.tsx file was modified to incorporate the LazyLoadedStudentTaskViews component, housing the lazy-loaded content of the student task view component, and the StudentTasks component. Two directories named StudentTasks and StudentTaskViews were created inside the pages directory. Inside the StudentTasks folder, a dummy StudentTask.tsx file was added with placeholder code to redirect to the specific student task view.

Student Task Page

The `StudentTask.tsx` file contains a React component called `StudentTask`. This page can be viewed when `Assignments` is clicked from the header. This component generates a link to view a specific assignment. It uses the React Router DOM's `<Link>` component to create the link. Inside the link, it includes the assignment ID as a route parameter. When users click on the link, it takes them to the corresponding assignment view page. Currently, it's set up to show Assignment 5, but this step should be eliminated once the ID can be fetched directly from the database.