W02 Team: Code Review
Overview
The purpose of this activity is to help you learn how to give and receive constructive feedback on code, an essential skill for any software developer. By reviewing your teammate's code and rendered output, you will gain insight into different coding styles, best practices, and potential areas for improvement. You will also help your teammate identify and resolve issues in their code.
The review habits you practice now, including clear technical communication, respectful collaboration, and actionable feedback, are essential professional skills used in software development teams and technical code reviews.
Instructions
You will be reviewing a teammate's Week 01 assignment. Follow these steps to complete this code review activity:
Determine Who to Review
STOP!
If you have not joined a team or completed the team membership document, complete the W01 Team: Code Review – Preparation assignment before proceeding with this code review.
- Refer to your team's team-membership document in Microsoft Teams to determine each person's
assigned number.
How do I find the team membership document?
- Open Microsoft Teams
- Navigate to your team's channel
- Click the Shared tab to see a list of files shared in your team's channel.
- Open the file named team-membership.docx. If this file is not present, complete the steps of the W01 Team: Code Review – Preparation assignment.
- Find your name in the list and note the number assigned to you.
- After everyone's number is confirmed, enter your team size in the form below to see which teammate you are
assigned to review.
Week 02 Review Schedule
- Use the team membership document and the review schedule above to determine which teammate's code you will review. Then open their GitHub repository and rendered site link in a browser.
If your assigned teammate has not posted their repository link or rendered site link, first make every reasonable effort to contact them through Microsoft Teams and request the missing information. If the repository or rendered site still is not available after you have attempted to contact them, complete as much of the review as you can and report the issue in this assignment submission.
Review Code
Using your teammate's GitHub repository, review their project code and create issues with the "Reference in new issue" option. You are required to log at least one substantive issue labeled must-fix or should-fix. You may also add optional feedback labeled nice-to-have or praise.
Code Review Suggestions
Use the following checklist to focus on key items during your code review.
- Is the App Router pattern used with proper page structure?
- Does the root layout exist with proper structure and imports?
- Are any static assets organized logically (images, fonts, and so o.)?
- Are the required, reusable components extracted and organized?
- Is the .gitignore file properly configured to exclude /node_modules, /.next/, and build files?
- Are all components properly typed with TypeScript (or is there a tsconfig.json for strict mode)?
- Are props typed with interfaces or types?
- Are API routes in the
app/api/directory and named properly? - Are semantic HTML elements used?
How to Create Issues in GitHub
- Navigate to the code file that you are reviewing.
- Click on the line number where you found an issue. This will highlight the line.
- Click the kebab ••• menu button that appears to the left of the line number to reveal the line options.
- In the dropdown menu, click Reference in new issue.
- The Issues tab opens with a new issue pre-filled with the selected file path and line number.
- Add a title to the issue. Use one of the following labels at the beginning of the title to
indicate the type or severity of the feedback:
- must-fix – Critical issues that prevent the application from functioning correctly or pose security risks.
- should-fix – Important issues that affect code quality, maintainability, or user experience but do not break functionality.
- nice-to-have – Optional minor improvements or suggestions that enhance readability, performance, or best practices but are not essential.
- praise – Optional positive feedback on well-implemented code, good design choices, or effective use of technologies.
- Add a description to the issue below the pre-filled file path and line number.
- Click the Submit new issue button to create and record the issue.
- Be specific about the issue and its impact.
- Offer suggestions for how to fix the issue, if appropriate.
- Be respectful and constructive in your feedback.
Review the Rendered Site
Review your teammate's rendered site in a browser using an incognito or private window. Use the following checklist to guide your review:
- Does the application meet the minimum assignment requirements?
- Is the design responsive? (There should be no horizontal scrolling, layout issues, and so on.)
- Are all links functional and lead to the correct destinations?
- Visit
/api/helloin the browser and verify that it returns the expected JSON response, For example,
.{ message: 'Hello from Next.js API!' } - Run DevTools Lighthouse on the rendered site.
- Be sure that the home page of the application is open in an incognito or private window.
- Choose mobile device and check all four categories: Performance, Accessibility, Best Practices, and SEO.
- Run DevTools CSS Overview and verify there are no major contrast errors and no significant unused CSS declarations.
Submission Instructions
Return to Canvas and complete the code review acknowledgment quiz. 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 quiz. In addition, report the issue to the instructor directly right now through a Microsoft Teams chat message.