CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

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 aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives. The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

Project Goals

There are 2 main goals for this project -

• Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
• Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

Sequence Diagram

• This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

• The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

• The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

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, 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 Assignment 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.

4. Backend

Must add relevant for Backend here

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.

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

Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

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

Must add relevant for backend

Implemented Changes

Manage Participant Frontend Integration

Problem

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

Implemented Changes

1) App.tsx

• The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

2) interfaces.ts

• A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.

3) AssignmentParticipants.tsx

• The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

• The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.

• The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

Edit - Users and Participants table can be updated

Delete

4) EditParticipantModal.tsx

• The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.

5) participant_controller.rb

• The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.

Update Frontend UI

Problem

• Participants list page

As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

• Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

• Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

• Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

Solution

• Participants list page

As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

Code snippets

This code was added for pagination

This code was added to update the table according to the design document.

• Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

Code snippets

This code was added to update the "Add user" button to red.

• Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

• Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

Add/Edit/Remove Participants

Problem

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

Solution

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

Testing

Manual Tests

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

Frontend/Backend Integration Tests

• Ensure the table shows participants. Shown in the demo video.
• Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

UI Tests

• Ensure the proper icon is used for editing a participant. Shown in the demo video.
• Ensure the proper icon is used for deleting a participant. Shown in the demo video.
• Ensure the table has proper pagination. Shown in the demo video.
• Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.

Future Scope

• The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

• The TA role is to be added post merge of the TA feature.

• Enforce CRUD permissions of participants in backend.

Demo Video

You can find the demo video going over the features here

Pull Requests

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

List of changes

Manage Participant Frontend Integration

Frontend

• /src/App.tsx - Adding the new route and appropriate props.
• /src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
• /src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
• /src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

Backend

• app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
• app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

Update Frontend UI

• src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
• /src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
• /src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
• /src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
• /src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

Conclusion

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

• Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

• UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

• Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

Relevant Links

Pull Request that we worked on: [1]

Previous Wiki that we referred to: Link

Guidance on Using Service Objects in Rails: Rails Service Objects Tutorial

Design Document: [2]

Project Mentor

• Anvitha Reddy Gutha <agutha@ncsu.edu>

Members

• Aryan Inguva <ainguva@ncsu.edu>
• Maya Mei <gmei@ncsu.edu>
• Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>