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 :
- Frontend Reimplementation: Reimplement the frontend of the grades view page in React.js and Typescript which is currently in Ruby.
- Removal of Checkboxes for Word Count Remove checkboxes related to word count criteria (>10 words, >20 words).
- Enhanced "Show Submission" Button: The Show Button should reveal the submitted links and the submitted files.
- 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
- Include Heat Map: Heat map should be included in the grades view page.
- Include Heat Map: Heat map should be included in the grades view page.
Design
Added Instructor Column
The instructor column is now visible only for admin and superadmin users, enhancing the interface for better clarity.
This dynamic feature ensures that the interface adapts based on the user's role, providing relevant information as needed.
Improved Readability with Hover Effects
Action buttons now have hover effects, enhancing readability and providing visual feedback to users.
Hovering over action buttons triggers visual cues, making it easier for users to identify interactive elements.
Customized Page Headers
Page headers are now customized based on the user's role, offering a personalized experience.
Depending on who is signing in, the page headers dynamically adjust to display relevant information, improving user engagement.
When user is an Instructor
When user is a TA
Enhanced Search Functionality
Implemented a search functionality based on instructors, allowing users to quickly find relevant information.
Users can now easily search for instructors, streamlining the navigation process and improving user experience.
Modal Dialogue Box for Course Information
Added a link on the course name that opens a modal dialogue box, displaying detailed course information.
This feature provides users with quick access to essential course details without navigating away from the current page.
Improved User Dropdown Selection
During the instructor selection process, all users were displayed in the dropdown menu, leading to potential confusion and inefficiency. Now, only actual instructors are shown, streamlining the selection process.
Code Refactoring and Optimization
Conducted code refactoring to enhance usability, maintainability, and performance.
Added relevant comments to the codebase for improved understanding and documentation.
Optimized UI code and made code snippets as independent as possible for better modularity and scalability.
Files Modified
- Course.tsx [1]
- CourseColumns.tsx[2]
- CourseCopy.tsx[3]
- CourseDelete.tsx[4]
- CourseDetails.tsx[5]
- CourseEditor.tsx[6]
- CourseUtil.tsx[7]
- interfaces.ts[8]
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.
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
Team
Mentor
- Riya Gori
Members
- Aniket Singh Shaktawat <ashakta@ncsu.edu>
- Pankhi Saini <psaini@ncsu.edu>
- Siddharth Shah <ssshah26@ncsu.edu>