CSC/ECE 517 Spring 2024 - E2434 Reimplement Frontend for the Grades view

Expertiza

Expertiza is an open-source learning management system built with Ruby on Rails as its core. Its features include creating tests and assignments, managing assignment teams and courses, and above all having a solid framework in place to facilitate peer reviews and group comments. The main objective of this project is to develop frontend React Components, with a particular focus on the Grades View page. The goal is to create a fully functional user interface for these components using React.js and TypeScript.

Introduction

The main objective of this project is to reimplement the front end for the grades view page within Expertiza.

Problem Statement

The following tasks were required for the reimplementation :

1. Frontend Reimplementation: Reimplement the frontend of the grades view page in React.js and Typescript which is currently in Ruby.
2. Removal of Checkboxes for Word Count Remove checkboxes related to word count criteria (>10 words, >20 words).
3. Enhanced "Show Submission" Button: The Show Button should reveal the submitted links and the submitted files.
4. Removal of Unused Elements: Remove any unused elements such as URLs, color legends, etc., to streamline the interface. If any column isn’t present, entire columns shouldn’t show up like teammate review
5. Include Heat Map: Heat map should be included in the grades view page.
6. Improve UI: Our aim is to improve user experience and interface efficiency by developing a refreshed front end using React JS and TypeScript.

Design Patterns

Composite Design Pattern:

By nesting and composing elements like Table, Modal, and others, we can effectively design our Course component by utilising the Composite Design Pattern.

DRY Principle:

We want to reduce redundancy by using React's functionality to reuse pre-existing components like Table and Modal, in line with the DRY Principle.

Provider Pattern:

Our goal is to apply the Provider Pattern to React's Context API so that props can propagate naturally throughout the component hierarchy without requiring explicit prop drilling.

Observer Pattern:

Our goal is to take advantage of the Observer Pattern by using hooks like useEffect and useState along with React's Context API to manage component state and side effects efficiently.

HOC Pattern:

Routing for new pages can be made more efficient by using the Higher-Order Component pattern, or HOC Pattern. This entails creating functions that take an input component and provide a changed component with routing functionality.

Mediator Pattern:

Our goal is to apply the Mediator Pattern in light of the discrepancy between frontend requirements and backend data structures. With this method, we can easily change data as needed to ensure that it is consistent and compatible with the rest of our program.

Design

The designs provided are for the existing Grades View Page, which has already been implemented. Our goal is to replicate these designs for the new components mentioned earlier in the project. This involves creating similar visual elements, layouts, and functionalities for these new components to maintain consistency and coherence across the application.

Existing Grades View Page

Test Plan

Since the changes revolve around UI implementation, the features need to be manually checked on the webpages.

1. Check if instructor column is visible when logged in as an admin/superadmin
2. Check if the buttons show some text on hovering the icons
3. Verify that the page header changes based on the role of the logged in user
4. Verify if the search functionality is working for Searching Instructors
5. Check if there is a link on the course name to view the course information
6. Check if only instructors are seen in the drop-down while creating the course

Important Links

• Pull Request [1]
• GitHub repo [2]

Team

Mentor

• Riya Gori

Members

• Aniket Singh Shaktawat <ashakta@ncsu.edu>
• Pankhi Saini <psaini@ncsu.edu>
• Siddharth Shah <ssshah26@ncsu.edu>