Skip to content

Project 2: Sprint 1

This project assignment is worth 300 points.

This homework is to be done as a team.

P2 is due on Gradescope Thursday, March 26, 2026 11:59pm.

Submission

Submit P2 as a PDF file to Gradescope.

If you prepare the response in some other software (like Tex), please export as PDF before submitting. Include your name and Andrew ID at the top of the document.

Learning Goals

  • Design and implement the front-end user interface of your startup's application.
  • Use a Large Language Model (LLM) to generate software artifacts, including user stories, UI components, and application code.

1. Project Context

In modern software engineering workflows, LLMs can generate code and interfaces very quickly. However, this creates an important challenge: how do we verify that the generated artifacts actually implement what the designer intended?

In this project assignment, you will:

  1. Use an LLM to generate the user stories describing your product's application.
  2. Use the LLM to generate the UI and first version of the code.

2. User Stories (100 points)

In this section, you will create user stories that correspond to the primary use cases of the product. You can write the user stories by yourselves or use an LLM to write them for you.

The user stories should be customized by your understanding of the primary use cases of your startup's main product as well as the lessons you learned from your user discovery process.

  1. The total user stories your team should write is 2 times the number of team members. If your team has 4 members, create 8 user stories. 5 members? Create 10 user stories. 6 members? Create 12 user stories. We want to ensure your project workload scales with the number of team members.
  2. Write the computed number of user stories. Make sure each user story uses the proper template:
    • As a <user>, I want <action> so that <benefit>. Then add your machine and human acceptance criteria afterwards.
    • Add a one paragraph explanation of why each user story is important to the overall user experience of the application.
    • Make sure each user story can be designed, implemented, tested, and verified in under 2 weeks. If it is too big, split it apart into separate user stories. If it is too small, merge some related user stories together.
  3. Evaluate the user stories.
    1. Use the INVEST framework we learned in class to evaluate each user story.
    2. Identify the 3 user stories that you think are most critical to the business success of the application and explain why.
    3. Identify the 3 user stories that you think will be easiest to implement and explain why.
    4. Identify the 3 user stories that you think will be easiest to test via machine-executable tests and explain why.
    5. Identify the 3 user stories that you think will be easiest for human to decide that it was implemented satisfactorily and explain why.
  4. Prioritize the user stories in order that you should implement them. Justify your implementation order.
    1. Identify and label the "core" user story that creates the base functionality of your application. This must be designated as the first user story to be implemented.
  5. Create GitHub Issues for each user story (along with its acceptance criteria) in your team's GitHub project. Be sure to assign each user story a priority level, specify the sprint number in which it will be completed, and assign it to primary and secondary owners on your team. Turn in the GitHub Issue URL for each user story.
  6. If you used an LLM for any part of this section, please turn in a copy of the chat log or a URL to the chatlog that is accessible to all of the 17-356 instructors.

3. User Interfaces (100 points)

Create high-fidelity user interfaces for each of your user stories using an AI tool.

  1. Include all states of the interface: e.g., empty state, loading, error, success, etc.
  2. Write up the rationale for major design choices (e.g., navigation flow, component reuse, accessibility).
  3. For each element in the UI, identify which user story(ies) required it. If it cannot be connected to a user story, the element should be removed from the interface.
  4. Be sure that the design of each user interface is compatible with all of the others, meaning it should look like one coherently designed application. This requires effective communication between all of the designers on your team as well as any LLMs you may be consulting for help.
  5. Check in high-resolution screenshots of your user interface prototypes into your GitHub repository and turn in URLs to each pull request (PR) merging them into your main branch. Each user story's set of user interfaces should be committed to your repository in its own PR. There should be a total of 10 PRs (even if the user interfaces for each user story overlap).
  6. If you used an LLM for any part of this section, please turn in a copy of the chat log or a URL to the chatlog that is accessible to all of the 17-356 instructors.

4. Implementation (100 points)

Implement the user stories in code for both the frontend and backend using a popular framework of your choice.

  1. For each user story, create a new branch in Git. Write appropriate code for this user story. Update the status of the user story in your Kanban board so your teammates know what you are working on.
  2. Your implementation must:
    1. Include responsive design for at least two screen sizes.
    2. Ensure accessibility compliance with WCAG 2.2 and alt-text for images where appropriate.
  3. The core user story should be checked into your GitHub repository first.
  4. Check in the code for each user story in its feature branch.
  5. Do a code review on the PR and iterate until your teammates are satisfied with the quality of the code. The code review must be completed in GitHub with at least one meaningful comment from the secondary owner of the user story (not the author of the code).
  6. Approve the PR and merge it into main. Remember to keep the status of the user story up to date on your Kanban board.
  7. Turn in a URL to each user story's PR.
  8. Screen record yourself showing off all of the user stories implemented in your app to a customer in a web browser or mobile device (include appropriate voiceover narration so we can follow what you're trying to show). It should display correctly at your two different screen sizes. Use the browser or mobile device's debugger to accurately set the screen size during testing. Resize the browser/mobile device window with your mouse/finger to test for proper layout logic.
    1. Best practice tip: Invent a scenario that motivates a set (usually some, but not all) of user stories. Narrate the actions taken by a user as they proceed through the scenario, pointing out the user stories that were implemented along the way.
  9. Upload the screen recording to YouTube (set to Unlisted and provide the URL).
  10. If you used an LLM for any part of this section, please turn in a copy of the chat log or a URL to the chatlog that is accessible to all of the 17-356 instructors.