Project P5: Software Deployment and Final Presentation¶

Learning Objectives¶

Students will be able to...

Collaborate with LLMs to deploy a full-stack application (including frontend and backend) to the web.
Prepare and deliver a engaging demonstration of a deployed application.
Conduct a structured debriefing analyzing team practices, project successes, and failure points.

Instructions¶

In P1, you created requirements, UX storyboards and wireframes, and an architecture document for your project. In P2, you used an LLM to implement the frontend of your application based on these artifacts while stubbing the backend. In P3, implemented the backend of your application and integrated it with the frontend. In P4, you wrote unit tests for your frontend and backend files/classes. In P5, you will deploy the frontend and backend of your application to the web and present a demonstration of your deployed app to the class.

Requirements for All Parts¶

Full-Team Collaboration: For all parts of this assignment, the full team must work together, following a pair-programming style approach (albeit with the whole team). The group work may be done in person or remotely in an on-line meeting. Drivers must rotate regularly (e.g., every 20–30 minutes). Driving duties must be shared equally by all team members, and each team member must drive at least once.
AI Chat Transcripts: Many parts of this assignment will involve interacting with AI chatbots. Transcripts of all such interactions must be saved and submitted.
LLM-Driven Development: 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.
Spec-Driven Development: When collaborating with LLMs to perform tasks, include relevant specifications (user stories, wireframes, and architecture information) in the LLM's context. The aim here is to do something akin to spec-driven development.
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.
Markdown: All documents produced by the team must be written as Markdown. AI tools are generally very good at writing Markdown.
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.
Be Vigilant: Watch out for nonsensical test cases or duplicate or significantly overlapping test cases. The LLM must not generate test cases for functions and functionalities that do not exist.
README: Add any and all relevant instructions regarding how to configure and run the team's app to the project README (a README.md Markdown file in the top-level folder of the project repo). If there are external dependencies (e.g., libraries/packages), be sure to mention them.

Part 1: Deploy the App¶

By the end of this sprint, you will set up a publicly visible deployment of your application.

Work together as a team to deploy your app to the web using an appropriate web hosting platform. If using Amazon AWS, you may follow the steps in the deployment activity.

Be sure that any procedures and/or automation for updating your deployment(s) are clearly documented in the project README.

Part 2: Demo and Reflection Video¶

Once the app is deployed, 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.
Deployment Tour and Demo: To begin the video, one team member must give a brief "nickel tour" of team's deployment (relevant platforms, services, and configurations) and demonstration that the deployment works correctly. Limit the demo to no more than 8 minutes.
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:

For each of the following questions, describe relevant experiences the team had to support your answer.

How effective was the LLM in helping you understand how to deploy your app?
What did you like about it? What was wrong with it?
How many times did you have to change your prompt to get it to explain the information in a way you could understand?

Part 3: Final Project Presentation¶

Across P1–P5, you designed, implemented, tested, and deployed a full-stack application. As a culmination of your team's work, you will deliver a live in-class project demonstration and debriefing. The total time reserved for each team's presentation is 14 minutes.

Subpart 3-1 Live Demonstration:

One member of your team must provide a short live demonstration of the team's app that satisfies the following criteria:

Gentle Introduction for a General Audience: Don’t forget that not everyone is as familiar with your project as you are. To be on the safe side, presenter must provide a gentle introduction to the app that explains it as if talking to someone who has never heard of the app before.
User-Goal Focus: Structure the demonstration around goals that a user wants to fulfill using the app. Before showing the features in action, the presenter must always first make it clear what the user wants to do and why. The presenter may optionally use a story-telling approach in which the presenter introduces imaginary characters (e.g., Alice and Bob) and narrates as the characters use the app.
Realistic Data: Use only realistic data values in the demo and not made-up placeholders, like “blah” and “slafjsd”.
Only the Most Interesting User Goals and Features: For the live demo, the time will be very limited. Focus the demo on only the most interesting features of the app. It is NOT necessary for all features to be demoed or for every team member’s contributions to be shown.
6-Minute Length: The demo must be no more than 6 minutes long and must also fill the 6 minutes well — don't make the demo too short or too long!

Here are some tips for the demo:

Prepare ahead of Time: The demo must be well thought out and not leave the audience with the impression that the presenter is making it up as they go along. Prepare seed data. Prepare what will be said. Plan any data to be entered into the app during the demo. Rehearse! Rehearse! Rehearse!
Sign In Users Ahead of Time: User sign-in, sign-up, and sign-out features are not interesting. Avoid wasting time with them by signing in users prior to the start of the demo.
Multiple Browsers for Multiple Users: For parts of the demo that involve multiple users interacting via your team’s app, use a different browser for each user. Do NOT sign out and sign in every time the demo’s focus switches from one user to the other.
Have a Backup Plan: Have a backup plan or recorded demo in the event of technical difficulties that would otherwise ruin your demo.

Subpart 3-2 Project Debriefing:

Conclude your presentation with a debriefing that covers the following topics. It is completely up to the team as to how presenter duties for the debriefing are assigned to the team members (e.g., one team member may present it all or it may be shared among multiple team members).

Successes: What went well in development, testing, deployment, and team collaboration?
Failures/Surprises: What broke? What caused major delays? What took far longer than expected?
Lessons Learned: What would you have done differently? What best practices will you adopt in future AI-assisted software development projects?

Your debriefing presentation must meet these criteria:

Connect to Firsthand Experiences: As always, describe relevant experiences the team had during the project to support your answers to the questions.
8-Minute Length: The debriefing must be no more than 8 minutes long and must also fill the 8 minutes well — don't make the demo too short or too long!

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), the video, and the deployed app. You may also attach a document that provides links to or verbatim copies of AI chat transcripts from the assignment that were not submitted elsewhere (e.g., as part of a pull request).

Important! Keep your app deployed until final grades are assigned. Beyond that point, the team should carefully consider whether or not your app should be taken down (e.g., to mitigate the risk of being billed for service usage) and agree to a plan.

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: Deploy the App¶

High-Pass: Deployed app is accessible and functioning. Project README includes all relevant links/instructions.
Low-Pass: App is deployed to the web, accessible, and mostly functional, but there are a few glaring issues with how well it works and/or the README documentation.
Fail: Fails to meet 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 2-1 Deployment Tour and Demo:

High-Pass: Video tour and demonstration of the team's deployment is presented such that the relevant platforms, services, and configurations are well covered, the deployed app's key features are demoed, and the tour/demo is 8 minutes or less in length.
Low-Pass: Video tour and demonstration mostly meets expectations; however, there are a few glaring issues with the coverage of services, etc. and app features, 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 2-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.

Part 3 Rubric: Final Project Presentation¶

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 3-1 Live Demonstration:

High-Pass: Pass (H or L) score on all criteria (no F scores) with H on half or more.
Low-Pass: Pass score on all criteria (no F scores).
Fail: Fails to meet requirements for Low-Pass.

Each of the following grading criteria is marked as H/L/F. In all cases, an F is received if the L criteria are not met.

Gentle Introduction:

H: Introduction is clear and prepares a general audience well to understand tasks to be demonstrated.
L: Introduction is given, but is somewhat unclear and/or leaves a general audience somewhat unprepared to understand tasks to be demonstrated.

User-Goal Focus:

H: For each task demonstrated, the user’s motivation and goal for the task are clearly articulated before the task is performed.
L: The H criteria is mostly met, with only a few violations.

Realistic Data:

H: All data displayed or entered into the app during the demonstration is realistic and germane to the app and tasks being performed with it.
L: The H criteria is mostly met, with only a few violations.

Well Planned and Smoothly Delivered:

H: Features demoed are well chosen as being of key interest and time is not wasted on excessive signing in and out of users.
L: The H criteria is mostly met, with only a few violations.

Appropriate Length:

H: The demo presentation fills 6 minutes well and is no longer than 6 minutes.
L: The demo presentation is noticeably too short or too long (around 2 minutes under or over 6 minutes).

Bug Free:

H: The app does not crash or significantly malfunction during the demonstration. If a feature is incomplete, it can be mentioned by the presenter, but such features should not be demoed in such a way that they crash or produce error messages.
L: One or two minor errors are evident.

Subpart 3-2 Project Debriefing:

High-Pass: The team addresses the required topics such that the presentation is clear, thoughtful, and connects to the team members' experiences. The presentation fills 8 minutes without going over.
Low-Pass: The team member addresses the required topics; however, there are minor deficiencies with the quality of their presentation. The presentation is noticeably too short or too long (around 2 minutes under or over 8 minutes)
Fail: Fails to meet the requirements for Low-Pass.