CSC/ECE 517 Fall 2025 - E2552. ProjectTopic and SignedUpTeam

E2552. Reimplementation of ProjectTopic and SignedUpTeam

This page provides a description of the Expertiza-based OSS project completed as part of the reimplementation effort for Fall 2025.

• • TOC**

About Expertiza

[[1](http://expertiza.ncsu.edu/) Expertiza] is an open-source educational web application developed on the [[2](http://rubyonrails.org/) Ruby on Rails] framework. It enables instructors to create assignments, manage teams, and facilitate peer reviews. Students can sign up for topics, form teams, submit work, and review peers’ submissions. The new reimplementation of Expertiza separates the back end and front end — with a Rails API providing REST endpoints and a React/TypeScript front end consuming those APIs.

Problem Statement

In the existing Expertiza system, the topic signup mechanism was implemented using legacy classes such as `SignUpTopic` and `SignedUpTeam`. This implementation was tightly coupled to the MVC structure, contained redundant logic, lacked proper validation, and offered limited flexibility for team-based topic management.

The goal of this project (E2552) was to **reimplement ProjectTopic and SignedUpTeam** in the modern Expertiza architecture, aligning with RESTful API principles and React-driven UI. The backend was built on Rails API, and the frontend was developed in React with TypeScript.

The following tasks were accomplished:

• Reimplemented `ProjectTopic` and `SignedUpTeam` models with ActiveRecord relationships and validations.
• Created RESTful API endpoints to manage topics and team signups.
• Implemented controllers with robust error handling, transaction safety, and parameter validation.
• Added RSpec test coverage for all new controllers, models, and routes.
• Built the corresponding React front-end components for viewing, signing up for, and managing topics.

Backend Implementation

Files Modified and Created

• **app/models/project_topic.rb**
• **app/models/signed_up_team.rb**
• **app/controllers/api/v1/project_topics_controller.rb**
• **app/controllers/api/v1/signed_up_teams_controller.rb**
• **app/serializers/project_topic_serializer.rb**
• **app/serializers/signed_up_team_serializer.rb**
• **spec/models/project_topic_spec.rb**
• **spec/models/signed_up_team_spec.rb**
• **spec/requests/project_topics_spec.rb**
• **spec/requests/signed_up_teams_spec.rb**

Key Features Implemented

• **ProjectTopic model**

 * Represents a topic that students or teams can sign up for.
 * Includes fields such as `topic_identifier`, `topic_name`, `max_choosers`, `category`, `description`, and `link`.
 * Associations:

   * `has_many :signed_up_teams`
   * `has_many :teams, through: :signed_up_teams`
 * Validations ensure that topic name, identifier, and slot count are always present and valid.
 * Scopes added to filter available and full topics.

• **SignedUpTeam model**

 * Connects a team with a project topic.
 * Contains foreign keys `team_id` and `project_topic_id`.
 * Includes methods for checking waitlist status and slot availability.
 * Adds validation to prevent over-signing beyond max_choosers.
 * Includes transaction-based signup to ensure atomic slot allocation.

• **Controllers**

 * Implemented RESTful endpoints:

   * `GET /api/v1/project_topics` — List all topics for a given assignment.
   * `POST /api/v1/project_topics` — Create a new project topic.
   * `PATCH /api/v1/project_topics/:id` — Update topic details.
   * `DELETE /api/v1/project_topics/:id` — Remove a topic.
   * `POST /api/v1/signed_up_teams` — Sign a team up for a topic.
   * `DELETE /api/v1/signed_up_teams/:id` — Remove a team from a topic.
 * Implemented strong parameters for input validation.
 * Added custom error messages for invalid signups and slot constraints.
 * Ensured all database operations run in transactions for consistency.

• **Serializers**

 * Added serializers for both models to return clean JSON for frontend consumption.
 * Serialized attributes include topic metadata, associated teams, and available slots.

• **RSpec Testing**

 * Added unit tests for all models and request specs for controllers.
 * Tests verify successful CRUD operations, validation errors, and edge cases (like signing up when no slots are available).

Example Snippet

# POST /api/v1/signed_up_teams
def create
  team_id = params[:team_id]
  topic = ProjectTopic.find(params[:project_topic_id])

  if topic.available_slots? 
    SignedUpTeam.transaction do
      SignedUpTeam.create!(team_id: team_id, project_topic_id: topic.id)
    end
    render json: { message: 'Team successfully signed up!' }, status: :created
  else
    render json: { error: 'No slots available for this topic.' }, status: :unprocessable_entity
  end
end

Frontend Implementation

Files Modified and Created

• **src/pages/ProjectTopics.tsx**
• **src/components/TopicTable.tsx**
• **src/components/TopicRow.tsx**
• **src/api/projectTopics.ts**
• **src/api/signedUpTeams.ts**

Key Features

• Implemented the Project Topic view in React/TypeScript to display topics fetched from the backend.
• Added a reusable **TopicTable** component to list all topics, including columns for:

 * Topic ID
 * Topic name (linked if a URL is provided)
 * Max choosers and available slots
 * Waitlist count

• Implemented signup and withdrawal buttons that trigger API requests to the backend.
• Added loading and error states for better UX.
• Integrated the API layer with Axios for RESTful communication.
• Used React hooks (`useState`, `useEffect`) to manage data and side effects.
• Ensured responsiveness and accessibility according to Expertiza design standards.

UI Features

• Instructors can:

 * Create, edit, and delete topics.
 * View signed-up and waitlisted teams.

• Students can:

 * View available topics.
 * Sign up for a topic or withdraw from one.
 * See waitlist status and slot availability.

• Added conditional rendering for available slots and disabled signup if a topic is full.

Testing

Backend Testing

• Implemented RSpec tests covering:

 * Model validations and associations.
 * API request success/failure responses.
 * Transaction rollback on failed signups.

• All tests passed successfully:

$ rspec spec
Finished in 4.82 seconds
52 examples, 0 failures

Frontend Testing

• Verified API integration manually using local backend.
• Used Jest and React Testing Library for component testing.
• Ensured UI correctly reflects backend responses for:

 * Available slots
 * Waitlist updates
 * Topic creation and deletion

Impact and Improvements

• The new implementation decouples topic and team logic from the legacy system.
• Enforces data integrity using validations and transaction safety.
• Adds clear separation of concerns between backend logic and UI presentation.
• Provides a scalable, maintainable structure for future Expertiza features such as bookmarks and partner advertisements.

Future Work

• Add pagination and filtering for large topic lists.
• Implement bookmarking feature and partner advertisements.
• Introduce instructor analytics dashboard for topic statistics.
• Integrate full end-to-end Cypress tests once frontend is deployed.

References

1. [[3](https://github.com/expertiza/reimplementation-back-end) Expertiza Reimplementation Backend Repository]
2. [[4](https://github.com/expertiza/reimplementation-front-end) Expertiza Reimplementation Frontend Repository]
3. [[5](https://wiki.expertiza.ncsu.edu/index.php/Expertiza) Expertiza Wiki]
4. [[6](http://rspec.info) RSpec Documentation]
5. [[7](http://wikis.lib.ncsu.edu/index.php/Documentation_on_Database_Tables) Expertiza Database Tables Documentation]