CSC/ECE 517 Spring 2026 - E2607. ResponseController Frontend

From Expertiza_Wiki
Jump to navigation Jump to search

CSC/ECE 517 Spring 2026 - E2607. ResponseController Frontend

Important Links

Expertiza

Expertiza is an open-source web application for peer assessment and collaborative learning. It allows instructors to create assignments where students can submit work, review peers, and receive feedback. Expertiza supports team and individual assignments, metareviews, topic sign-ups, staggered deadlines, and detailed rubrics, promoting active learning and continuous improvement.

Overview

The objective of this project is to reimplement the review and response workflow UI for Expertiza. This includes:

  • A modern student dashboard for assigned reviews and topic sign-up.
  • Dynamic review/teammate review forms supporting all questionnaire item types.
  • Instructor tools for assigning reviewers and monitoring review progress.
  • Integration with the backend API for seamless data flow.

Problem

The previous review UI was limited in usability and flexibility. Students could not easily track or resume reviews, and instructors lacked intuitive tools for managing reviewer assignments. The interface did not fully support all questionnaire types or provide clear feedback/status indicators.

Solution Approach

  • Student dashboard displays all assigned reviews, their status (Not saved, Saved, Submitted), and topic/team info.
  • Dynamic review forms render all item types (Criterion, Scale, TextField, TextArea, Dropdown, MultipleChoice, Checkbox, Grid, UploadFile, SectionHeader).
  • Drafts can be saved and resumed; submissions are locked for editing.
  • Instructor “Assign Reviewer” page allows adding/removing reviewers per team.
  • Review Tableau visualizes all reviews for a participant in a matrix format.
  • Uses React 18, TypeScript, Redux Toolkit, React-Bootstrap, Formik, and axios for API integration.

Scope

This project focuses on the frontend React application. Backend API endpoints are assumed to be available and compatible. The scope includes:

  • StudentTasks dashboard
  • TeammateReview form
  • ResponseMappings (Assign Reviewer)
  • ReviewTableau visualization
  • Alert system for user feedback

Key Components

StudentTasks
Displays assigned reviews, their status, and topic/team info. Allows navigation to review forms.
TeammateReview
Renders dynamic review forms for all questionnaire item types. Supports draft saving, submission, and read-only mode.
ResponseMappings (Assign Reviewer)
Instructor tool for assigning/removing reviewers to teams. Uses backend API and localStorage.
ReviewTableau
Visualizes all reviews for a participant in a matrix format, showing rubric items, scores, and feedback.
Alert System
Provides contextual feedback for user actions (success, error, info), with auto-dismiss and manual close.
ResponseController (Backend Integration)
Main backend API controller for managing review responses. Handles creating, updating, submitting, and fetching responses, with proper authorization.

Screenshots

Demo

Setup & Run

Prerequisites

  • Docker and Docker Compose
  • Node.js (v18+) and npm

Backend (Rails API)

  1. In backend directory:
 cd E2550-reimplementation-back-end
 docker compose build --no-cache
 docker compose up
  1. (First time) In a new terminal:
 docker compose exec app bash
 bundle install
 bundle exec rails db:migrate:reset
 bundle exec rails db:seed

Frontend (React)

  1. In frontend directory:
 cd ResponsesController_Frontend_CSC517
 npm install
 npm run dev
  1. Frontend: http://localhost:3000
  2. Backend API: http://localhost:3002

Test Plan

  • Manual testing of all review workflows (dashboard, form, assign reviewer, tableau).
  • API error and loading state handling.
  • Demo credentials: username: student1@example.com, password: password
  • Admin credentials: username: admin, password: password123

Team

Members

  • An Mai (atmai@ncsu.edu)
  • Tejas Manoj Desai (tdesai@ncsu.edu)
  • Emma Hassler (efhassle@ncsu.edu)

Mentor

  • Vishal Reddy Devireddy (vdevire2@ncsu.edu)

Future Scope

  • Add more comprehensive test coverage.
  • Enhance accessibility and mobile responsiveness.
  • Integrate real-time updates for review assignments.
  • Add instructor dashboards for review analytics.

Navigation

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2026_-_E2607._ResponseController_Frontend&oldid=167622"