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

In the re-implementation of Expertiza's front end, we have utilized several design patterns to enhance maintainability and promote code reusability:

1. Composite Design Pattern: We employ the Composite Design Pattern by nesting and composing components like Table, Modal, and others to construct our Course component effectively.

2. DRY Principle: Adhering to the DRY Principle, we leverage React's capabilities to reuse existing components such as Table and Modal, thereby minimizing redundancy in our codebase.

3. Provider Pattern: Using React's Context API, we implement the Provider Pattern to seamlessly pass props down the component tree without explicit prop drilling.

4. Observer Pattern: We harness the Observer Pattern using React's Context API alongside hooks like useEffect and useState to efficiently manage component state and side effects.

5. HOC Pattern: The HOC Pattern, or Higher-Order Component pattern, is adopted to facilitate routing for new pages by creating functions that take in a component and return a modified component with routing capabilities.

6. Mediator Pattern: Given the disparity between backend data structures and frontend requirements, we employ the Mediator Pattern to transform data as needed, ensuring compatibility and coherence within our application.

These design patterns play a pivotal role in ensuring the scalability, maintainability, and extensibility of our front-end implementation for Expertiza.

Project Mentor

Kashika Mallick (kmallick@ncsu.edu)

Team Members

Aniruddha Rajnekar (aarajnek@ncsu.edu)

Chaitanya Srusti (crsrusti@ncsu.edu)

Nisarg Doshi (ndoshi2@ncsu.edu)