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

Github repository

The links to the front-end and back-end reimplementations are as follows:

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

Back end:
https://github.com/Shravsssss/reimplementation-back-end

The above repositories have been linked to the GitHub Project:
https://github.com/users/Shravsssss/projects/1

Introduction

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 Requirements

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.

Dummy Data

Interfaces

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.

The dummy data for the deadlines is below. This data is created for the purpose of testing, the future team should delete this file if the data can be successfully retrieved from the database. This data is also located in the same file.

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",
    },
];