Skip to content

Project P2: Frontend Development

Learning Objectives

Students will be able to...

  • Transform development specifications into a working user interface.
  • Collaborate with LLMs to generate frontend code, while refining and debugging the output, with a stubbed backend.

Instructions

In P1, you created requirements, UX storyboards and wireframes, and an architecture document for your project. In P2, you will use an LLM to implement the frontend of your application based on these artifacts.

Part 1: Implement the Frontend

Use LLMs to build up your project's frontend implementation in increments. For each increment to be built, include the relevant user stories, wireframes, and architecture information in the LLM's context. The aim here is to do something akin to spec-driven development.

  • Stub the Backend: Since the backend isn't fully implemented yet, you will need to stub the backend to simulate functionality. The emphasis here is on getting something real and visual, even if it's only partially functional.
  • LLM-Driven Coding: Remember, use the LLMs as much as possible to generate the deliverables. You may not modify any generated graphics or code directly, only by prompting the LLM.
  • Git/GitHub: Use Git for version control for your team's sourcecode and other artifacts. Create repositories in the course GitHub organization to push your work to. Use GitHub pull requests (PRs) to submit code to your team's project.
  • Code Review: Make sure that each PR is reviewed by at least one team member other than the author before the it is accepted. Reviewers should use LLMs to assist them.
  • Collaborative Development: Each team member must take the lead on the creation of at least one substantive pull request. It is acceptable to pair program throughout the project.
  • Evolving Specs: It is expected that your project's specs will change and evolve as you work on the project. Be sure to manage the spec artifacts (e.g., with respect to version control and collaboration) the same way you would your code artifacts.
  • Be Vigilant: Watch out for duplicated functionality, inconsistent class names, and incomplete interfaces.
  • README: Be sure to include a README.md in the top-level repository directory. Among other sensible content (project title, contributors, etc.), be sure to include instructions (for the instructors) regarding how to initialize and run the app. If there are external dependencies (e.g., libraries/packages), be sure to mention those as well.
  • AI Chat Transcripts: For each PR, attach or link to all AI transcripts that produced the code and other artifacts being submitted in the PR.

By the end of this assignment, your team should have a working frontend implementation and stubbed backend to power the interface.

Part 2: Demo and Reflection Video

Once all team members have submitted their contributions, record a demonstration and reflection video as follows.

  • Record Teams Meeting: To create the video gather your team together in a Teams meeting and record the meeting. Use screen sharing to capture app demos and slide presentations in the recording. Everyone must have their webcams on, so it can be seen that everyone is present and participating.
  • Frontend Demo: To begin the video, one team member must give a demonstration of the app's frontend features. Limit the demo to no more than 8 minutes. The backend of your app will have only been stubbed, but do your best to show that all the frontend features have been implemented. Demo a variety of error and edge cases to help build confidence as to the completeness of the implementation.
  • Reflection: Take turns with your teammates presenting answers to the reflection questions below. You may optionally use slides or your app as visual aids to support the reflections. Each team member must present the reflection for at least one question. As a team, agree ahead of time as to what the response to each question will entail.

Reflection Questions:

  • How effective was the LLM in generating the frontend code? What did you like about the result?
  • What was wrong with what the LLM generated? What were you able to fix it easily? What problems were more difficult to fix?
  • How did you validate that the implementation was complete and correct? Did you use the LLM to help?
  • How did you test the functionality of the implementation? Explain the steps you took and why you did them.

How to Submit

  • Push all of the spec and code artifacts to your team's GitHub repository (or repositories).
  • Save your video to OneDrive (or Microsoft Clipchamp). Give instructors read permissions. Remove expiration (if relevant).
  • In Canvas, submit the URL(s) of the repository (or repositories) and the video.

Grading Rubric

Project assignments are graded as High-Pass/Low-Pass/Fail.

  • High-Pass: Pass score on all parts with High-Pass on half or more.
  • Low-Pass: Pass score on all parts.
  • Fail: Fails to meet requirements for Low-Pass.

Part 1 Rubric: Implement the Frontend

  • High-Pass: Pass score on all subparts with High-Pass on half or more.
  • Low-Pass: Pass score on all subparts.
  • Fail: Fails to meet requirements for Low-Pass.

Subpart 1-1 Frontend App with Stubbed Backend:

  • High-Pass: Runnable frontend was implemented with features that cover most or all core requirements and that are of good quality. Backend was well stubbed such that frontend features are demonstrable. The team's app can be successfully initialized and ran by following the instructions in the top-level README.md Markdown file.
  • Low-Pass: Runnable frontend was implemented and backend stubbed but a few glaring issues with the quality and/or quantity of functionality were evident. Instructions in the README.md file contained a few glaring omissions or errors.
  • Fail: Fails to meet the requirements for Low-Pass.

Subpart 1-2 Collaborative AI-Assisted Development:

This subpart is graded individually for each team member.

  • High-Pass: The team member led at least one substantial PR that was reviewed and merged into the main branch. The PR included all relevant AI chat transcripts. The team member reviewed at least one PR created by another team member.
  • Low-Pass: The team member led a substantial PR, but there were a few glaring issues with the quality of the PR and/or with the AI chat transcripts. The team member failed to review another team member's PR.
  • Fail: Fails to meet the requirements for Low-Pass.

Part 2 Rubric: Demo and Reflection Video

  • High-Pass: Pass score on all subparts with High-Pass on half or more.
  • Low-Pass: Pass score on all subparts.
  • Fail: Fails to meet requirements for Low-Pass.

Subpart 1-1 Frontend Demo:

  • High-Pass: Video demonstration of the team's frontend app is presented such that the features are well covered, a variety of happy-path, edge, and error use cases are demoed, and the demo is 8 minutes or less in length.
  • Low-Pass: Video demonstration of the frontend is presented; however, there are a few glaring issues with the feature coverage, and/or the demo is noticeably longer than 8 minutes (but not longer than 16).
  • Fail: Fails to meet the requirements for Low-Pass.

Subpart 1-2 Reflection Presentation:

This subpart is graded individually for each team member.

  • High-Pass: The team member presents answers to a subset of the reflection questions such that the presentation is clear, thoughtful, and connects to the team members' experiences.
  • Low-Pass: The team member presents answers to reflection questions; however, there are minor deficiencies with the quality of their presentation.
  • Fail: Fails to meet the requirements for Low-Pass.