CSC/ECE 517 Spring 2024 - E2444 Implement Frontend for the Review

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

Reimplementation To Be Done

Following is the Heat Map which is already implemented in the Expertiza. Our goal is to incorporate these changes into the current front end of the Expertiza and then start building our changes on it.

Test Plan

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

1. Component Rendering: Ensure that all components from the original Ruby frontend are properly re-implemented in React.js and Typescript.
2. Styling Consistency: Verify that the new frontend maintains consistent styling with the rest of the application.
3. Functionality Testing: Test all interactive elements such as buttons, dropdowns, and input fields to ensure they work as expected.
4. Responsive Design: Check the responsiveness of the new frontend on different screen sizes and devices.
5. "Show Submission" Button: Ensure that submitted links are displayed correctly, and they lead to the appropriate destinations when clicked. Verify that submitted files are listed correctly, and they can be downloaded or viewed as intended.
6. Word Count Validation: Check if the word count validation is still functioning correctly without the checkboxes.
7. Heat Map Integration and Functionality: Verify that the heat map is integrated correctly and accurately represents the scores of peer reviews received.
8. Interface Efficiency: Check if the new frontend enhances interface efficiency by being more intuitive and user-friendly.

Important Links

• GitHub repo [1]
• Pull Request to be merged before starting this project [2]

Team

Mentor

• Riya Gori

Members

• Mitesh Agarwal <magarwa3@ncsu.edu>
• Shubham Loya <ssloya@ncsu.edu>
• Chris Mason <cpmason@ncsu.edu>