CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2

From Expertiza_Wiki
Jump to navigation Jump to search

Introduction

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review. This project provides the tools necessary for an instructor to manage courses and assignments, for which students can be assigned to teams and submit assignments. After submission, peer assessment allows for students to give feedback to each other, facilitating critical thinking and learning. Both the frontend and backend of Expertiza are currently going through reimplementations. In particular, the frontend is being developed in Typescript.

Problem Statement

Expertiza is an open-source project, so many developers contribute to the project, and often with differing design choices. This UI project aims to provide more consistency between different pages and tools. In particular, the focus is on the Submissions and Courses pages, and subsequent pages/modals. The changes should reduce visual clutter and provide consistency between UI, making the interface much easier to use.

Functional Requirements

Overall Requirements

Merging Past Pull Requests

The UI changes that were changed in this project are done on top of three pull requests of the frontend reimplementation project, and thus, the tasks of this project were separated in accordance to these pull requests. These pull requests were UI for Courses, Reimplement add TA, and UI for View Submissions.

UI Design Guidelines

This project follows design guidelines shown in this document. All tables need to use the prebuilt Table component. This Table component uses a Pagination component, which allows users to select different pages of a table. However, this Pagination component should only be visible if there are more than one page. Another important guideline is the text formatting. Headings should follow camel case capitalization, while other text should capitalize only the first letter of the first word. Most changes done in this project are made to adhere to this guideline. Finally, the icons, buttons, and notifications all needed to follow particular styles provided in the design document.

Non-task Specific Requirements

There are some requirements that are applied to components used by all three tasks.

  • Pagination should only be visible if there is more than one page of entries.
  • The Table component needs to include a “disableGlobalFilter” option

Task 1 Requirements

Task 1 deals with the UI changes needed for UI for Courses. All of these changes are done to the Courses page.

  • The page’s header needs to be updated to follow text formatting guidelines.
  • The table headers should follow non-header capitalization guidelines.
  • The table should not use either the global or column filters.
  • The date format used for the “Creation date” and “Updated date” should show the user’s local time and should not show seconds and milliseconds.
  • The button for creating a course should be red, and contain the text “Create Course”.
  • Confirmation buttons should be red.
  • Text labels should follow non-header capitalization guidelines.
  • Subsequent modals should also follow the same guidelines.
  • Note: Manage TAs is part of task 2

Task 2 Requirements

Task 2 deals with the UI changes needed for Reimplement add TA. All of these changes are done to the Manage TAs modal of the Courses page.

  • The table headers should follow non-header capitalization guidelines.
  • The table should not use either the global or column filters.
  • The button for adding a TA should be updated.
  • Confirmation buttons should be red.
  • Error notification should use the Alert component.
  • Text labels should follow non-header capitalization guidelines.
  • Subsequent modals should also follow the same guidelines.

Task 3 Requirements

Task 3 deals with the UI changes needed for UI for View Submissions.

  • The table headers should follow non-header capitalization guidelines.
  • The table should not use either the global or column filters.
  • Text labels should follow non-header capitalization guidelines.
  • Submission History should also follow the same guidelines

Technologies

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Technical Design

1. Frontend

The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

Main Table Component:
  • Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
  • Dynamically renders rows and columns based on props and external data.
  • Incorporates reusable logic like sorting, filtering, pagination, and responsive design.
Row Components:
  • Represent individual units of data such as one TA entry or one review entry.
  • Contain contextual actions like Delete, Edit, Confirm, Submit.
  • Includes modal triggers or dynamic tooltips.
Helper Components:
  • Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
  • Commonly uses components like dropdown selectors, role toggles, and conditional status displays.
Modal Components:
  • Used for confirming actions like deletion, submission, or role changes.
  • Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

2. State Management

State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

  • React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.
  • React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).
  • REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.
  • API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

3. Styling and UI

  • SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
  • Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system
  • CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.
  • Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

Design principles

Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

Implementation Details

Task 1

Manage Courses

Original UI

Reimplemented UI


No pagination if there is only one page in the reimplemented UI:

Code snippet:

Global filter span in the Table component changed:

This code snippet was added to allow the global filter to be disabled via a "disableGlobalFilter" option of the Table component.

Task 2

Manage TA modal

Original UI

Reimplemented UI

Add TA modal

Original UI

Reimplemented UI

Add TA alert

Original UI

Reimplemented UI

Code Snippet:

Icon change for adding TA:

This code snippet shows the updated button in the Manage TA modal of the Courses page.

Alert messages change:

This code snippet shows the new Alert component that is consistent with the design guidelines.

Task 3

Submissions Table

Original UI

Reimplemented UI

Submissions History Table

Original UI

Reimplemented UI


Navbar

Original UI

Reimplemented UI

Code Snippet:

New Table:

This code snippet shows the options used for the Table component that is in line with the design guidelines. In particular, both the global and column filters are disabled, and the table data uses the correct font size and line height.

New Navbar:

The Submissions page was incorrectly named "Assignment" in the navigation bar, so now it has been moved into the Manage dropdown.

Demo Video

Please find the demo video going over the features at https://youtu.be/hhPBc9CfjSs

List of Changes

Non-task Specific

  • src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
  • src/components/Table/Table.tsx - Updated table component to include a "disableGlobalFilter" option

Task 1

  • src/pages/Courses/Courses.tsx - Updated text, table, and button formatting
  • src/pages/Courses/CourseColumns.tsx - Updated text and table formatting
  • src/pages/Courses/CourseCopy.tsx - Updated text and button formatting
  • src/pages/Courses/CourseDelete.tsx - Updated text and button formatting
  • src/pages/Courses/CourseEditor.tsx - Updated text and button formatting

Task 2

  • /src/pages/TA/TA.tsx - Updated Icon, text and button formatting
  • /src/pages/TA/TAColumns.tsx - Updated Icon
  • /src/pages/TA/TAEditor.tsx - Updated Icon, button, text and warning message formatting
  • /src/pages/TA/TADelete.tsx - Updated button formatting

Task 3

  • /src/pages/Submissions/SubmissionsView.tsx - Added new Table component. Updated text and button formatting
  • /src/pages/Submissions/SubmissionsHistoryView.tsx - Added new Table component. Updated text and button formatting.
  • /src/pages/Submissions/SubmissionsTable/SubmissionsEntry.tsx - Added new Table component. Updated text and button formatting.
  • /src/pages/Submissions/SubmissionsTable/SubmissionsList.tsx - Added new Table component. Updated text and button formatting.
  • /src/layout/Header.tsx - Removed the Assignments tab to add the Submissions tab under Manage.

Pull Request

You can find the changes made in this project through this pull request.

Conclusion

The enhancements implemented in this project have greatly improved the UI consistency, usability, and maintainability of the Expertiza platform. By reworking outdated components and aligning them with modern design guidelines, we ensured a cleaner, more user-friendly experience across different user roles. The following pull requests were central to our reimplementation work:

These PRs focused on restructuring table components, refining modal behavior, updating icons, enhancing accessibility, and ensuring overall alignment with the Expertiza design system. We successfully completed all assigned features and UI refinements while strictly adhering to the Expertiza design guidlines provided. This included updates to typography, spacing, component styling, and standardized interactions across the application.

Future Scope

  • Enhancing TA UX: Improve user experience with editing and managing TAs.
  • Backend Implementation/Integration of Submissions and Submissions History: Currently, the Submissions page uses mock data, as the backend is currently not developed.
  • Implementation of Deleting TAs: While out of the scope of this project, the past project did not implement the deletion of TAs, so that feature is currently not available.
  • More Robust Logging: With more standardized logging, the debugging process could be streamlined, as useful information can be shown in the console.

Relevant Links

Project Mentor

  • Anvitha Reddy Gutha <agutha@ncsu.edu>

Team Members

  • Aryan Inguva <ainguva@ncsu.edu>
  • Maya Mei <gmei@ncsu.edu>
  • Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>
Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2025_-_E2523:_Enhancing_UI_Consistency_in_Expertiza_2&oldid=164861"