WDD 430: Web Full-Stack Development

W03 Team: Code Review

Overview

This week you will review a teammate's Sacrament Meeting Planner application by testing the live deployment and reading through their Pull Request diff. The goal is to give specific, actionable feedback that will help the teammate improve their code.

Stop! Have you updated the document with your own links?

Your teammate who will do your review needs your Pull Request URL and Vercel preview URL to complete their review. Before doing anything else, make sure to update your line item on the team-membership.docx file in Microsoft Teams.

The following must be added from last week's submission:

The membership file content update should look something like this (the following is just an example): 

1. Jeff White
    Week 01: https://github.com/jeff-white/wdd430-portfolio
    Week 02: https://github.com/jeff-white/sacrament-meetings/pull/1
    Week 02: https://sacrament-meetings-peer-code-review-jeff-white.vercel.app/  
2. Adriana Cuevas
    Week 01: https://github.com/adriana28218/wdd430-portfolio
    Week 02: https://github.com/adriana28218/sacrament-meetings/pull/1
    Week 02: https://sacrament-meetings-peer-code-review-adriana-cuevas.vercel.app/
3. Wisdom Bentum
    Week 01: https://github.com/bentumwi/wdd430-portfolio
    Week 02: https://github.com/bentumwi/sacrament-meeting-planner/pull/4
    Week 02: https://planner-peer-code-review-wisdom-bentum.vercel.app/

Activity Instructions

Determine the person whose code you will review

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

How do I find the team membership file?
  1. Open Microsoft Teams and navigate to your team's channel.
  2. Click the Files tab.
  3. Open team-membership.docx. If it is not there, complete the W01 Code Review Preparation first.
  4. Find your name and note the number assigned to you.

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

Week 03 Review Schedule

Find your teammates' Pull Request and Vercel URLs

Use the team membership file to locate your teammates' GitHub Pull Request URLs and Vercel preview URLs.

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 behave 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 list of meeting cards is displayed. Each card links to a detail page.
    3. /meetings/1 (or any valid ID) — Full meeting detail renders, including hymns, prayers, speakers, and ward business.
    4. /meetings/current — Redirects to the current Sunday's meeting detail page, or falls back to /meetings if no matching record exists.
    5. /api/meetings — Returns a JSON array of all meetings.
    6. /api/meetings?date=2026-05-03 — Returns a filtered JSON array for that date (or an empty array if the date doesn't match any records. You can adjust the date parameter).
    7. /api/meetings/abc — Returns a 400 response (not a 500 or HTML error page).
    8. /api/meetings/9999 — Returns a 404 response.
  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.
    1. TypeScript data model – (lib/types.ts and lib/meetings-db.ts)
      • Does lib/types.ts export MeetingType, Hymn, SpeakerItem, WardBusinessItem, and SacramentMeeting with all required fields?
      • Does lib/meetings-db.ts contain at least 5 complete meeting records?
      • Is any used anywhere in these files? It should not be.
    2. Reusable components – components/
      • Do Header, Footer, MeetingCard, MeetingDetail, and NavLinks all exist?
      • Does MeetingDetail render all SacramentMeeting fields — meeting type, presiding/conducting, hymns, prayers, speakers, musical numbers, ward business, stake business, and announcements?
      • Does NavLinks use usePathname and have a 'use client' directive?
    3. Layouts and routing – app/
      • Does app/layout.tsx compose Header, page content, and Footer?
      • Does app/meetings/layout.tsx exist as a section layout?
      • Does app/meetings/current/page.tsx use redirect() from next/navigation?
    4. API routes – app/api/meetings/route.ts
      • Does app/api/meetings/route.ts read the ?date= query parameter and pass it to getMeetings()?
      • Does app/api/meetings/[id]/route.ts return 400 for a non-numeric ID and 404 when the ID is not found?
      • Are both handlers typed — no any in request handling or response construction?
    5. Data fetching in pages
      • Does app/meetings/page.tsx fetch /api/meetings and pass typed data to MeetingCard?
      • Does app/meetings/[id]/page.tsx fetch /api/meetings/[id] and pass typed data to MeetingDetail?
    6. Fonts, images, and code quality
      • Is at least one Google Font loaded via next/font/google in app/layout.tsx?
      • Is next/image used with alt, width, and height on at least one image?
      • Are there any obvious unused imports, dead code blocks, or commented-out code left in production files?

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 here isn't using the date query parameter — searchParams.get('date') returns the value but it's never passed to the function. This means /api/meetings?date=2026-05-03 always returns all records."

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.