CSC/ECE 517 Spring 2024 - E2431. Reimplement grades/view team: Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 6: Line 6:


== Design Patterns ==
== 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.
In the re-implementation of Expertiza's front end, we have utilized several design patterns to enhance maintainability and promote code reusability:
#'''Composite Design Pattern''', since we are going to create our Course component by nesting and composing the Table, Modal, and other components together.
 
#'''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.
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.
#'''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.
 
#'''Observer Pattern''', is leveraged using the Context API provided by React along with hooks like ''useEffect'' and ''useState''.
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.
#'''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.
 
#'''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.
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.
 




Revision as of 04:26, 24 March 2024

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)

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2024_-_E2431._Reimplement_grades/view_team&oldid=153342"