clean up

Author: ChrisHowd

Instructions/Labs/LAB_AK_06_vibe_coding_prototype_ecommerce_app.md

@@ -57,7 +57,7 @@ For an AI agent to develop your envisioned app, it needs to understand your prod
 
 - **Code first and iterate to define requirements**: This approach begins with minimal base specifications and jumps straight into coding. As development progresses, the app evolves organically through iterative cycles, gradually shaping the product’s features and user experience. This approach risks deviating from your original vision, for better or for worse, as you explore features implemented by the AI. An AI-led process can become unexpectedly time-consuming and may not yield the desired results, especially when the initial specifications are vague or open-ended.
 
-- **Explore requirements before coding**: This approach emphasizes clarity from the start. You collaborate with the AI to draft a detailed Product Requirements Document (PRD) before writing any code. The PRD outlines the app’s purpose, target users, key features, and technical constraints. By establishing a clear vision upfront, you give the AI a solid foundation to generate code that aligns with your goals—reducing ambiguity and improving the chances of building the app you actually intended.
+- **Explore requirements before coding**: This approach emphasizes clarity from the start. You collaborate with the AI to draft a Product Requirements Document (PRD) before writing any code. The PRD outlines the app’s purpose, target users, key features, and technical constraints. By establishing a clear vision upfront, you give the AI a solid foundation to generate code that aligns with your goals—reducing ambiguity and improving the chances of building the app you actually intended.
 
 In this task, you use GitHub Copilot to evaluate your base specifications and develop product requirements for your prototype app.
 
@@ -69,9 +69,9 @@ Use the following steps to complete this section of the exercise:
 
 1. In the **Add Folder to Workspace** dialog, navigate to an easy-to-find folder location, create a new folder named **VibeCoding-PrototypeApp**, and then select **Add**.
 
-    The folder location should be outside of any existing Git repository and should be easy to find. After completing this lab exercise, you may want to archive or delete the project.
+    The folder location should be outside of any existing Git repository and should be easy to find. For example, if you're using a Windows PC, you can create a new folder named **VibeCoding-PrototypeApp** on your **Desktop** or in your **Documents** directory.
 
-    For example, if you're using a Windows PC, you can create a new folder named **VibeCoding-PrototypeApp** on your **Desktop** or in your **Documents** directory.
+    After completing this lab exercise, you can either archive or delete the code project.
 
 1. Open GitHub Copilot's Chat view.
 
@@ -90,17 +90,14 @@ Use the following steps to complete this section of the exercise:
 1. In the Chat view, enter the following prompt:
 
     ```plaintext
-
     I want to create a product requirements document (PRD) for an app that I'll develop using a vibe coding process. I want the PRD to include information about the app's purpose, target audience, features, and technical requirements. I've defined the following high-level parameters for my app: 1 - Use HTML, CSS, and JavaScript to create a client-side web app. 2 - Include the following web pages: Products, ProductDetails, ShoppingCart, and Checkout. 3 - Enable navigation between pages. I want the prototype app to implement basic features and satisfy a small number of high-level use cases. The prototype should implement the following: basic use case functionality, simple navigation, a sample dataset, and basic styling. I'll be adding the PRD to the chat context, then asking GitHub Copilot Agent to create the prototype app. What sections should I include in the PRD to enable GitHub Copilot Agent to create my envisioned prototype?
-
     ```
 
 1. Review the response generated by GitHub Copilot.
 
     For example, your response may be similar to the following sample:
 
     ```md
-
     To enable GitHub Copilot Agent to create your envisioned prototype app, your Product Requirements Document (PRD) should include the following sections:
     
     1. App Overview / Purpose  
@@ -135,7 +132,6 @@ Use the following steps to complete this section of the exercise:
         - Clarify what is not required (e.g., user authentication, payment processing, backend integration).
     
     Including these sections will give clear, actionable guidance for building your prototype app.
-
     ```
 
     > **NOTE**: Don't worry if your response includes different section titles or if the sections appear in a different order. The responses that AI tools generate are often slightly different from one chat session to another. The selected AI model, your chat history, and the context of your chat session can also affect responses.
@@ -150,7 +146,7 @@ Use the following steps to complete this section of the exercise:
 
 1. In the Chat view, enter the following prompt:
 
-    ```markdown
+    ```plaintext
     The PRD sections that you suggested look good. Here's some information that should help you construct the PRD:
 
     My prototype app targets online shoppers interested in ordering my products. The prototype should include the following:
@@ -169,7 +165,6 @@ Use the following steps to complete this section of the exercise:
     - The ShoppingCart page should display the list of products added to the cart. The list should include the product name, quantity, and total price for that product. The ShoppingCart page should also provide a way to update the quantity of each product that's in the cart, and an option to remove products from the cart.
     - The Checkout page should display a summary of the products being purchased, including product name, quantity, and price. The total price should be clearly displayed along with the option to "Process Order".
     - The left-side navigation menu should provide basic navigation between pages. The navigation bar should collapse down to display a one or two letter abbreviation when the display width drops below 300 pixels. The navigation bar should allow users to navigate between the app pages.
-
     ```
 
     GitHub Copilot should generate a response that includes a suggested PRD based on the information you provided. The response should include the sections that you reviewed earlier, and it should include content for each section based on the information you provided.
@@ -180,7 +175,7 @@ Use the following steps to complete this section of the exercise:
 
 1. In the Chat view, enter the following prompt:
 
-    ```markdown
+    ```md
     Create a markdown file named VibeCodingPRD.md using your suggested sections and the inputs that I've provided.
     ```
 
@@ -194,7 +189,7 @@ Use the following steps to complete this section of the exercise:
 
 1. In the Chat view, enter the following prompt:
 
-    ```markdown
+    ```md
     Can you create low-fidelity wireframe diagrams (or text-based layouts) that represent the web pages and navigation bar (expanded and collapsed) for my prototype app? Use the PRD that I've provided as a reference.
     ```
 
@@ -203,7 +198,6 @@ Use the following steps to complete this section of the exercise:
     For example, the response may look similar to the following:
 
     ```md
-
     Certainly! Here are text-based, low-fidelity wireframe layouts for each main page of your prototype app, based on your PRD:
 
     ---
@@ -279,14 +273,13 @@ Use the following steps to complete this section of the exercise:
     ---
     
     These wireframes provide a clear, simple structure for each page and the navigation menu, matching your requirements. If you want these added to your PRD or as a separate markdown file, let me know!
-
     ```
 
     > **NOTE**: There are many other ways to create wireframe diagrams. For an AI-based approach that aligns with your vibe coding process, you can use Microsoft's M365 Copilot. Just provide M365 Copilot with a description of your app (the contents of your PRD) and ask the AI to create images of low-fidelity wireframe diagrams. For high-fidelity wireframe diagrams that you create manually, you can use a UI/UX design tool such as Figma.
 
 1. In the Chat view, enter the following prompt:
 
-    ```markdown
+    ```md
     Save the low-fidelity wireframe diagrams as text files, one file for each web page and one for navigation.
     ```
 
@@ -318,7 +311,6 @@ Use the following steps to complete this section of the exercise:
     The EXPLORER view in Visual Studio Code should look similar to the following:
 
     ```plaintext
-
     UNTITLED (WORKSPACE)
     └── VibeCoding-PrototypeApp
         ├── ShoppingApp
@@ -327,8 +319,7 @@ Use the following steps to complete this section of the exercise:
         ├── wireframe-navigation.txt
         ├── wireframe-product-details.txt
         ├── wireframe-products.txt
-        └── wireframe-shopping-cart.txt
-
+            ```└── wireframe-shopping-cart.txt
     ```
 
 1. Add the PRD and wireframe diagrams to the chat context.
@@ -341,7 +332,7 @@ Use the following steps to complete this section of the exercise:
 
 1. In the Chat view, enter the following prompt:
 
-    ```markdown
+    ```md
     I want you to create a prototype shopping app using the information in my PRD and wireframe diagrams. Create the prototype app in the selected 'ShoppingApp' folder. The prototype should implement the following: basic use case functionality, simple navigation, a sample dataset, and basic styling. After creating the prototype app, add a '.github/copilot-instructions.md' file to the workspace. Add the contents of the PRD and wireframe files to the 'copilot-instructions.md' file.
     ```
 
@@ -368,12 +359,14 @@ Use the following steps to complete this section of the exercise:
 
     The folder should contain the following files:
 
+    ```plaintext
     ShoppingApp
     ├── .github
     │   └── copilot-instructions.md
     ├── app.js
     ├── index.html
     ├── styles.css
+    ```
 
 1. Take a couple minutes to review each of the code files.
 
@@ -428,13 +421,13 @@ Use the following steps to complete this section of the exercise:
 
 1. In the Chat view, to adjust the breakpoint for the collapsed navigation bar, enter the following prompt:
 
-    ```markdown
+    ```md
     #codebase Refactor the prototype app to use a higher breakpoint for the collapsed navigation bar. Change from 300 to 600px. Update the copilot-instructions.md file to explain the updated 600px requirement.
     ```
 
     If the agent implemented a navigation bar that changes orientation, switches from vertical to horizontal, when the screen narrows, use the following command to update the navigation bar's behavior:
 
-    ```markdown
+    ```md
     #codebase Refactor the code to ensure that the navigation bar stays on the left-side of the app for all devices types and sizes. The navigation bar should be responsive and maintain its position, in either an expanded or collapsed mode.
     ```
 
@@ -446,7 +439,7 @@ Use the following steps to complete this section of the exercise:
 
 1. In the Chat view, enter the following prompt:
 
-    ```markdown
+    ```md
     #codebase Update the prototype app to display an emoji in the nav bar for each of the web pages. Ensure that the emoji is centered horizontally in the nav bar when the nav bar is collapsed. Update the copilot-instructions.md file to include this product requirement.
     ```
 
@@ -462,7 +455,7 @@ Use the following steps to complete this section of the exercise:
 
 1. In the Chat view, to identify additional opportunities for improvements, enter the following prompt:
 
-    ```markdown
+    ```md
     #codebase Review the product requirements and wireframe diagrams in the copilot-instructions.md file. Are there any features or requirements that are missing from the implementation? Are there obvious opportunities to improve the user experience?
     ```
 
@@ -474,15 +467,14 @@ Use the following steps to complete this section of the exercise:
 
     Use GitHub Copilot's suggestions, and any testing notes that you created, to implement improvements. For example, you can ask GitHub Copilot Agent to help you implement the following changes:
 
-    ```markdown
+    ```md
     #codebase Implement the following improvements to the prototype app:
 
     - Replace alert() popups with in-app notification banners or toasts.
     - Add a confirmation/thank you message after processing an order.
     - Add a visual indicator (badge) for the number of items in the cart on the nav bar.
 
     Ensure that the copilot-instructions.md file is updated to reflect any changes to the product features, technical requirements, user experience, or other measurable characteristics.
-
     ```
 
     > **TIP**: You can copy information from GitHub Copilot's response to help construct your new prompt. You can also refer to sections of the previous response in your prompt.