Assignment 3: React Frontend

Starter Code

Download the starter code archive:

curl -o starter-code.tar.gz https://www.eecg.utoronto.ca/~cying/courses/ece1724-web/assignments/assignment-3/starter-code.tar.gz

Alternatively, download the archive here.

The archive includes:

• Vite + React + TypeScript setup
• Preconfigured proxy for backend API
• Component skeletons with TODO comments
• Sample Playwright tests

• assignment-3
  • src
    • components
      • AuthorSelect.tsx
      • PaperForm.tsx
      • PaperList.tsx
    • routes
      • EditPaper.tsx
      • Home.tsx
    • styles
      • global.css
      • Home.module.css
      • PaperForm.module.css
      • PaperList.module.css
    • main.tsx
    • types.ts
  • tests
    • sample.test.ts
  • eslint.config.js
  • index.html
  • package.json
  • tsconfig.app.json
  • tsconfig.json
  • tsconfig.node.json
  • vite.config.ts

You need to:

• Set up React Router in main.tsx
• Implement home page layout in routes/Home.tsx
• Add paper editing functionality in routes/EditPaper.tsx
• Implement paper list display in components/PaperList.tsx
• Create paper creation form in components/PaperForm.tsx
• Implement author selection in components/AuthorSelect.tsx
• Add custom types in types.ts

Do not modify:

• index.html
• CSS files in src/styles/ directory
• Vite/TypeScript configuration files (e.g., vite.config.ts, eslint.config.js, tsconfig*.json)

Paper Management

• Implement a paper list view with loading states
• Create a paper form to add a new paper, allowing selection of existing authors from a dropdown
• Implement paper editing (title, venue, year) but do not allow editing authors for simplicity
• Implement paper deletion with a confirmation prompt

React Implementation

• Use function components and hooks (useState, useEffect)
• Implement React Router for client-side navigation (Home, EditPaper pages)
• Use fetch for data fetching
• Handle loading and error states properly

Home Route ("/")

Edit Route ("/edit/:id")

API Integration

Your backend runs at http://localhost:3000. Your frontend should call the following endpoints via the Vite proxy:

• GET /api/papers
• GET /api/authors
• GET /api/papers/:id
• POST /api/papers
• PUT /api/papers/:id
• DELETE /api/papers/:id

The autograder will not test more than 10 papers/authors. Therefore, you may call GET /api/papers and GET /api/authors without specifying a limit. Using the default value of 10 is sufficient.

React Router

Use React Router for navigation between:

• / → Home: Displays paper list and create form
• /edit/:id → EditPaper: Displays edit form
  • Use useParams() to read id

Use useNavigate() to navigate after actions

Styling

All necessary CSS files are provided in src/styles/ directory:

• global.css: Global styles (DO NOT MODIFY)
• Home.module.css: Styles for the home page (DO NOT MODIFY)
• PaperList.module.css: Styles for the paper list component (DO NOT MODIFY)
• PaperForm.module.css: Styles for the paper form component (DO NOT MODIFY)

For this assignment, you do not need to write or modify any CSS. Your task is to apply the provided styles by using the appropriate className values in your TSX (as indicated in the starter code).

You may experiment with different styles during development. However, before submitting your work to Quercus, ensure that all of the above files remain exactly as provided in the starter code.

Component Organization

• PaperList.tsx: displays paper list and delete functionality
• PaperForm.tsx: handles both create and edit forms
• AuthorSelect.tsx: dropdown for author selection

Form Handling

• Implement validation before submission
• Clear form after successful submission
• Handle form submission with preventDefault()
• For multi-select authors, manage an array of authorIds in the form state (see TODOs in stater code)

Get Starter Code

Download the starter code archive.

Start Backend

In one terminal, navigate to your Assignment 2 directory, and

npm start

Backend should be reachable at http://localhost:3000.

Frontend Implementation

In another terminal, navigate to Assignment 3 directory, and install dependencies:

npm install

Start the development server:

npm run dev

This will start the Vite development server with hot module replacement enabled.

Notes:

• Make sure the backend server is running before testing API integration
• Use browser’s developer tools to:
  • Debug React components
  • Monitor network requests
  • View console messages
• Use React Developer Tools browser extension for better debugging experience

Development Order

1. Set up routing and basic page structure (Home and EditPaper pages)
2. Implement paper list display with mock data
3. Add API integration for fetching papers
4. Implement create paper form with author dropdown
5. Add edit paper form functionality
6. Add delete functionality with confirmation
7. Enhance loading and error states using provided starter code

Testing Strategy

• Verify all CRUD operations work end-to-end
• Test both success and error scenarios
• Check form validation for all required messages (e.g., Title is required)

Common Pitfalls to Avoid

• Not updating loading states after API calls
• Not setting error states on API failures
• Not validating form inputs before submission
• Incorrect routing setup (e.g., missing useParams for edit route)
• Not using controlled components for forms (e.g., value and onChange)

Install Browser Binaries

From your assignment-3/ directory, run

npx playwright install

Run Tests

From assignment-3/, run the sample test:

npx playwright test tests/sample.test.ts

To run all tests in tests/:

npx playwright test

Run Tests with a Visible Browser

By default, Playwright runs tests in headless mode (no visible browser window). This is fast, but harder to debug.

You can run the test with a visible browser to watch what happens step by step:

npx playwright test tests/sample.test.ts --headed

(Optional) Reset Your Database

The sample test suite does not require resetting your database, as it will delete all papers and authors in the database before running tests. However, if you encounter unexpected behavior due to old data, or if you want to reset id counters to start from 1, you may reset your database.

1. Create reset.sql in your assignment-2/ directory:

   assignment-2/reset.sql

   TRUNCATE TABLE "Paper" RESTART IDENTITY CASCADE;
   TRUNCATE TABLE "Author" RESTART IDENTITY CASCADE;

2. From assignment-2/, run:

   npx prisma db execute --file reset.sql

Prepare reasoning.md

In addition to the required code files, you must submit a short reflection file named reasoning.md.

• Create a folder called assignment-3.
• Inside the assignment-3 folder, create a file called reasoning.md.
• Answer the three required questions described in the AI Usage Policy page.

Important Notes

• Keep your responses brief and specific, with a total length of no more than 300 words.
• This file is intended to capture your genuine thinking process. It is not a long writing assignment required polishing.
• reasoning.md is worth 5% of this assignment grade. Its grading rubric is on the AI Usage Policy page.

Generate the Archive

Make your assignment-3 directory have exactly the following structure:

• assignment-3
  • src
    • components
      • AuthorSelect.tsx
      • PaperForm.tsx
      • PaperList.tsx
    • routes
      • EditPaper.tsx
      • Home.tsx
    • styles
      • global.css
      • Home.module.css
      • PaperForm.module.css
      • PaperList.module.css
    • main.tsx
    • types.ts
  • eslint.config.js
  • index.html
  • package.json
  • tsconfig.app.json
  • tsconfig.json
  • tsconfig.node.json
  • vite.config.ts
  • reasoning.md

From the parent directory that contains the assignment-3 folder, create the submission archive:

tar zcvf 1234567890-1724-a3.tar.gz --exclude='.DS_Store' assignment-3

• Replace 1234567890 with your student number.
• The archive must contain exactly one top-level folder named assignment-3 with the required files inside.
• Do not include node_modules/. The auto-grader will run npm install to install all dependencies specified in package.json.

Verify Your Submission

To avoid a 25-point deduction, use the provided Python script to verify your submission.

1. Download verify_a3_submission.py to the same directory as your .tar.gz file:

   curl -o verify_a3_submission.py https://www.eecg.utoronto.ca/~cying/courses/ece1724-web/assignments/assignment-3/verify_a3_submission.py

   Alternatively, download the script here.

2. Ensure you have Python installed. If not, install it from python.org .

3. From the same directory as your 1234567890-1724-a3.tar.gz, run:

   python verify_a3_submission.py 1234567890-1724-a3.tar.gz

   • Replace 1234567890 with your student number.

Submit to Quercus

Submit your .tar.gz file to Quercus .