CSC/ECE 517 Spring 2026 - E2607. ResponseController Frontend
CSC/ECE 517 Spring 2026 - E2607. ResponseController Frontend
Introduction
Background
The ResponseController Frontend provides the user interface for students and instructors to manage peer reviews, teammate reviews, and feedback in the Expertiza platform. It enables students to view assigned review tasks, complete and submit reviews, and instructors to assign reviewers and monitor review progress.
Motivation
- Modernize the review and response UI for clarity and usability.
- Streamline the process of submitting, saving, and resuming reviews.
- Improve assignment and review management for instructors.
- Ensure maintainability and scalability using React, TypeScript, and modular design.
Tasks Identified
- Student Dashboard (StudentTasks)
- Display assigned reviews and their statuses (Not saved, Saved, Submitted).
- Show topic signup and team information.
- Allow navigation to the review form for each assignment.
- Review/Teammate Review Form (TeammateReview)
- Render dynamic forms for all questionnaire item types (Criterion, Scale, TextField, TextArea, Dropdown, MultipleChoice, Checkbox, Grid, UploadFile, SectionHeader).
- Support saving drafts, resuming, and submitting reviews.
- Display read-only mode for submitted reviews.
- Auto-create ResponseMap if not found.
- Assign Reviewer (Instructor)
- List teams, members, and current reviewer assignments.
- Add or remove reviewers for each team.
- Persist assignments using backend API and localStorage.
- Review Tableau
- Visualize all reviews done by a participant for an assignment.
- Show rubric items, scores, and feedback in a tabular format.
- General Improvements
- Use React-Bootstrap for consistent UI.
- Integrate alert system for feedback (success, error, info).
- Modularize code with hooks, services, and reusable components.
Demo
Demo Video
To be added by the team.
Demo Link
To be added by the team.
Key Components
ResponseController
The ResponseController is the main backend API controller for managing peer review and teammate review responses. It provides endpoints for:
- Creating a new response (draft) or reusing an existing unsubmitted draft for a given review assignment.
- Fetching an existing response and its associated answers (scores/comments).
- Updating a draft response with new answers.
- Submitting a response, which locks it from further editing.
- Unsubmitting or deleting a response (instructor/admin only).
- Ensuring that only the assigned reviewer or authorized instructor can access or modify each response.
The frontend integrates with these endpoints to support saving drafts, resuming work, and submitting reviews, ensuring a smooth and secure review workflow for both students and instructors.
StudentTasks
- Fetches assigned reviews from backend and localStorage.
- Renders a table of assignments, teams, review types, statuses, and action buttons.
- Integrates with topic signup and team info.
TeammateReview
- Fetches questionnaire items and existing responses.
- Renders a dynamic review form based on item types.
- Handles draft saving, submission, and read-only display.
- Integrates with backend for response and response map management.
ResponseMappings (Assign Reviewer)
- Displays teams, members, and reviewer assignments.
- Allows instructors to add or remove reviewers.
- Uses localStorage for persistence and demo data.
ReviewTableau
- Fetches and displays all reviews for a participant.
- Shows rubric items, scores, and feedback in a matrix.
- Uses color coding and tooltips for clarity.
Alert System
- Provides contextual feedback for user actions.
- Alerts auto-dismiss after a timeout or can be closed manually.
Architecture
- Frontend: React 18, TypeScript, Redux Toolkit, React-Bootstrap, Formik, TanStack Table.
- Backend: Ruby on Rails API (see E2550-reimplementation-back-end).
- API Integration: Uses axios for HTTP requests to backend endpoints for responses, response maps, questionnaires, grades, and assignments.
Setup & Run
Prerequisites
- Docker and Docker Compose installed
- Node.js (v18+) and npm (for frontend development)
- (Optional) Ruby and Rails for direct backend development
Backend (Rails API)
- Open a terminal in the backend directory:
cd E2550-reimplementation-back-end
- Build and start the backend services:
docker compose build --no-cache docker compose up
- (First time only) In a new terminal, run setup commands inside the app container:
docker compose exec app bash bundle install bundle exec rails db:migrate:reset bundle exec rails db:seed
- Run backend tests (optional):
bundle exec rspec
Frontend (React)
- Open a new terminal in the frontend directory:
cd ResponsesController_Frontend_CSC517
- Install dependencies:
npm install
- Start the development server:
npm run dev
- The frontend will be available at http://localhost:3000 (or as shown in the terminal).
- The backend API runs at http://localhost:3002 by default.
Notes
- Make sure both backend and frontend servers are running for full functionality.
- Update environment variables or API URLs in the frontend if your backend runs on a different port.
- For production deployment, follow additional build and configuration steps as needed.
Future Work
- Add more comprehensive test coverage for all components.
- Enhance accessibility and mobile responsiveness.
- Integrate real-time updates for review assignments.
- Add instructor dashboards for review analytics.