WDD 430: Web Full-Stack Development

W04 Team: Code Review

Overview

This week you will review a teammate's Sacrament Meeting Planner application, focusing on the previous week's additions: live database integration, route groups, and URL-based search and pagination. Test the live deployment and read through the Pull Request diff to give specific, actionable feedback.

Activity Instructions

Determine the person whose code you will review

Important!

If adjustments need to be made on review assignments within the team, please make those decisions as a team and communicate your changes in your Microsoft Teams channel.

Refer to your team's team-membership.docx file in Microsoft Teams to find each person's assigned number.

Enter your team size below to see which teammate you are assigned to review this week.

Week 04 Review Schedule

Find your teammates' Pull Request and Vercel URLs

Use the team membership file to locate your teammate's GitHub Pull Request URL and Vercel preview URL.

If your teammate has not posted their links yet, send them a message in Teams and ask them to share their links right away.

Test the live deployment

  1. Open your peer's Vercel preview URL in your browser.
  2. Be prepared to take notes on any issues you find.
  3. Work through each route below to check for any that are missing, broken, or behaving incorrectly.

    Be sure to have your notes handy for your code review survey submission and to include in your Pull Request comments in the next steps. If there are no issues found, indicate this in your submission.

    1. / — Home/landing page loads without errors.
    2. /meetings — A paginated list of meeting cards is displayed, along with a search input.
    3. /meetings?query=regular&page=1 — Search and pagination work together; the URL updates without a full page reload.
    4. /meetings/1 (or any valid ID) — Full meeting detail renders, including hymns, prayers, speakers, and ward business.
    5. /api/meetings — Returns a JSON array of all meetings.
    6. /api/meetings/abc — Returns a 400 response (not a 500 or HTML error page).
  4. Check that the navigation links work and that active-link styles update as you move between pages.
  5. In DevTools console, check for any errors or warnings.

Review the Pull Request code

Important!

For every issue you identify, click the + button on the relevant line of code and choose Start a review, then Add review comment (not Add single comment), so all your feedback is grouped into one submission and one notification.

  1. Open your teammate's GitHub Pull Request (PR) URL.
  2. Click Files changed to browse the diff — this shows only the code your teammate wrote, not the generated scaffold.
  3. Use the checklist below to guide your review. Note that you may include other issues that you find that are not covered by the checklist.
    1. Database integration – lib/meetings-db.ts
      • Has the in-memory array been replaced with live SQL queries using the neon() client?
      • Are getMeetings and getMeetingById now async functions that await the SQL result?
      • Does getMeetingsTotalPages exist and use COUNT(*) to return the correct number of pages?
    2. Route groups – app/
      • Are public meeting routes moved into app/(public)/meetings/?
      • Does an app/(admin)/ group exist with a layout and at least a placeholder page at /meetings/new?
      • Do the existing URLs (/meetings, /meetings/[id], /meetings/current) still work correctly — route group folders should be invisible to the router?
    3. Search component – components/MeetingSearch.tsx
      • Does it use useSearchParams, usePathname, and useRouter to read and write the query URL parameter?
      • Does a new search reset pagination to page 1 (params.set('page', '1'))?
      • Does the input have an accessible label or aria-label?
    4. Pagination component – components/Pagination.tsx
      • Are previous/next links hidden or disabled appropriately at the first and last pages?
      • Does the pagination <nav> have an aria-label?
    5. Meetings list page – app/(public)/meetings/page.tsx
      • Does the page read query and page from its searchParams prop?
      • Are both MeetingSearch and Pagination rendered on this page?
    6. Async/await correctness
      • Are all calls to the now-async getMeetings and getMeetingById properly awaited?

Submit your review comments in the Pull Request review

  1. In the Files changed tab, click the green Finish your review button in the top-right corner.
  2. A dialog will appear. You may add a brief summary in the text box. Select Comment as the review type, then click Submit review. This submits all of the line comments you added in the previous step as one grouped review.
  3. Now go to the Conversation tab, scroll to the bottom, and use the Leave a comment box to post your live deployment review notes from the previous step. Replace the placeholders with the actual URL, your testing device/browser, and your findings. If you found no issues, indicate that in the Notes/Issues section: 
    ## Vercel Deployment Review Notes

- **Deployment URL:** [https://teammate-app.vercel.app](https://teammate-app.vercel.app)
- **Tested on:** (mobile / desktop / both and what browser?)
- **Notes/Issues:** 
  - [] ...
    Click Comment to post it.

Writing useful comments

Example of a useful comment: "The getMeetings call in page.tsx is not being awaited — this passes a Promise object to MeetingCard instead of the resolved meeting array, which will cause a runtime error."

Submission Instructions

Return to Canvas and complete the code review survey. Be prepared to submit your live deployment review notes and the URL of the Pull Request you reviewed.

You will also submit the URL of your Pull Request review in the Team: Project & Code Review assignment this week.

If your teammate's repository or rendered site was unavailable after you made a reasonable effort to contact them, you will be able to report that in the survey. In addition, report the issue to the instructor directly right now through a Microsoft Teams chat message.