CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

From Expertiza_Wiki
Jump to navigation Jump to search

Background

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

Problem Statement

The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:

  • Integration Validation: Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
  • UI Merging: Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

Purpose and Scope

This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

Objectives

  • Validate Integration: Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
  • UI Consolidation: Merge the separate “View Assignments in Courses” UI into the main course management React interface.
  • Codebase Cleanup: Remove redundant or standalone implementations once merged to avoid duplication.
  • Maintain Compatibility: Ensure that permissions, routing, and rendering work consistently across all merged components.
  • Improve UX: Provide a cohesive user experience by unifying related course features into a single interface.

Design Goals

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

  • Efficient Data Handling:

CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

  • Error Handling and Validation:

All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

  • API Documentation and Testing:

RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

  • Modular and Scalable Architecture:

The backend follows modular design principles such as:

  • Single Responsibility Principle (SRP)
  • Don’t Repeat Yourself (DRY)

Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

Implementation Plan

This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

Frontend Implementation

Set up the reimplementation frontend locally from the repository.

  • Test the existing course UI to ensure data is rendered from the backend
  • Verify table functionalities like sorting, filtering, pagination, and responsiveness
  • Integrate the “View Assignments in Courses” UI into the course view
  • Add toggle button or collapsible UI element to show/hide assignments
  • Implement dark/light mode toggle using React state and conditional TailwindCSS classes
  • Ensure proper UI formatting for assignment rows, including icons and action handlers
  • Test user interactions and error/success messages

UI Screenshots

Screenshot of Manage Assignments page
Screenshot of Manage Assignments page


Dark mode screenshot of Manage Courses page
Dark mode screenshot of Manage Courses page

Backend Implementation

Set up the reimplementation backend API locally and link it with the frontend.

  • Validate all course-related API endpoints (GET, POST, PUT, DELETE)
  • Ensure assignments returned by the backend are filtered by course ID
  • Monitor backend logs for errors and fix request/response mismatches
  • Confirm compatibility of existing assignment APIs with frontend integration

Files Modified

Part 1: Backend Files Changed

  • database.yml
  • routes.rb
  • docker-compose.yml
  • Participants Controller
  • Assignments Controller


Part 2: Frontend Files Changed

  • src/pages/Assignments/Assignment.tsx
  • src/pages/Participants/Participants.tsx
  • src/App.tsx

Test Plan

Manual Tests

This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

Frontend/Backend Integration Tests

  • Ensure the Courses table (Course.tsx) loads all available course records using backend data.
  • Verify that assignment lists (CourseAssignments.tsx) expand correctly under each course and fetch backend data as expected.
  • Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
  • Confirm that assignment data is rendered only within its associated course section.
  • Simulate API failure by mocking bad responses and verify that appropriate error messages are shown


UI Tests

  • Confirm correct icons are used for actions in the Courses and Assignments sections.
  • Ensure the assignment table layout is consistent with the rest of the application (font, spacing, alignment).
  • Validate that the expand/collapse toggle for assignments works smoothly beneath each course row.
  • Check layout behavior across multiple screen sizes, especially in responsive or paginated views.

Automated Tests

  • Frontend: We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
  • Backend: API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

Team

Mentor: Mitesh Anil Agarwal magarwa3@ncsu.edu

Team Members:

Relevant Links

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2025_-_E2506._Merging_UI_for_View_Assignments_in_Courses&oldid=165531"