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

Introduction

Expertiza is an open-source Ruby on Rails platform designed to facilitate peer learning by allowing students to create and submit assignments, review one another’s work, and collaborate on projects. One of its core features is the Participants interface: a tab linked directly to each Assignment that displays who is enrolled, their roles (e.g. student, reviewer, instructor), and allows administrators or instructors to add, edit, or remove participants.

Project Goals

The two goals of this project are

1. Seamless Frontend-Backend Integration

• Replace static stub data with real API calls to the Rails ParticipantsController, ensuring every CRUD operation (Create, Read, Update, Delete) happens in real time and reflects immediately in the UI.

• Implement proper loading states, retries, and error displays so users know exactly when an action is in progress or has failed.

2. Modernized, Consistent UI

• Rework the Participants table using React, TypeScript, SCSS/CSS Modules, and React-Bootstrap components to match the latest Expertiza design guidelines such as typography, spacing, color schemes.

• Add advanced table features—client-side sorting, server-driven filtering, and pagination controls so that instructors can efficiently navigate hundreds of participants.

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.

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

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 Component

• Represent individual units of data such as one Assignment participant entry or one review entry.
• Contain contextual actions like Delete, Edit, Confirm, Submit.
• Includes modal triggers or dynamic tooltips.

2. Backend

The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

Framework & API Style

• Built as a Ruby on Rails API, using RESTful routes under /participants.

• All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

Data Modeling & Validation

• Participant model links User, Assignment, and Role (each as a belongs_to).

• Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

Authentication & Authorization

• Uses token-based authentication so only logged-in users can call the API.

• Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

• Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

Design Goals

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

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

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

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.

Solution

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

Problems

1. 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.

Solution

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.

2. Add participants

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

Solution

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.

3. 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

Solution

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.

4. 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

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.

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 [1].

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

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: [3]

Previous Wiki that we referred to: Link

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

Design Document: [4]

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>