CSC/ECE 517 Spring 2024 - E2431. Reimplement grades/view team

Expertiza

Expertiza, a learning management system available as open-source software, utilizes the Ruby on Rails framework as its foundation. Its features encompass the creation of assignments, tests, assignment teams, and courses, among others. Particularly noteworthy is its comprehensive system designed to facilitate peer reviews and feedback within teams and groups. The primary focus of this project lies in developing frontend React Components, specifically targeting User, Institution, and Roles functionalities. The objective is to create a fully operational user interface for these components using React.

To Do

The main objective of this project is to redesign the front end for the grades/view_team page within Expertiza. The current layout suffers from performance issues and outdated design, resulting in decreased usability. Our aim is to improve user experience and interface efficiency by developing a refreshed front end using React JS and TypeScript. The project will concentrate on several key features including displaying team information such as names and assignment details, listing reviewers and their feedback for each assignment while ensuring consistency, visualizing review scores through charts or graphs for comparison, indicating assignment statuses with color-coded labels or icons, and implementing dynamic filters and sorting options to facilitate efficient data exploration for instructors.

Design Patterns

Design patterns help in maintaining large code bases and reusability of code. In this section, we are mentioning the different design patterns that we used in the project while re-implementing the front end for expertiza.

1. Composite Design Pattern, since we are going to create our Course component by nesting and composing the Table, Modal, and other components together.
2. DRY Principle, because one of the major advantages of using React. We are able to reuse components that already exist, like the Table, and Modal components.
3. Provider Pattern. React provides the Context API using which we can pass props down the component chain without explicitly passing it down. Thus using the provider pattern.
4. Observer Pattern, is leveraged using the Context API provided by React along with hooks like useEffect and useState.
5. HOC Pattern. HOC refers to the higher-order component which is a function that takes in a component and returns a component. We will be using this to add routing for the new pages that will be created.
6. Mediator Pattern, is used since the data that comes from the backend is different from how it is required in the frontend. So we use the mediator pattern to change the data in a way we require.

Project Mentor

Kashika Mallick (kmallick@ncsu.edu)

Team Members

Aniruddha Rajnekar (aarajnek@ncsu.edu)

Chaitanya Srusti (crsrusti@ncsu.edu)

Nisarg Doshi (ndoshi2@ncsu.edu)